/* ============================================================================ Ergänzungen der CMS-Fassung. Die Vorlage kommt 1:1 aus Elementor. Dort war jede Karte ein eigenes Element mit eigenen CSS-Regeln. Im CMS wird jede Karte aus derselben Vorlage erzeugt, Bilder kommen als Inline-Style aus der Datenbank. Hier stehen nur die wenigen Stellen, an denen das eine Korrektur braucht. ========================================================================= */ /* Gründer 2: In Elementor gab es dafür zwei Blöcke – einen für Desktop (Bild rechts, deshalb order:2) und einen fürs Handy. Das CMS rendert nur noch einen Block; auf schmalen Fenstern gehört das Bild wieder nach oben. */ @media (max-width: 900px) { body.page-id-461 #gf-2-media { order: 0; } } /* Karten der Fallstudien und der Methode bekommen ihr Bild inline. Die Wiederholung/Größe stand vorher in der elementgenauen Regel. */ body.page-id-461 #vc-stack > [id^="vc-card-"] > [id^="vc-right-"], body.page-id-461 #methode-grid > [id^="mc-tile-"] { background-repeat: no-repeat; background-size: cover; } /* Positionen: Das Vorschaubild lag in Elementor als nth-child-Regel im CSS. Im CMS steht es inline am Element – die alten Regeln dürfen nicht mehr dazwischenfunken, sobald ein eigenes Bild gesetzt ist. */ body.page-id-461 #pos-list .pos-thumb[style*="background-image"] { background-size: cover; background-position: center center; background-repeat: no-repeat; } /* Platzhalter, wenn zu einem Team-Mitglied oder einer Stimme (noch) kein Foto hinterlegt ist: Initialen statt leerer Fläche. */ .tm-media .tm-ini, .testi-portrait .testi-ini { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 120px; background: rgba(206, 0, 35, .10); color: #CE0023; font-weight: 700; font-size: clamp(1.4rem, 3vw, 2.2rem); letter-spacing: .02em; } /* Die zuletzt sichtbare Fallstudie schließt bündig mit dem Button darunter ab. In Elementor war das ein fester Wert an Karte 3 — hier folgt es der tatsächlich eingestellten Anzahl. */ body.page-id-461 #vc-stack > .vc-last-visible { margin-bottom: 0 !important; } /* Ergebnisse-Slider: etwas Luft nach oben, damit die hervorgehobene Karte nicht am Rand des Bereichs klebt. Gleiche Regel wie bei BewerberWerk. */ body.page-id-461 .rl-slider { padding-top: 20px; } /* ============================================================================ Rechtstexte: Zwischenüberschriften und Tabellen Die Vorlage kannte im Fließtext nur

. Die ausführliche Datenschutzerklärung braucht zwei weitere Ebenen und Tabellen; ohne diese Regeln greifen die globalen Theme-Größen und h3 wird größer als h2. ========================================================================= */ .bw-recht .bw-text h3 { margin: clamp(22px, 3.4vh, 34px) 0 .5rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; font-size: clamp(1.02rem, 1.35vw, 1.16rem); color: #111214; } .bw-recht .bw-text h4 { margin: clamp(16px, 2.4vh, 24px) 0 .35rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; font-size: clamp(.94rem, 1.1vw, 1rem); color: #111214; } .bw-recht .bw-text h3 + h4 { margin-top: .6rem; } .bw-recht .bw-text table { width: 100%; max-width: 75ch; margin: 0 0 1.4rem; border-collapse: collapse; font-size: .93rem; color: #5A5E68; } .bw-recht .bw-text th, .bw-recht .bw-text td { padding: .55rem .7rem; border-bottom: 1px solid rgba(17, 18, 20, .1); text-align: left; vertical-align: top; } .bw-recht .bw-text th { color: #111214; font-weight: 600; white-space: nowrap; } .bw-recht .bw-text td:first-child { color: #111214; } /* Auf schmalen Fenstern dürfen die Tabellen scrollen statt zu quetschen. */ @media (max-width: 700px) { .bw-recht .bw-text table { display: block; overflow-x: auto; white-space: nowrap; } .bw-recht .bw-text td, .bw-recht .bw-text th { white-space: normal; min-width: 11rem; } } /* ---------------------------------------------------------------- Markenfarbe Auf der Vorlage ist die Umstellung auf Rot nicht überall angekommen: Team- und Stimmen-Kacheln sowie die Platzhalterflächen der Fallstudien standen noch auf dem alten Blau. Hier hängen sie an einer Variablen — eine künftige Farbänderung ist damit eine Änderung an einer Stelle. */ :root { --marke: #CE0023; --marke-tief: #A0031E; } #team-grid .tm-tile .tm-media { background-color: var(--marke) !important; background-image: linear-gradient(135deg, var(--marke) 0%, var(--marke-tief) 100%) !important; } #testi-list .testi-item .testi-portrait { background-color: var(--marke) !important; background-image: linear-gradient(150deg, var(--marke) 0%, var(--marke-tief) 100%) !important; } body.page-id-461 #vc-stack > [id^="vc-card-"] > [id^="vc-right-"] { background-color: var(--marke); } /* ============================================================================ „Über uns“ — Fließtext unter der Überschrift Auf Wunsch des Kunden: vier Zeilen statt fünf. Die Spalte ist breit genug, die Textbreite war mit 44ch enger als nötig. Ab 1600px Fensterbreite ergibt das vier Zeilen; darunter wird die Spalte selbst schmaler, dann bleiben es fünf. Damit dabei nie ein einzelnes Wort allein in der letzten Zeile steht, sind die letzten beiden Wörter im Text durch ein geschütztes Leerzeichen verbunden (Verwaltung → Texte & Einstellungen → Über uns). ========================================================================= */ #about-lcol .subtext { max-width: 50ch; } #about-lcol .subtext p { text-wrap: pretty; } /* ============================================================================ Garantie-Kasten im Hero: Sprung beim Laden Der Kasten liegt absolut im Hero. Sein Elternelement bekommt beim Einblenden kurz ein transform — und ein transform macht das Element zum Bezugsrahmen für absolut positionierte Kinder. Sobald die Animation endet und das transform verschwindet, wechselt der Bezugsrahmen zurück auf #hero-content, und der Kasten springt sichtbar um eine Gutter-Breite nach rechts. Der Kasten blendet weiterhin ein, nur ohne die 18px-Bewegung des Elternelements. ========================================================================= */ body.page-id-461 #hero .hero-promise-wrap.anim { transform: none; } /* ============================================================================ Footer: Deepsoul-Logo neben dem Credit-Text Das Bild sitzt als Inline-Element auf der Schriftlinie und steht dadurch zu hoch. Mittig ausrichten statt auf der Grundlinie. ========================================================================= */ .foot-bottom img { vertical-align: middle; } /* ============================================================================ Fallstudien-Stapel: Luft zur Kopfzeile Die Karten bleiben beim Scrollen oben kleben. Der Haltepunkt lag bei clamp(90px,14vh,120px) — auf Notebook-Höhen sind das rund 100px, und die schwebende Kopfzeile endet bereits bei 98px. Die obere Kante der Karte lag damit praktisch hinter der Navigation, die abgerundeten Ecken waren nicht mehr zu sehen. Jetzt hält die Karte ein Stück tiefer. ========================================================================= */ body.page-id-461 #vc-stack [id^="vc-card-"] { top: clamp(126px, 15vh, 156px); } /* ============================================================================ Abschnitt „Die Menschen dahinter“ (#uebergang): neues Hintergrundbild In style.css steht das Bild fest an der Elementor-Regel. Statt die 1,3-MB-Datei anzufassen, wird es hier überschrieben — die ID gewinnt gegen den Klassen-Selektor von Elementor. Das Bild selbst liegt unter assets/img/; für einen Austausch nur die Datei ersetzen oder hier den Namen ändern. ========================================================================= */ body.page-id-461 #uebergang:not(.elementor-motion-effects-element-type-background), body.page-id-461 #uebergang > .elementor-motion-effects-container > .elementor-motion-effects-layer { background-image: url("../img/uebergang-team-62fb43.webp"); } /* ============================================================================ „Ihr Team“: Einleitungssatz auf zwei gleich lange Zeilen Die Textspalte ist fest 760px breit; der Satz brach dadurch so um, dass in der zweiten Zeile nur „Sie.“ stand. text-wrap: balance verteilt die Wörter gleichmäßig auf beide Zeilen. Browser ohne Unterstützung zeigen weiter den alten Umbruch — für die bleibt im Text ein geschütztes Leerzeichen vor „Sie.“, damit dort wenigstens zwei Wörter stehen. ========================================================================= */ body.page-id-461 #team .team-intro p { text-wrap: balance; } /* ============================================================================ KUNDENFEEDBACK 15.09.2026 ========================================================================= */ /* ---------------------------------------------------------------------------- 1) Leuchtpunkt bei „Wen wir einstellen“ Die Sektion #positionen steht auf blauem Grund, der Punkt vor der Eyebrow ist aber der blaue Standardpunkt — auf Blau praktisch unsichtbar. Für #leistungen, #methode und #breaker-in gibt es diese Weiß-Regel längst, #positionen wurde beim Bau übersehen. ------------------------------------------------------------------------- */ body.page-id-461 #positionen .eyebrow-blue .elementor-heading-title::before { background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .2); } /* ---------------------------------------------------------------------------- 2) Case-Video nicht mehr beschneiden object-fit: cover füllte die Kachel und schnitt das Video seitlich ab. Die Kachel ist schmaler als 16:9, deshalb fehlte links ein Streifen. contain zeigt das ganze Bild; der Rest der Fläche bleibt schwarz, wie bei jedem Player. ------------------------------------------------------------------------- */ body.page-id-461 .vc-right-video { object-fit: contain; background: #000; } /* ---------------------------------------------------------------------------- 3) Fallstudien-Button als Button erkennbar Vorher: nur Textfarbe und ein Pfeil, kein Hintergrund, kein Rahmen, kein Innenabstand — optisch ein Fließtextlink. Jetzt eine gefüllte Schaltfläche in der Hausfarbe. Der Abstand nach oben, den vorher padding-top erzeugt hat, wandert auf margin-top, damit das Padding die Schaltfläche formt. ------------------------------------------------------------------------- */ body.page-id-461 #cases .vc-cta { padding: .85rem 1.5rem; margin-top: 1.7rem; border-radius: 100px; background: var(--blue); color: #fff; font-size: .92rem; letter-spacing: -.01em; box-shadow: 0 6px 18px rgba(17, 18, 20, .16); transition: background .25s, box-shadow .25s, transform .25s; } body.page-id-461 #cases .vc-cta:hover { background: var(--blue-deep, #A0031E); color: #fff; box-shadow: 0 10px 26px rgba(17, 18, 20, .24); transform: translateY(-1px); } body.page-id-461 #cases .vc-cta svg { width: 15px; height: 15px; } /* ---------------------------------------------------------------------------- 4) Check-Icons in der Hero-Garantie Das CSS für die Icons (#hero .hp-list svg) stand schon da, das Markup gab aber nur Text aus — beim Export aus Elementor verloren gegangen, genau wie der SCROLL-Balken. Das Icon steckt jetzt wieder im Listeneintrag; hier nur die Feinabstimmung der Größe. ------------------------------------------------------------------------- */ body.page-id-461 #hero .hp-list svg { width: 15px; height: 15px; margin-top: .05em; opacity: .95; } /* ---------------------------------------------------------------------------- 5) Fallstudien-Stack: Verkleinern und Fortschritt ohne Nachlauf Zwei Bremsen lagen übereinander: a) Elementors Basisregel .e-con{transition: … transform .4s} gilt auch für die Fallstudien-Karten. Jedes scale() aus dem Scroll-Handler wurde also über 0,4 s weganimiert — die Karte wurde erst kleiner, wenn man mit dem Scrollen aufhörte. b) #vc-prog-fill hatte zusätzlich transition: width .18s. Beide Transitions sind hier abgeschaltet. Den Takt gibt jetzt die rAF-Schleife in 43.js vor, das ist bei Lenis das richtige Raster. ------------------------------------------------------------------------- */ body.page-id-461 #vc-prog-fill { transition: none !important; } /* Auf den Karten bleibt genau eine Transition stehen: die Rasterbreite fuer das Aufziehen des Videos (Abschnitt 11). transform und filter - also das, was die Stapelanimation in jedem Einzelbild schreibt - sind damit weiterhin ungebremst. */ body.page-id-461 #vc-stack [id^="vc-card-"] { transition: grid-template-columns .5s cubic-bezier(.4, 0, .2, 1) !important; } /* ---------------------------------------------------------------------------- 6) Zeit-Badge unabhängig vom Video Die Badge wurde bisher nur innerhalb des Video-Blocks ausgegeben: ohne Video-URL blieb das Feld „Zeit-Badge“ wirkungslos. Sie steht jetzt in der Bildkachel selbst und rückt nach oben links, damit oben rechts Platz für das Kundenlogo bleibt. ------------------------------------------------------------------------- */ body.page-id-461 #vc-stack .vc-dur { top: clamp(16px, 2vw, 22px); left: clamp(16px, 2vw, 22px); right: auto; font-size: .92rem; padding: .45rem .9rem; } /* ---------------------------------------------------------------------------- 7) Blaue Hervorhebung Das Feld setzte die Klasse .vc-hl auf die Karte, zu der es kein einziges CSS gab — das Häkchen hat schlicht nichts getan. Eine hervorgehobene Fallstudie bekommt jetzt einen blauen Rahmen, einen blauen Schimmer und eine gefüllte „Case 0X“-Marke, bleibt aber sonst wie die anderen Karten. ------------------------------------------------------------------------- */ body.page-id-461 #vc-stack [id^="vc-card-"].vc-hl { box-shadow: 0 0 0 2px var(--blue), 0 18px 48px rgba(17, 18, 20, .16); } body.page-id-461 #vc-stack .vc-hl .vc-num { background: var(--blue); color: #fff; padding: .3em .75em; border-radius: 100px; } /* ---------------------------------------------------------------------------- 8) Kundenlogo auf den Fallstudien Kundenwunsch 17.09.2026: das Logo soll genauso erscheinen wie oben bei den Ergebnissen - weiss und groesser. Die weisse Platte von vorher ist deshalb raus; das Logo wird jetzt wie dort auf reines Weiss umgefaerbt und sitzt frei oben rechts auf dem Foto. Ein weiches Schlagschatten-Filter liegt darunter: die Fallstudien-Fotos sind heller als die Ergebnis-Kacheln; ohne den Schatten ginge ein weisses Logo auf einer hellen Wand unter. Die Zeit-Badge ist nach oben links gewandert, damit sich beide nicht in die Quere kommen. ------------------------------------------------------------------------- */ body.page-id-461 #vc-stack .vc-logo { position: absolute; top: clamp(16px, 2vw, 28px); right: clamp(18px, 2vw, 30px); z-index: 5; display: block; padding: 0; border-radius: 0; background: none; box-shadow: none; } body.page-id-461 #vc-stack .vc-logo img { display: block; height: clamp(46px, 4vw, 92px); width: auto; max-width: 190px; object-fit: contain; opacity: .94; filter: brightness(0) invert(1) drop-shadow(0 2px 12px rgba(8, 12, 30, .55)); } @media (max-width: 900px) { body.page-id-461 #vc-stack .vc-logo { top: 14px; right: 14px; } body.page-id-461 #vc-stack .vc-logo img { height: 38px; max-width: 130px; } } /* ---------------------------------------------------------------------------- 9) Bewertungen führen zum ProvenExpert-Profil Sternebewertung im Hero und Siegel bei den Kundenstimmen sind jetzt Links, sobald unter Einstellungen → Allgemein eine Profil-Adresse hinterlegt ist. Ohne Adresse bleibt alles wie vorher, nur eben ohne Link. ------------------------------------------------------------------------- */ body.page-id-461 .rating-link { text-decoration: none; color: inherit; cursor: pointer; transition: box-shadow .25s, transform .25s; } /* Kein Rahmen beim Ueberfahren (18.09.2026). Vorher lag hier ein zwei Pixel breiter blauer Ring. Der sass optisch wie ein Fehlerzustand im Formular und war deutlich lauter als alles andere auf der Seite. Jetzt nur noch ein leises Abdunkeln bzw. ein Millimeter Anheben - man sieht, dass etwas anklickbar ist, ohne dass es ruft. */ body.page-id-461 #hero .rating-link:hover { opacity: .72; } body.page-id-461 a.testi-badge:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -10px rgba(17, 18, 20, .35); } /* ============================================================================ 10) Referenzen: Logo-Laufband und der hängende Scroll BEFUND Die Sektion #referenzen arbeitet mit einem Pin: #refs-inner klebt per position:sticky;top:0 fest, während #leistungen mit negativem margin-top darüber geschoben wird (45.js rechnet die Höhen aus). Das funktioniert nur, solange #refs-inner in das Fenster passt. Gemessen auf 1440×900 war es 2035 Pixel hoch — 1135 Pixel mehr als das Fenster. Ein Sticky-Element, das höher ist als das Fenster, klebt sofort und bleibt kleben: über die restlichen 1370 Pixel Scrollweg ändert sich am Bild nichts mehr. Genau das ist das gemeldete „auf diesem Abschnitt bleibt der Scroll hängen“. Zwei Ursachen für die Höhe, beide hier behoben: a) Das Logo-Laufband wurde nie ausgegeben. Vorgesehen war es immer — die Verwaltung führt „Referenzen: Logo-Laufband“ mit drei Zeilen und einem Höhenfeld —, gerendert wurden aber die drei alten Karussell-Widgets. 44.js hätte sie längst entfernt, prüft dafür aber auf .refs-mqrow img und fand nichts. Markup und Stil stehen jetzt wieder da, also greift auch diese Aufräumung wieder. b) #refs-inner trug padding-bottom: clamp(760px, 58vh, 680px). Das Minimum ist größer als das Maximum — nach CSS-Spezifikation gewinnt dann das Minimum, also fest 760 Pixel, unabhängig vom Fenster. Der Wert ist jetzt an die Fensterhöhe gebunden. ========================================================================= */ body.page-id-461 #refs-inner { padding-bottom: clamp(240px, 34vh, 420px) !important; } body.page-id-461 #refs-logowrap { display: block; width: 100%; margin: clamp(40px, 6vh, 72px) 0 0; padding-top: clamp(28px, 4vh, 48px); border-top: 1px solid var(--line, rgba(17, 18, 20, .10)); overflow: hidden; } body.page-id-461 .refs-mqrow { display: flex; width: max-content; gap: clamp(56px, 6vw, 104px); align-items: center; padding: clamp(12px, 1.8vh, 22px) 0; will-change: transform; } body.page-id-461 .refs-mqrow.dir-l { animation: refsMqL var(--dur, 58s) linear infinite; } body.page-id-461 .refs-mqrow.dir-r { animation: refsMqR var(--dur, 58s) linear infinite; } @keyframes refsMqL { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes refsMqR { from { transform: translateX(-50%); } to { transform: translateX(0); } } body.page-id-461 .refs-mqrow img { /* Die Höhe steht als --logo-h am Bild (aus der Verwaltung, Feld „Höhe in Pixel“). --logo-scale zieht alle gemeinsam nach: in der Datenbank steht bei jedem Logo noch der Vorgabewert 40, und so klein wirken sie in der Zeile verloren. Der Faktor hebt sie in die Mitte des üblichen Bereichs (40–66), ohne die Verhältnisse zu verlieren, sobald jemand einzelne Logos feiner einstellt. Wer die Größe später sauber pro Logo pflegt, setzt den Faktor einfach auf 1. */ --logo-scale: 1.4; height: calc(var(--logo-h, 40px) * var(--logo-scale)); filter: brightness(0); opacity: .44; width: auto; object-fit: contain; flex-shrink: 0; display: block; } /* Ohne Bewegung: die Zeilen umbrechen lassen, damit alle Logos sichtbar bleiben. Die Verdopplung stört dabei nicht, sie steht auf aria-hidden. */ @media (prefers-reduced-motion: reduce) { body.page-id-461 .refs-mqrow { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; } body.page-id-461 .refs-mqrow img[aria-hidden="true"] { display: none; } } body.page-id-461 #refs-logowrap .refs-logo-slot { margin-top: clamp(16px, 2.4vh, 28px); } @media (max-width: 900px) { body.page-id-461 .refs-mqrow { gap: 40px; padding: 10px 0; } body.page-id-461 .refs-mqrow img { --logo-scale: 1; } /* Der große Innenabstand unten ist die Fläche, über die sich auf dem Desktop die Leistungen-Sektion schiebt. Auf dem Telefon ist dieser Effekt abgeschaltet (45.js pinnt erst ab 901px), der Abstand blieb aber stehen — gemessen rund 280 leere Pixel unter den Logos, bevor der nächste Abschnitt kommt. Hier also auf ein normales Abstandsmaß zurücknehmen. */ body.page-id-461 #refs-inner { padding-bottom: clamp(40px, 7vh, 80px) !important; } } /* ---------------------------------------------------------------------------- 11) Case-Video zieht die ganze Kachel auf Kundenwunsch 17.09.2026: der Play-Knopf soll nicht nur die rechte Haelfte bespielen, sondern die komplette Kachel zum Player machen; oben rechts ein X, das den vorherigen Zustand wiederherstellt. Die Kachel ist ein zweispaltiges Raster (Text | Bild). Geoeffnet faehrt die Textspalte auf Null und die Bildspalte nimmt alles ein. Das Video liegt bereits absolut in der Bildspalte und waechst deshalb von allein mit. Unterhalb von 901px passiert das bewusst nicht: dort steht die Kachel einspaltig, Bild oben, Text darunter. Wuerde man den Text auch da ausblenden, schrumpfte die Kachel im Moment des Klicks von rund 780 auf 185 Pixel und risse die halbe Seite nach oben - unter dem Finger, der gerade auf Play gedrueckt hat. Am Telefon laeuft das Video deshalb wie bisher in der Bildflaeche, nur eben mit dem X zum Schliessen. ------------------------------------------------------------------------- */ @media (min-width: 901px) { body.page-id-461 #vc-stack [id^="vc-card-"] > .vc-left { min-width: 0; overflow: hidden; transition: opacity .3s ease, padding .5s cubic-bezier(.4, 0, .2, 1); } body.page-id-461 #vc-stack [id^="vc-card-"].vc-video-offen { /* minmax(0, 0fr): eine reine 0fr-Spur behaelt sonst ihre Mindestbreite aus dem Inhalt und bliebe stehen. */ grid-template-columns: minmax(0, 0fr) 1fr !important; } body.page-id-461 #vc-stack [id^="vc-card-"].vc-video-offen > .vc-left { opacity: 0; pointer-events: none; /* Der Innenabstand gehoert nicht zur Rasterspur und bliebe sonst als knapp 90 Pixel breiter Streifen neben dem Video stehen. */ padding: 0; /* Und die Hoehe muss mit weg: in einer null Pixel breiten Spalte bricht der Text nach jedem Wort um und die Spalte waere statt 690 ueber 1400 Pixel hoch - die Kachel doppelt so gross wie vorher. */ max-height: 0; } } /* Logo und Zeit-Badge wuerden ueber dem laufenden Video liegen. */ body.page-id-461 #vc-stack .vc-logo, body.page-id-461 #vc-stack .vc-dur { transition: opacity .25s ease; } body.page-id-461 #vc-stack .vc-video-offen .vc-logo, body.page-id-461 #vc-stack .vc-video-offen .vc-dur { opacity: 0; pointer-events: none; } body.page-id-461 #vc-stack .vc-video-close { position: absolute; top: clamp(12px, 1.6vw, 20px); right: clamp(12px, 1.6vw, 20px); z-index: 8; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 100px; background: rgba(10, 12, 24, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; cursor: pointer; transition: background .25s ease, transform .25s ease; } body.page-id-461 #vc-stack .vc-video-close:hover { background: rgba(10, 12, 24, .88); transform: scale(1.06); } body.page-id-461 #vc-stack .vc-video-close svg { display: block; width: 20px; height: 20px; } @media (max-width: 900px) { body.page-id-461 #vc-stack .vc-video-close { width: 38px; height: 38px; } body.page-id-461 #vc-stack .vc-video-close svg { width: 17px; height: 17px; } } /* Hero, 22.09.2026: neues Foto (Inhaber mit Tablet). Auf dem Handy wurde das Bild gespiegelt und ganz rechts angeschnitten - beim neuen Motiv waere dort nur die Wand zu sehen und die Schrift auf dem Tablet stuende spiegelverkehrt. Deshalb: nicht spiegeln, Person mittig. */ @media (max-width: 767px) { body.page-id-461 #hero .hero-photo { transform: none; object-position: 64% 18%; } } /* Footer, 22.09.2026: "Proudly Designed by Deepsoul" sauber ausrichten. Vorher float:right +   - auf dem Handy brach "Media" samt Logo in eine zweite Zeile und stand schief rechts. Jetzt: Text und Logo als eine Einheit, Logo vertikal mittig; auf dem Handy zentriert untereinander. */ .foot-bottom div[style*="float"] { float: none !important; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .35em .5em; text-align: right; } .foot-bottom a[href*="deepsoulmarketing"] { display: inline-flex; align-items: center; gap: .5em; white-space: nowrap; } .foot-bottom a[href*="deepsoulmarketing"] img { display: block; height: 22px; width: auto; margin: 0; flex: none; } @media (max-width: 767px) { .foot-bottom:has(a[href*="deepsoulmarketing"]) { width: 100% !important; max-width: 100% !important; align-self: stretch; } .foot-bottom div[style*="float"] { width: 100%; flex-direction: column; justify-content: center; text-align: center; gap: .5em; } } /* Footer, 22.09.2026: Der "Nach oben"-Knopf (unten rechts, fest positioniert) lag am Seitenende über dem Deepsoul-Logo. Unter der Zeile Platz lassen, damit Knopf und Logo sich nie überdecken. */ .foot-bottom:has(a[href*="deepsoulmarketing"]) { padding-bottom: 64px; } @media (max-width: 767px) { .foot-bottom:has(a[href*="deepsoulmarketing"]) { padding-bottom: 72px; } .uicore-back-to-top { right: 16px; bottom: 16px; } } /* Kontakt, 22.09.2026: Calendly-Widget passt sich der Spalte an. Im Einbettungscode stand min-width:820px - auf dem Handy ragte der Kalender dadurch weit über den Bildschirm hinaus. Das !important übersteuert den Inline-Wert, auch falls er im Code noch steht. */ .termin-kalender { width: 100%; min-width: 0; max-width: 100%; min-height: 750px; } .termin-kalender iframe { width: 100% !important; min-width: 0 !important; } /* Die Scroll-Bibliothek Lenis sperrt mit ".lenis.lenis-smooth iframe" Klicks auf alle eingebetteten Rahmen. Der Kalender muss klickbar bleiben (Fund 23.10.2026). */ .lenis.lenis-smooth .termin-kalender iframe { pointer-events: auto; } /* Vorabfrage vor dem Terminkalender (27.10.2026): nur Unternehmen, Bewerber gehen zu glanzjobs.de. Karte im Stil der Kontaktseite, Hinweisfenster im Stil des Einwilligungsfensters. */ .termin-vorab-platz { width: 100%; max-width: 560px; margin: 0 auto; } .termin-vorab { display: grid; gap: 14px; padding: 28px; border: 1px solid #E5E7EB; border-radius: 24px; background: #FFFFFF; text-align: left; } .termin-vorab-titel { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 700; color: #0A0A0A; } .termin-vorab-text { margin: 0 0 4px; font-size: 15px; line-height: 1.5; color: #4B5563; } .termin-vorab-feld { display: grid; gap: 6px; margin: 0; } .termin-vorab-feld span { font-size: 14px; font-weight: 600; color: #0A0A0A; } .termin-vorab-feld input { width: 100%; box-sizing: border-box; padding: 14px 16px; border: 1px solid #D1D5DB; border-radius: 14px; background: #FFFFFF; color: #0A0A0A; font: inherit; font-size: 16px; line-height: 1.3; } .termin-vorab-feld input:focus { outline: none; border-color: #CE0023; box-shadow: 0 0 0 3px rgba(206, 0, 35, .15); } .termin-vorab-feld input[aria-invalid="true"] { border-color: #B42318; } .termin-vorab-fehler { margin: 0; font-size: 14px; line-height: 1.4; color: #B42318; } .termin-vorab-fehler[hidden] { display: none; } .termin-vorab-knopf { -webkit-appearance: none; appearance: none; justify-self: start; margin: 6px 0 0; padding: 14px 26px; border: 0; border-radius: 999px; background: #CE0023; color: #FFFFFF; font: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background .2s ease; } .termin-vorab-knopf:hover { background: #A0031E; } .termin-vorab-knopf:focus-visible { outline: 2px solid #CE0023; outline-offset: 3px; } .termin-hinweis { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10, 10, 10, .55); } .termin-hinweis[hidden] { display: none; } .termin-hinweis-box { width: min(440px, 100%); box-sizing: border-box; padding: 22px 20px 18px; border-radius: 24px; background: rgba(10, 10, 10, .94); color: #FFFFFF; border: 1px solid rgba(255, 255, 255, .12); outline: none; } .termin-hinweis-titel { margin: 0 0 8px; font-size: 18px; line-height: 1.3; font-weight: 700; color: #FFFFFF; } .termin-hinweis-text { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .85); } .termin-hinweis-text a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; } .termin-hinweis-knoepfe { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; } .termin-hinweis-knopf { -webkit-appearance: none; appearance: none; display: block; box-sizing: border-box; margin: 0; padding: 12px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); color: #FFFFFF; font: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; } .termin-hinweis-knopf:hover { background: rgba(255, 255, 255, .18); color: #FFFFFF; } .termin-hinweis-ja { background: #CE0023; border-color: #CE0023; } .termin-hinweis-ja:hover { background: #A0031E; border-color: #A0031E; } html.termin-hinweis-offen, html.termin-hinweis-offen body { overflow: hidden; } .bw-calendly { min-width: 0; max-width: 100%; overflow: hidden; } /* ---------------------------------------------------------------------------- Case-Video weich aufziehen — Kundenfeedback 02.10.2026, Punkt 2 Bisher lag der Uebergang allein auf grid-template-columns der Karte. Diese Eigenschaft animiert nicht jeder Browser; dort schnappte die Kachel ohne Zwischenschritte auf. Das Video liegt im geoeffneten Zustand jetzt in der Karte und wird ueber left/top/width/height von der Bildkachel auf die ganze Karte gefahren (31.js). Pixelwerte animiert jeder Browser. ------------------------------------------------------------------------- */ @keyframes bw-vid-ein { from { opacity: 0 } to { opacity: 1 } } body.page-id-461 #vc-stack .vc-right-video { animation: bw-vid-ein .4s ease both; } body.page-id-461 #vc-stack .vc-right-video.vc-video-flip { right: auto; bottom: auto; z-index: 7; border-radius: inherit; transition: left .54s cubic-bezier(.4, 0, .2, 1), top .54s cubic-bezier(.4, 0, .2, 1), width .54s cubic-bezier(.4, 0, .2, 1), height .54s cubic-bezier(.4, 0, .2, 1); } body.page-id-461 #vc-stack .vc-right-video.vc-video-zu { opacity: 0; animation: none; transition: left .54s cubic-bezier(.4, 0, .2, 1), top .54s cubic-bezier(.4, 0, .2, 1), width .54s cubic-bezier(.4, 0, .2, 1), height .54s cubic-bezier(.4, 0, .2, 1), opacity .44s ease; } /* Das X haengt im geoeffneten Zustand in der Karte und muss ueber dem Video liegen - beide sind dort Geschwister. */ body.page-id-461 #vc-stack > [id^="vc-card-"] > .vc-video-close { z-index: 9; } /* ---------------------------------------------------------------------------- Leuchtpunkt vor den Sektionstiteln auf farbigem Grund — Kundenfeedback 02.10.2026, Punkt 8 Bei der Umstellung von Blau auf Rot hat die allgemeine Regel .eyebrow .elementor-heading-title::before{box-shadow: … rgba(206,0,35,.16)} ein !important bekommen. Damit gewann der rote Hof auch in den Abschnitten auf rotem bzw. dunklem Grund (#svc-intro, #pos-head, #methode-head, #breaker-in), in denen der Punkt selbst weiß ist — der Rand sah dort unsauber aus. Punkt und Hof sind dort jetzt beide weiß. ------------------------------------------------------------------------- */ body.page-id-461 .eyebrow-blue .elementor-heading-title::before { background: #fff !important; box-shadow: 0 0 0 4px rgba(255, 255, 255, .22) !important; } /* ---------------------------------------------------------------------------- Gruender 2 (Timur) auf dem Handy — Kundenfeedback 02.10.2026, Punkt 3 Fuer Gruender 2 gibt es in der Vorlage zwei Bloecke: einen fuers Handy (elementor-hidden-desktop/-tablet) und einen ab Tablet. Nur der zweite traegt die IDs #gf-2 / #gf-2-media, an denen das Format der Bildkachel haengt. Der Handy-Block lief deshalb ohne Seitenverhaeltnis mit fester Mindesthoehe und mit anderem Textfluss als Gruender 1. Hier bekommt er dieselben Werte. ------------------------------------------------------------------------- */ @media (max-width: 767px) { body.page-id-461 #team .elementor-element-5d72593 { gap: 24px; margin-bottom: 81px; } body.page-id-461 #team .elementor-element-74948b4 { aspect-ratio: 4 / 5; min-height: 0 !important; max-width: 100%; } body.page-id-461 #team .elementor-element-b56e5c6 { flex: 0 0 auto; } } /* ---------------------------------------------------------------------------- Positionsliste ohne Link — Kundenfeedback 02.10.2026, Punkt 22 Die sechs Eintraege waren auf „#“ verlinkt und fuehrten ins Leere. Ohne Link rendert das Partial jetzt ein
statt eines ; der Mauszeiger soll dort keine Hand mehr zeigen. ------------------------------------------------------------------------- */ body.page-id-461 #pos-list div.pos-row { cursor: default; } /* ---------------------------------------------------------------------------- 11) Bewertungsblock im Hero (wie innosolv.de, 17.10.2026) Statt der weißen Pille: drei Kundenfotos, goldene Sterne (gefüllt nach dem Feld „Bewertung (Zahl)“), die Bewertungszeile als Link zu Trustpilot und darunter eine kurze Zeile. Bewusst ohne Anzahl der Bewertungen. ------------------------------------------------------------------------- */ body.page-id-461 #hero .rating.rating-proof { display: block; width: auto; background: none; border: 0; padding: 0; border-radius: 0; box-shadow: none; } body.page-id-461 #hero .rp { display: flex; align-items: center; gap: 14px; } body.page-id-461 #hero .rp-fotos { display: flex; flex: none; padding-left: 10px; } body.page-id-461 #hero .rp-fotos img { width: 42px; height: 42px; margin-left: -10px; border-radius: 50%; object-fit: cover; border: 2.5px solid #FFFFFF; box-shadow: 0 6px 14px -6px rgba(11, 15, 26, .4); background: #EEEEEE; } body.page-id-461 #hero .rp-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } body.page-id-461 #hero .rp-bewertung { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; } body.page-id-461 #hero .rp-sterne { position: relative; display: inline-block; flex: none; line-height: 1; font-size: 15px; letter-spacing: 2px; color: rgba(11, 15, 26, .16); } body.page-id-461 #hero .rp-sterne::before { content: "★★★★★"; position: absolute; left: 0; top: 0; width: var(--fuellung, 100%); overflow: hidden; white-space: nowrap; color: #F5B301; } body.page-id-461 #hero .rating .rp .rtxt { font-size: 14.5px; font-weight: 500; white-space: normal; text-wrap: balance; } body.page-id-461 #hero .rating .rp .rtxt b { font-weight: 700; } body.page-id-461 #hero a.rp-bewertung:hover { opacity: 1; } body.page-id-461 #hero a.rp-bewertung:hover .rtxt { text-decoration: underline; } body.page-id-461 #hero .rp-zeile { font-size: 13.5px; font-weight: 500; color: var(--ink-soft); text-wrap: balance; } @media (max-width: 560px) { body.page-id-461 #hero .rp { gap: 12px; } body.page-id-461 #hero .rp-fotos img { width: 36px; height: 36px; } body.page-id-461 #hero .rp-bewertung { flex-direction: column; align-items: flex-start; gap: 3px; } body.page-id-461 #hero .rating .rp .rtxt { font-size: 13.5px; } } /* ---- Fußzeile der Unterseiten am Handy (10/2026) ---- Auf Impressum, Datenschutz, Kontakt und Fehlerseite fehlte die Regel der Startseite: Logo (fest 240 px) und Text ragten in die rechte Spalte. Jetzt bleiben sie wie auf der Startseite in ihrer Spalte. Am Computer ändert sich nichts, dort ist die Spalte breit genug. */ #foot-brand .foot-brand-inner { max-width: 100%; } #foot-brand .foot-logo img { max-width: 100%; } /* ------------------------------------------------- Einwilligungs-Fenster (18.10.2026) Wie auf innosolv.de: unten rechts, dunkles Glas, „Ja, weiter zur Seite“ zuerst und in Markenfarbe, „Nur notwendige“ gleich groß daneben (sonst wäre die Zustimmung unwirksam). */ .einwilligung{position:fixed;right:clamp(12px,4.45vw,64px);bottom:20px;z-index:99990;width:min(420px,calc(100% - 24px));padding:18px 18px 16px;border-radius:24px;background:rgba(10,10,10,.9);color:#FFFFFF;border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 30px 60px -24px rgba(10,10,10,.6),inset 0 1px 0 rgba(255,255,255,.08);font-family:inherit;opacity:0;transform:translateY(16px);transition:opacity .35s cubic-bezier(.2,.7,.2,1),transform .35s cubic-bezier(.2,.7,.2,1)} .einwilligung[hidden]{display:none} .einwilligung.offen{opacity:1;transform:none} .einwilligung:focus{outline:none} .einwilligung-titel{margin:0 0 8px;font-size:17px;line-height:1.3;font-weight:700;color:#FFFFFF} .einwilligung-text{margin:0 0 14px;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.8)} .einwilligung-text a{color:#FFFFFF;text-decoration:underline;text-underline-offset:3px} .einwilligung-knoepfe{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:10px} .einwilligung-knopf{-webkit-appearance:none;appearance:none;margin:0;padding:12px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#FFFFFF;font:inherit;font-size:14.5px;font-weight:600;line-height:1.2;white-space:nowrap;cursor:pointer;transition:background .2s,border-color .2s} .einwilligung-knopf:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5);color:#FFFFFF} .einwilligung-ja{background:#CE0023;border-color:#CE0023} .einwilligung-ja:hover{background:#A8001D;border-color:#A8001D} .einwilligung-knopf:focus-visible{outline:2px solid #7C97FF;outline-offset:2px} .fuss-einwilligung{-webkit-appearance:none;appearance:none;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;text-align:left} .fuss-einwilligung:hover{text-decoration:underline} @media (max-width:640px){.einwilligung{left:12px;right:12px;bottom:12px;width:auto;padding:16px 16px 14px;border-radius:22px}} @media (prefers-reduced-motion:reduce){.einwilligung{transition:none;transform:none}} /* Logo-Laufband ohne Trennstrich darüber (Wunsch Timur 18.10.2026) */ body.page-id-461 #refs-logowrap { border-top: 0; } /* Login im Kopf (21.10.2026): heller Knopf links neben dem Haupt-Button, führt ins Kundenportal. Ab 1100 Pixel mit Wort, darunter nur das Symbol, bis 900 Pixel ausgeblendet (dort reicht der Platz nicht, der Login steht dann in der Fußzeile unter „Navigation“). */ #nav-shell .kopf-rechts{display:flex;align-items:center;gap:10px;flex:0 0 auto} #nav-shell .kopf-login{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-weight:600;font-size:.98rem;letter-spacing:-.01em;line-height:1;color:var(--ink);text-decoration:none;padding:.8rem 1.15rem;border-radius:100px;border:1.5px solid rgba(17,18,20,.16);background:rgba(255,255,255,.6);white-space:nowrap;transition:background .25s,border-color .25s} #nav-shell .kopf-login:hover{background:rgba(17,18,20,.06);border-color:rgba(17,18,20,.28);color:var(--ink)} #nav-shell .kopf-login:focus-visible{outline:2px solid var(--blue);outline-offset:2px} #nav-shell .kopf-login svg{width:17px;height:17px;flex:0 0 auto} @media(max-width:1099px){#nav-shell .kopf-login{width:44px;height:44px;padding:0}#nav-shell .kopf-login span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}} @media(max-width:900px){#nav-shell .kopf-login{display:none}} /* Trennstrich im Hauptmenü vor Fallstudien (22.10.2026), Maße wie .kopf-trenner auf innosolv.de */ #nav-shell .mainnav .kopf-trenner{display:inline-block;width:1px;height:22px;margin:0 8px;vertical-align:middle;background:rgba(17,18,20,.15)} /* Ab hier automatisch aus inhalte/beruf.css gebaut (werkzeug/css-bauen.sh), Blau gegen Rot getauscht. Auf anfragen-werk.de nutzt nur die Fallstudien-Seite diese Klassen. Nicht von Hand ändern. */ /* ============================================================================ Berufsseiten (Vorlage „beruf“, z. B. „Reinigungskräfte finden“), seit 10/2026 Baut auf den Bausteinen der Unterseiten auf (bw-page, bw-eyebrow, bw-lead, bw-cta) und übernimmt Farben, Formen und Bewegungen der Startseite: Blau #CE0023 und #A0031E, pulsierende Punkte vor den Titeln, Liste wie „Wen wir einstellen“, Wechsel aus hellen, blauen, grauen und dunklen Bändern. Der Fließtext kommt aus der Verwaltung; diese Klassen kann er benutzen: bf-abschnitt (Abschnitt), dazu bf-band plus bf-blau, bf-grau oder bf-dunkel (Farbband über die ganze Fensterbreite), bf-kennzahlen/bf-kennzahl (große Zahlen, zählen hoch), bf-zweispaltig (Text links, Liste rechts), bf-haken (Liste mit Haken, wird beim Scrollen aktiv), bf-schritte (nummerierte Karten), bf-stellen mit bf-stellen-kopf und bf-stellen-liste/bf-stelle (Zeilen mit Bild beim Darüberfahren), bf-aufruf (Leiste mit Termin-Knopf), bf-stimmen-layout/bf-stimmen-kopf, bf-lohn/bf-lohn-karte (bf-hervor = blau), bf-schluss mit bf-schluss-karte, bf-schluss-bild, bf-schluss-text, bf-kacheln/bf-kachel, bf-tabelle, bf-quelle, bf-frage (aufklappbare Frage). ========================================================================= */ .bw-page.bw-beruf { max-width: 1160px; padding-bottom: 0; } /* Auf den Unterseiten ist der Seitenkörper sonst selbst ein Scrollbereich (overflow hidden/auto); dann bleibt nichts kleben (sticky). Die Startseite hat hier visible. */ body:has(.bw-beruf) { overflow: visible; } .bw-beruf [id] { scroll-margin-top: 110px; } /* Knöpfe wie auf der Startseite: blau, auf Blau und Dunkel weiß. Zweitknopf gleich groß mit Rand. */ .bw-beruf .bw-cta { background: #CE0023; } .bw-beruf .bw-cta:hover { background: #A0031E; } .bw-beruf .bw-cta.bf-cta-zweit { background: transparent; color: #111214; box-shadow: inset 0 0 0 1.5px rgba(17, 18, 20, .22); } .bw-beruf .bw-cta.bf-cta-zweit:hover { background: transparent; color: #CE0023; box-shadow: inset 0 0 0 1.5px #CE0023; } /* Punkte vor den Titeln pulsieren wie auf der Startseite */ @keyframes bf-punkt-puls { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .6; } } .bw-beruf .bw-eyebrow::before { box-shadow: 0 0 0 4px rgba(206, 0, 35, .16); animation: bf-punkt-puls 2.4s ease-in-out infinite; will-change: transform, opacity; } .bw-beruf .bf-pfad { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding-top: clamp(56px, 7vh, 72px); /* unter der fest stehenden Kopfzeile */ font-size: .86rem; color: #5A5E68; } .bw-beruf .bf-pfad a { color: #5A5E68; text-decoration: none; } .bw-beruf .bf-pfad a:hover { color: #CE0023; text-decoration: underline; text-underline-offset: 2px; } .bw-beruf .bf-pfad [aria-current] { color: #111214; font-weight: 600; } /* ---- Einstieg: Text links, Foto rechts; schmal: Überschrift, Foto, Rest ---- */ .bw-beruf .bf-einstieg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 320px); grid-template-areas: "kopf garantie" "rest garantie"; column-gap: clamp(28px, 5vw, 72px); align-items: end; padding: clamp(22px, 4.5vh, 52px) 0 clamp(34px, 5.5vh, 60px); } .bw-beruf .bf-einstieg.mit-bild { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); grid-template-areas: "kopf bild" "rest bild"; align-items: start; padding-bottom: clamp(20px, 4vh, 40px); } .bw-beruf .bf-einstieg-kopf { grid-area: kopf; align-self: end; } .bw-beruf .bf-einstieg-rest { grid-area: rest; } .bw-beruf .bf-einstieg > .bf-garantie { grid-area: garantie; } .bw-beruf .bf-pille { display: inline-flex; align-items: center; gap: .6rem; padding: .45rem .9rem .45rem .8rem; border-radius: 100px; background: rgba(206, 0, 35, .08); color: #CE0023; font-size: .82rem; font-weight: 600; } .bw-beruf .bf-pille::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #CE0023; box-shadow: 0 0 0 4px rgba(206, 0, 35, .18); animation: bf-punkt-puls 2.4s ease-in-out infinite; } .bw-beruf .bf-einstieg h1 { margin: 1.1rem 0 0; font-weight: 700; letter-spacing: -.035em; line-height: 1.03; font-size: clamp(2.1rem, 4.6vw, 3.6rem); color: #111214; text-wrap: balance; } .bw-beruf .bf-punkt { color: #CE0023; } .bw-beruf .bf-einstieg .bw-lead { max-width: 54ch; text-wrap: pretty; } .bw-beruf .bf-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 3.2vh, 32px); } .bw-beruf .bf-knoepfe .bw-cta { margin-top: 0; } /* Foto: nichts liegt auf dem Bild. Die Zahl hängt oben links über den Rand, die Garantie steht darunter und reicht nur in den untersten Rand. */ .bw-beruf .bf-titelbild { grid-area: bild; position: relative; margin: 0; } .bw-beruf .bf-titelbild > img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 50%; border-radius: 28px; background: #E9ECF5; } .bw-beruf .bf-titelbild-zahl { position: absolute; top: -18px; left: -26px; padding: .85rem 1.05rem .9rem; border-radius: 16px; background: #FFFFFF; box-shadow: 0 20px 44px -20px rgba(11, 15, 26, .45); } /* Variante oben rechts (Einstellung zahl_rechts), wenn links ein Kopf nah am Bildrand ist */ .bw-beruf .bf-titelbild-zahl.bf-zahl-rechts { left: auto; right: -26px; } .bw-beruf .bf-titelbild-zahl strong { display: block; font-size: 1.45rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: #CE0023; font-variant-numeric: tabular-nums; } .bw-beruf .bf-titelbild-zahl span { display: block; max-width: 17ch; margin-top: .35rem; font-size: .78rem; line-height: 1.35; color: #5A5E68; } .bw-beruf .bf-titelbild .bf-garantie { position: relative; z-index: 1; margin: -28px 22px 0; padding: .95rem 1.15rem 1.05rem; } .bw-beruf .bf-vertrauen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 22px; } .bw-beruf .bf-fotos { display: flex; flex: none; padding-left: 10px; } .bw-beruf .bf-fotos img { width: 36px; height: 36px; margin-left: -10px; border-radius: 50%; object-fit: cover; border: 2.5px solid #FFFFFF; background: #EEEEEE; box-shadow: 0 6px 14px -6px rgba(11, 15, 26, .4); } .bw-beruf .bf-bewertung { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; font-size: .92rem; color: #5A5E68; text-decoration: none; } .bw-beruf .bf-bewertung b { color: #111214; font-weight: 700; } .bw-beruf a.bf-bewertung:hover .bf-bewertung-text { text-decoration: underline; text-underline-offset: 2px; } .bw-beruf .bf-betriebe::before { content: "·"; margin-right: 9px; } .bw-beruf .bf-sterne { position: relative; display: inline-block; flex: none; line-height: 1; font-size: 15px; letter-spacing: 2px; color: rgba(11, 15, 26, .16); } .bw-beruf .bf-sterne::before { content: "★★★★★"; position: absolute; left: 0; top: 0; width: var(--fuellung, 100%); overflow: hidden; white-space: nowrap; color: #F5B301; } .bw-beruf .bf-garantie { padding: 1.25rem 1.35rem 1.4rem; border-radius: 20px; background: linear-gradient(155deg, #CE0023 0%, #A0031E 100%); color: #FFFFFF; box-shadow: 0 26px 50px -28px rgba(160, 3, 30, .8); } .bw-beruf .bf-garantie-marke { display: inline-flex; padding: .35rem .65rem; border-radius: 100px; background: rgba(255, 255, 255, .16); font-weight: 700; font-size: .64rem; letter-spacing: .09em; text-transform: uppercase; } .bw-beruf .bf-garantie-titel { margin: .6rem 0 0; font-weight: 700; letter-spacing: -.02em; line-height: 1.16; font-size: clamp(1.05rem, 1.3vw, 1.2rem); color: #FFFFFF; } .bw-beruf .bf-garantie-text { margin: .3rem 0 0; font-size: .82rem; line-height: 1.45; color: rgba(255, 255, 255, .84); } /* ---- Fließtext aus der Verwaltung ---- */ .bw-beruf .bf-abschnitt { padding-top: clamp(56px, 8vh, 96px); } .bw-beruf .bf-inhalt .bw-eyebrow { margin-bottom: 1rem; } .bw-beruf .bf-inhalt h2 { margin: 0 0 .9rem; max-width: 26ch; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; font-size: clamp(1.7rem, 3.2vw, 2.6rem); color: #111214; text-wrap: balance; } .bw-beruf .bf-inhalt h3 { margin: 0 0 .45rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; font-size: 1.08rem; color: #111214; } .bw-beruf .bf-inhalt p { margin: 0 0 1rem; max-width: 66ch; color: #5A5E68; text-wrap: pretty; } .bw-beruf .bf-inhalt strong { color: #111214; font-weight: 600; } .bw-beruf .bf-inhalt a { color: #CE0023; text-decoration: underline; text-underline-offset: 2px; } .bw-beruf .bf-inhalt a:hover { text-decoration-thickness: 2px; } .bw-beruf .bf-inhalt a.bf-bewertung { text-decoration: none; } /* Knöpfe im Fließtext: Schrift weiß auf Blau, auf weißen Knöpfen dunkel (sonst greift die Linkfarbe) */ .bw-beruf .bf-inhalt a.bw-cta, .bw-beruf .bf-inhalt a.bw-cta:hover { color: #FFFFFF; text-decoration: none; } .bw-beruf .bf-inhalt .bf-blau a.bw-cta, .bw-beruf .bf-inhalt .bf-dunkel a.bw-cta, .bw-beruf .bf-inhalt .bf-schluss a.bw-cta, .bw-beruf .bf-inhalt .bf-fall-aufruf a.bw-cta { color: #111214; } .bw-beruf .bf-inhalt .bf-blau a.bw-cta:hover, .bw-beruf .bf-inhalt .bf-dunkel a.bw-cta:hover, .bw-beruf .bf-inhalt .bf-schluss a.bw-cta:hover, .bw-beruf .bf-inhalt .bf-fall-aufruf a.bw-cta:hover { color: #FFFFFF; } .bw-beruf .bf-inhalt .bf-quelle { margin-top: .9rem; font-size: .8rem; line-height: 1.5; color: #8A8E97; } .bw-beruf .bf-inhalt .bf-quelle a { color: inherit; } /* Farbbänder über die ganze Fensterbreite. Der Schatten malt die Farbe bis an den Rand, clip-path schneidet oben und unten ab; es entsteht kein Querscrollen. */ .bw-beruf .bf-band { margin-top: clamp(56px, 8vh, 96px); padding-block: clamp(60px, 9vh, 104px); background: var(--bf-band); box-shadow: 0 0 0 100vmax var(--bf-band); clip-path: inset(0 -100vmax); } /* Zwei Bänder direkt hintereinander stoßen ohne weißen Streifen aneinander (z. B. Kundenstimmen dunkel, darunter Weitere Fallstudien grau). */ .bw-beruf .bf-band + .bf-band { margin-top: 0; } .bw-beruf .bf-blau { --bf-band: #A0031E; } /* Band, das sich wie „Unsere Methode“ auf der Startseite (assets/js/43.js, Farb-Morph) beim Herausscrollen komplett von Blau nach Weiß umfärbt. beruf.js setzt dafür --bf-band (Fläche und Rand) und die Schriftfarben; ohne JavaScript bleibt es blau. Die Überblendung von 0,3 s hat #methode dort ebenfalls (Elementor-Container: transition: background .3s); hier zusätzlich auf dem Schatten, der die Farbe bis an den Fensterrand malt, damit Mitte und Ränder gleich laufen. */ .bw-beruf .bf-band.bf-verlauf { transition: background .3s, box-shadow .3s; } /* Karten behalten ihren feinen Rand: auf Blau unsichtbar, auf Weiß grenzt er sie ab. */ .bw-beruf .bf-verlauf .bf-fall { box-shadow: 0 30px 60px -36px rgba(60, 0, 12, .55); } .bw-beruf .bf-verlauf .bf-fall.bf-fall-aufruf { box-shadow: 0 0 0 1px rgba(255, 255, 255, .28), 0 30px 60px -30px rgba(60, 0, 12, .6); } /* Link unter den Karten als weißer Knopf: lesbar, egal wie weit sich das Blau schon aufgelöst hat */ .bw-beruf .bf-inhalt .bf-verlauf .bf-mehr a { display: inline-flex; padding: .6rem 1.1rem; border-radius: 100px; background: #FFFFFF; color: #CE0023; font-weight: 600; font-size: .92rem; text-decoration: none; box-shadow: 0 0 0 1px rgba(206, 0, 35, .18), 0 10px 24px -14px rgba(60, 0, 12, .45); } .bw-beruf .bf-inhalt .bf-verlauf .bf-mehr a:hover { background: #CE0023; color: #FFFFFF; } .bw-beruf .bf-grau { --bf-band: #F3F4F9; } .bw-beruf .bf-dunkel { --bf-band: #0B0F1A; } .bw-beruf .bf-blau h2, .bw-beruf .bf-dunkel h2 { color: #FFFFFF; } .bw-beruf .bf-blau > p, .bw-beruf .bf-dunkel p { color: rgba(255, 255, 255, .78); } .bw-beruf .bf-blau .bw-eyebrow, .bw-beruf .bf-dunkel .bw-eyebrow { color: #FFFFFF; } .bw-beruf .bf-blau .bw-eyebrow::before, .bw-beruf .bf-dunkel .bw-eyebrow::before { background: #FF8A9C; box-shadow: 0 0 0 4px rgba(255, 138, 156, .22); } .bw-beruf .bf-blau .bw-cta, .bw-beruf .bf-dunkel .bw-cta { background: #FFFFFF; color: #111214; } .bw-beruf .bf-blau .bw-cta:hover, .bw-beruf .bf-dunkel .bw-cta:hover { background: #CE0023; color: #FFFFFF; } .bw-beruf .bf-dunkel .bf-bewertung { color: rgba(255, 255, 255, .72); } .bw-beruf .bf-dunkel .bf-bewertung b { color: #FFFFFF; } .bw-beruf .bf-dunkel .bf-sterne { color: rgba(255, 255, 255, .22); } /* Große Zahlen (wie „+40 / 30 / 3ד auf der Startseite), zählen hoch */ .bw-beruf .bf-kennzahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); margin: clamp(26px, 4vh, 40px) 0 clamp(30px, 4.5vh, 44px); } .bw-beruf .bf-kennzahl { padding-top: 1.1rem; border-top: 1px solid rgba(17, 18, 20, .12); } .bw-beruf .bf-kennzahl strong { display: block; font-size: clamp(2.8rem, 5.4vw, 4.4rem); font-weight: 700; letter-spacing: -.045em; line-height: 1; color: #111214; font-variant-numeric: tabular-nums; } .bw-beruf .bf-kennzahl strong em { font-style: normal; font-size: .5em; letter-spacing: -.02em; color: #CE0023; } .bw-beruf .bf-inhalt .bf-kennzahl p { margin: .8rem 0 0; font-size: .95rem; line-height: 1.5; } /* Text links, Haken-Liste rechts */ .bw-beruf .bf-zweispaltig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; } .bw-beruf .bf-inhalt .bf-zweispaltig > p { font-size: clamp(1.08rem, 1.4vw, 1.25rem); line-height: 1.5; font-weight: 500; letter-spacing: -.01em; color: #111214; } .bw-beruf .bf-zweispaltig .bf-haken { margin-top: 0; } /* Haken-Liste. Mit JavaScript: blass, bis der Punkt beim Scrollen ins Bild kommt. */ .bw-beruf .bf-haken, .bw-beruf .bf-fall ul { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .65rem; max-width: 66ch; } .bw-beruf .bf-haken li, .bw-beruf .bf-fall li { position: relative; margin: 0; padding-left: 1.9rem; color: #5A5E68; } .bw-beruf .bf-haken li::before, .bw-beruf .bf-fall li::before { content: ""; position: absolute; left: 0; top: .2em; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: rgba(206, 0, 35, .10) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CE0023' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; transition: background-color .45s ease; } .bw-beruf .bf-haken { gap: .9rem; } .bw-beruf .bf-haken li { padding-left: 2.3rem; font-size: 1rem; } .bw-beruf .bf-haken li::before { top: .05em; width: 1.5rem; height: 1.5rem; background-size: 14px; } .bw-beruf.bf-js .bf-haken li { opacity: .35; transform: translateX(-8px); transition: opacity .55s ease, transform .55s cubic-bezier(.16, 1, .3, 1); } .bw-beruf.bf-js .bf-haken li::before { background-color: rgba(17, 18, 20, .08); } .bw-beruf.bf-js .bf-haken li.ist-aktiv { opacity: 1; transform: none; } .bw-beruf.bf-js .bf-haken li.ist-aktiv::before { background: #CE0023 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; } /* Nummerierte Karten; im blauen Band weiß, damit sie gut lesbar sind */ .bw-beruf .bf-schritte { list-style: none; counter-reset: bf-schritt; margin: clamp(24px, 4vh, 40px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .bw-beruf .bf-schritte > li { counter-increment: bf-schritt; margin: 0; padding: 1.4rem 1.3rem 1.5rem; border-radius: 20px; background: #FFFFFF; border: 1px solid rgba(17, 18, 20, .08); } .bw-beruf .bf-schritte > li::before { content: counter(bf-schritt, decimal-leading-zero); display: block; margin-bottom: 1.1rem; font-weight: 700; font-size: 1.9rem; letter-spacing: -.03em; line-height: 1; color: #CE0023; } .bw-beruf .bf-inhalt .bf-schritte h3 { color: #111214; } .bw-beruf .bf-inhalt .bf-schritte p, .bw-beruf .bf-kachel p { margin: 0; font-size: .95rem; line-height: 1.55; color: #5A5E68; } .bw-beruf .bf-blau .bf-schritte > li { border-color: transparent; box-shadow: 0 30px 60px -36px rgba(60, 0, 12, .7); } /* Liste wie „Wen wir einstellen“ auf der Startseite, hell statt blau: große Zeilen, beim Darüberfahren rückt die Zeile ein und das Bild erscheint. */ .bw-beruf .bf-stellen { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; } .bw-beruf .bf-stellen-kopf { position: sticky; top: clamp(96px, 16vh, 150px); } /* wie #pos-head auf der Startseite */ .bw-beruf .bf-inhalt .bf-stellen-zitat { margin: 1.4rem 0 0; padding: .1rem 0 .1rem 1rem; border-left: 2px solid #CE0023; font-size: .95rem; font-weight: 600; color: #111214; } .bw-beruf .bf-stellen-kopf .bw-cta { margin-top: 1.6rem; } .bw-beruf .bf-stellen-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(17, 18, 20, .1); } .bw-beruf .bf-stelle { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(16px, 2vw, 32px); margin: 0; padding: clamp(20px, 2.4vw, 30px) 0; border-bottom: 1px solid rgba(17, 18, 20, .1); transition: padding-left .4s cubic-bezier(.16, 1, .3, 1); } .bw-beruf .bf-stelle:hover { padding-left: 14px; } .bw-beruf .bf-stelle-nr { font-weight: 700; font-size: .86rem; letter-spacing: .06em; color: rgba(17, 18, 20, .35); font-variant-numeric: tabular-nums; transition: color .3s; } .bw-beruf .bf-stelle:hover .bf-stelle-nr { color: #CE0023; } .bw-beruf .bf-inhalt .bf-stelle-name { margin: 0; font-weight: 700; letter-spacing: -.025em; font-size: clamp(1.35rem, 2.3vw, 2rem); line-height: 1.08; color: #111214; transition: color .3s; } .bw-beruf .bf-stelle:hover .bf-stelle-name { color: #CE0023; } .bw-beruf .bf-stelle-sub { display: block; margin-top: .4rem; font-size: clamp(.9rem, 1vw, 1rem); font-weight: 500; line-height: 1.4; color: #5A5E68; } .bw-beruf .bf-stelle-bild { width: clamp(90px, 10vw, 140px); aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: rgba(17, 18, 20, .06); opacity: 0; transform: translateX(24px) scale(.94); transition: opacity .45s cubic-bezier(.16, 1, .3, 1), transform .55s cubic-bezier(.16, 1, .3, 1); box-shadow: 0 26px 50px -24px rgba(11, 15, 26, .45); } .bw-beruf .bf-stelle-bild img { display: block; width: 100%; height: 100%; object-fit: cover; } .bw-beruf .bf-stelle:hover .bf-stelle-bild { opacity: 1; transform: none; } @media (hover: none) { .bw-beruf .bf-stelle-bild { opacity: 1; transform: none; } } /* Am Computer nutzt der Abschnitt mehr Breite als der Text (bis 1320 px), damit jeder Titel in einer Zeile steht. */ @media (min-width: 981px) { .bw-beruf .bf-stellen { width: min(1320px, calc(100vw - 64px)); margin-left: calc((100% - min(1320px, calc(100vw - 64px))) / 2); grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); } .bw-beruf .bf-inhalt .bf-stelle-name { white-space: nowrap; font-size: clamp(1.25rem, 1.9vw, 2rem); } } /* Leiste mit Termin-Knopf zwischen den Abschnitten */ .bw-beruf .bf-aufruf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; margin-top: clamp(30px, 5vh, 48px); padding: 1.35rem 1.4rem 1.35rem 1.65rem; border-radius: 22px; background: rgba(206, 0, 35, .06); border: 1px solid rgba(206, 0, 35, .12); } .bw-beruf .bf-aufruf strong { display: block; font-size: 1.15rem; font-weight: 700; letter-spacing: -.015em; color: #111214; } .bw-beruf .bf-inhalt .bf-aufruf p { margin: .3rem 0 0; max-width: 62ch; font-size: .95rem; } .bw-beruf .bf-aufruf .bw-cta { flex: none; margin-top: 0; } .bw-beruf .bf-blau .bf-aufruf { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); } .bw-beruf .bf-blau .bf-aufruf strong { color: #FFFFFF; } .bw-beruf .bf-blau .bf-aufruf p { color: rgba(255, 255, 255, .8); } /* Fallstudien als Foto-Karten, bei ungerader Zahl schließt eine blaue Aufruf-Karte die Lücke */ .bw-beruf .bf-faelle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(24px, 4vh, 40px); } .bw-beruf .bf-fall { display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: #FFFFFF; border: 1px solid rgba(17, 18, 20, .06); } .bw-beruf .bf-fall-bild { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 35%; background: #E9ECF5; } .bw-beruf .bf-fall-text { padding: 1.35rem 1.45rem 1.55rem; } .bw-beruf .bf-inhalt .bf-fall-firma { margin: 0 0 .5rem; font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #CE0023; } .bw-beruf .bf-fall h3 { font-size: clamp(1.12rem, 1.5vw, 1.3rem); } .bw-beruf .bf-fall ul { margin-top: .9rem; gap: .5rem; } .bw-beruf .bf-fall li { font-size: .93rem; line-height: 1.5; } .bw-beruf .bf-fall.bf-fall-aufruf { justify-content: center; background: linear-gradient(155deg, #CE0023 0%, #A0031E 100%); border-color: transparent; } .bw-beruf .bf-fall-aufruf .bf-fall-text { padding: clamp(1.7rem, 3.2vw, 2.6rem); } .bw-beruf .bf-inhalt .bf-fall-aufruf .bf-fall-firma { color: #FFB3BF; } .bw-beruf .bf-inhalt .bf-fall-aufruf h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.12; color: #FFFFFF; } .bw-beruf .bf-inhalt .bf-fall-aufruf p { color: rgba(255, 255, 255, .82); } .bw-beruf .bf-fall-aufruf .bw-cta { margin-top: 1.1rem; background: #FFFFFF; color: #111214; } .bw-beruf .bf-fall-aufruf .bw-cta:hover { background: #0B0F1A; color: #FFFFFF; } .bw-beruf .bf-inhalt .bf-mehr { margin-top: 1.4rem; } .bw-beruf .bf-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(22px, 3.5vh, 36px); } .bw-beruf .bf-zahl { display: flex; flex-direction: column; gap: .3rem; padding: 1.3rem 1.3rem 1.4rem; border-radius: 18px; background: #111214; } .bw-beruf .bf-zahl strong { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; color: #FFFFFF; } .bw-beruf .bf-zahl span { font-weight: 600; color: #FFFFFF; } .bw-beruf .bf-zahl small { font-size: .85rem; line-height: 1.4; color: rgba(255, 255, 255, .7); } /* Lohn als zwei große Karten */ .bw-beruf .bf-lohn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 820px; margin: clamp(22px, 3.5vh, 32px) 0; } .bw-beruf .bf-lohn-karte { padding: 1.5rem 1.55rem 1.45rem; border-radius: 22px; background: #F3F4F9; } .bw-beruf .bf-inhalt .bf-lohn-karte strong { display: block; font-size: clamp(2.3rem, 4.4vw, 3.2rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; color: #111214; } .bw-beruf .bf-lohn-karte strong small { margin-left: .4em; font-size: .3em; font-weight: 600; letter-spacing: 0; opacity: .7; } .bw-beruf .bf-inhalt .bf-lohn-karte p { margin: .9rem 0 0; font-weight: 600; color: #111214; } .bw-beruf .bf-lohn-karte span { display: block; margin-top: .3rem; font-size: .85rem; color: #5A5E68; } .bw-beruf .bf-lohn-karte.bf-hervor { background: linear-gradient(155deg, #CE0023 0%, #A0031E 100%); } .bw-beruf .bf-inhalt .bf-lohn-karte.bf-hervor strong, .bw-beruf .bf-inhalt .bf-lohn-karte.bf-hervor p { color: #FFFFFF; } .bw-beruf .bf-lohn-karte.bf-hervor span { color: rgba(255, 255, 255, .78); } /* Kundenstimmen: links Überschrift und Knopf, rechts zwei Spalten, die sich langsam gegeneinander nach oben und unten bewegen (beim Darüberfahren Pause). */ .bw-beruf .bf-stimmen-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; } .bw-beruf .bf-inhalt .bf-stimmen-kopf h2 { max-width: none; font-size: clamp(1.6rem, 2.6vw, 2.25rem); } .bw-beruf .bf-stimmen-kopf .bw-cta { margin-top: 1.7rem; } .bw-beruf .bf-stimmen-wand { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; height: 620px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%); } .bw-beruf .bf-stimmen-band { display: flex; flex-direction: column; gap: 16px; animation: bf-stimmen-hoch 46s linear infinite; } .bw-beruf .bf-rueckwaerts .bf-stimmen-band { animation-name: bf-stimmen-runter; animation-duration: 40s; } .bw-beruf .bf-stimmen-wand:hover .bf-stimmen-band { animation-play-state: paused; } @keyframes bf-stimmen-hoch { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 8px)); } } @keyframes bf-stimmen-runter { from { transform: translateY(calc(-50% - 8px)); } to { transform: translateY(0); } } .bw-beruf .bf-stimme { display: flex; flex-direction: column; gap: 1.1rem; margin: 0; padding: 1.5rem; border-radius: 22px; background: #FFFFFF; border: 1px solid rgba(17, 18, 20, .08); } .bw-beruf .bf-stimme-sterne { font-size: 14px; letter-spacing: 2px; line-height: 1; color: #F5B301; } .bw-beruf .bf-stimme blockquote { margin: 0; padding: 0; border: 0; font-style: normal; font-size: 1rem; line-height: 1.55; color: #111214; } .bw-beruf .bf-stimme figcaption { display: flex; align-items: center; gap: .8rem; font-size: .85rem; line-height: 1.35; color: #5A5E68; } .bw-beruf .bf-stimme figcaption img, .bw-beruf .bf-stimme-ini { flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; } .bw-beruf .bf-stimme-ini { display: grid; place-items: center; background: rgba(206, 0, 35, .10); color: #CE0023; font-weight: 700; } .bw-beruf .bf-stimme figcaption strong { display: block; font-size: .95rem; font-weight: 700; color: #111214; } .bw-beruf .bf-tabelle { margin: 1.2rem 0 1.4rem; max-width: 820px; overflow-x: auto; } .bw-beruf .bf-tabelle table { width: 100%; border-collapse: collapse; font-size: .95rem; } .bw-beruf .bf-tabelle th, .bw-beruf .bf-tabelle td { padding: .75rem .8rem; border-bottom: 1px solid rgba(17, 18, 20, .1); text-align: left; vertical-align: top; color: #5A5E68; } .bw-beruf .bf-tabelle th { font-weight: 600; color: #111214; } .bw-beruf .bf-tabelle th + th, .bw-beruf .bf-tabelle td + td { white-space: nowrap; } .bw-beruf .bf-tabelle td:last-child { font-weight: 600; color: #111214; } .bw-beruf .bf-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(22px, 3.5vh, 36px); } .bw-beruf .bf-kachel { padding: 1.2rem 1.25rem 1.3rem; border-radius: 18px; background: rgba(206, 0, 35, .045); border: 1px solid rgba(206, 0, 35, .10); } .bw-beruf .bf-frage { max-width: 840px; border-bottom: 1px solid rgba(17, 18, 20, .1); } .bw-beruf .bf-frage:first-of-type { margin-top: clamp(18px, 3vh, 28px); border-top: 1px solid rgba(17, 18, 20, .1); } .bw-beruf .bf-frage summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 0; list-style: none; cursor: pointer; font-weight: 600; font-size: 1.02rem; line-height: 1.4; color: #111214; } .bw-beruf .bf-frage summary::-webkit-details-marker { display: none; } .bw-beruf .bf-frage summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(206, 0, 35, .08); color: #CE0023; font-size: 1.25rem; font-weight: 500; line-height: 1; transition: transform .3s cubic-bezier(.16, 1, .3, 1); } .bw-beruf .bf-frage[open] summary::after { transform: rotate(45deg); } .bw-beruf .bf-frage summary:hover { color: #CE0023; } .bw-beruf .bf-frage summary:focus-visible { outline: 2px solid #CE0023; outline-offset: 4px; border-radius: 6px; } .bw-beruf .bf-frage p { margin: 0; padding-bottom: 1.15rem; } /* Abschluss: blaue Karte mit Foto der Gründer, Haken, Knopf und Bewertung */ .bw-beruf .bf-schluss { padding-bottom: clamp(56px, 9vh, 104px); } .bw-beruf .bf-schluss-karte { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); overflow: hidden; border-radius: 28px; background: linear-gradient(155deg, #CE0023 0%, #A0031E 100%); box-shadow: 0 40px 80px -40px rgba(160, 3, 30, .6); } .bw-beruf .bf-schluss-bild { margin: 0; min-height: 100%; } .bw-beruf .bf-schluss-bild img { display: block; width: 100%; height: 100%; min-height: 320px; object-fit: cover; object-position: 50% 30%; } .bw-beruf .bf-schluss-text { padding: clamp(32px, 5vw, 64px); } .bw-beruf .bf-schluss .bw-eyebrow { color: #FFFFFF; } .bw-beruf .bf-schluss .bw-eyebrow::before { background: #FFFFFF; box-shadow: 0 0 0 4px rgba(255, 255, 255, .22); } .bw-beruf .bf-inhalt .bf-schluss h2 { max-width: 18ch; color: #FFFFFF; } .bw-beruf .bf-inhalt .bf-schluss p { color: rgba(255, 255, 255, .82); } .bw-beruf .bf-schluss .bf-haken li { color: #FFFFFF; } .bw-beruf .bf-schluss .bf-haken li::before, .bw-beruf.bf-js .bf-schluss .bf-haken li.ist-aktiv::before { background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CE0023' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; } .bw-beruf.bf-js .bf-schluss .bf-haken li:not(.ist-aktiv)::before { background-color: rgba(255, 255, 255, .25); background-image: none; } .bw-beruf .bf-schluss .bw-cta { margin-top: 1.7rem; background: #FFFFFF; color: #111214; } .bw-beruf .bf-schluss .bw-cta:hover { background: #0B0F1A; color: #FFFFFF; } .bw-beruf .bf-schluss .bf-vertrauen { margin-top: 1.4rem; } .bw-beruf .bf-schluss .bf-fotos img { border-color: #CE0023; } .bw-beruf .bf-schluss .bf-bewertung { color: rgba(255, 255, 255, .78); } .bw-beruf .bf-schluss .bf-bewertung b { color: #FFFFFF; } .bw-beruf .bf-schluss .bf-sterne { color: rgba(255, 255, 255, .28); } @media (max-width: 980px) { .bw-beruf .bf-einstieg { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "rest" "garantie"; align-items: start; } .bw-beruf .bf-einstieg.mit-bild { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "bild" "rest"; row-gap: 30px; } .bw-beruf .bf-einstieg > .bf-garantie { max-width: 420px; margin-top: 26px; } .bw-beruf .bf-titelbild { max-width: 560px; } .bw-beruf .bf-titelbild > img { aspect-ratio: 1 / 1; object-position: var(--bf-bild-pos, 50% 62%); border-radius: 24px; } .bw-beruf .bf-titelbild-zahl { top: -14px; left: 12px; padding: .7rem .9rem .75rem; } .bw-beruf .bf-titelbild-zahl.bf-zahl-rechts { left: auto; right: 12px; } .bw-beruf .bf-titelbild-zahl strong { font-size: 1.25rem; } .bw-beruf .bf-titelbild .bf-garantie { margin: -26px 14px 0; } .bw-beruf .bf-schritte, .bw-beruf .bf-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bw-beruf .bf-zweispaltig { grid-template-columns: minmax(0, 1fr); gap: 6px; } .bw-beruf .bf-stellen { grid-template-columns: minmax(0, 1fr); gap: 26px; } .bw-beruf .bf-stellen-kopf { position: static; } .bw-beruf .bf-stimmen-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; } .bw-beruf .bf-stimmen-wand { display: flex; gap: 12px; height: auto; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; padding-bottom: 8px; } .bw-beruf .bf-stimmen-spalte, .bw-beruf .bf-stimmen-band { display: contents; } .bw-beruf .bf-stimmen-band { animation: none; } .bw-beruf .bf-doppel { display: none; } .bw-beruf .bf-stimme { flex: 0 0 min(82%, 360px); scroll-snap-align: start; } .bw-beruf .bf-schluss-karte { grid-template-columns: minmax(0, 1fr); } .bw-beruf .bf-schluss-bild img { aspect-ratio: 16 / 10; min-height: 0; height: auto; object-position: 50% 30%; } } @media (max-width: 640px) { .bw-beruf .bf-schritte, .bw-beruf .bf-kacheln, .bw-beruf .bf-faelle, .bw-beruf .bf-zahlen, .bw-beruf .bf-kennzahlen, .bw-beruf .bf-lohn { grid-template-columns: minmax(0, 1fr); } .bw-beruf .bf-knoepfe .bw-cta, .bw-beruf .bf-aufruf .bw-cta { width: 100%; justify-content: center; } .bw-beruf .bf-vertrauen { flex-wrap: nowrap; } .bw-beruf .bf-bewertung { flex-direction: column; align-items: flex-start; gap: 3px; } .bw-beruf .bf-betriebe::before { content: none; } .bw-beruf .bf-kennzahlen { gap: 4px; } .bw-beruf .bf-kennzahl { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); align-items: baseline; column-gap: .9rem; padding: .9rem 0; } .bw-beruf .bf-kennzahl strong { font-size: 2.6rem; } .bw-beruf .bf-inhalt .bf-kennzahl p { margin: 0; } .bw-beruf .bf-stelle { grid-template-columns: auto minmax(0, 1fr) 72px; gap: 12px; padding: 16px 0; } .bw-beruf .bf-stelle:hover { padding-left: 0; } .bw-beruf .bf-stelle-bild { width: 72px; border-radius: 10px; } .bw-beruf .bf-inhalt .bf-stelle-name { font-size: 1.2rem; } .bw-beruf .bf-aufruf { padding: 1.2rem; } } @media (prefers-reduced-motion: reduce) { .bw-beruf .bw-eyebrow::before, .bw-beruf .bf-pille::before { animation: none; } .bw-beruf .bf-stimmen-band { animation: none; } .bw-beruf .bf-stimmen-wand { height: auto; -webkit-mask-image: none; mask-image: none; } .bw-beruf .bf-doppel { display: none; } } /* Weitere Fallstudien für andere Stellen (Platzhalter [[weitere]]): kompakte Karten, grauer Streifen. */ .bw-beruf .bf-weitere-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: clamp(22px, 3.5vh, 32px); } .bw-beruf .bf-weiter-karte { display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: #FFFFFF; border: 1px solid rgba(17, 18, 20, .06); } .bw-beruf .bf-weiter-karte img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 35%; background: #E9ECF5; } .bw-beruf .bf-weiter-karte > div { padding: .95rem 1.05rem 1.15rem; } .bw-beruf .bf-weiter-stelle { display: inline-block; margin-bottom: .55rem; padding: .22rem .6rem; border-radius: 100px; background: rgba(206, 0, 35, .08); color: #CE0023; font-size: .72rem; font-weight: 600; } .bw-beruf .bf-inhalt .bf-weiter-karte .bf-fall-firma { margin: 0 0 .35rem; font-size: .68rem; } .bw-beruf .bf-inhalt .bf-weiter-karte h3 { margin: 0; font-size: 1rem; line-height: 1.3; letter-spacing: -.01em; } @media (max-width: 640px) { .bw-beruf .bf-weitere-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .bw-beruf .bf-weiter-karte > div { padding: .7rem .75rem .85rem; } .bw-beruf .bf-inhalt .bf-weiter-karte h3 { font-size: .86rem; } .bw-beruf .bf-weiter-stelle { font-size: .64rem; } } /* Kleine Handys: Zahl-Chip am Titelfoto schmaler, damit er nicht an Köpfe stößt (Regel: nie etwas über Gesichter legen). */ @media (max-width: 420px) { .bw-beruf .bf-titelbild-zahl { padding: .55rem .7rem .6rem; } .bw-beruf .bf-titelbild-zahl strong { font-size: 1.1rem; } .bw-beruf .bf-titelbild-zahl span { max-width: 12ch; font-size: .7rem; } } /* Sehr kleine Handys (bis 340 px): Zahl-Kasten noch kompakter und höher, damit er keinen Kopf streift. */ @media (max-width: 340px) { .bw-beruf .bf-titelbild-zahl { top: -20px; padding: .45rem .6rem .5rem; border-radius: 13px; } .bw-beruf .bf-titelbild-zahl strong { font-size: 1rem; } .bw-beruf .bf-titelbild-zahl span { margin-top: .2rem; font-size: .66rem; } } /* Fußzeile auf allen Seiten (Startseite und Unterseiten): Spalte „Personal finden“ mit allen Berufsseiten, wie bei Candidate Flow die Branchen. Fünf Spalten statt vier. */ html body #foot-grid[data-berufe="ja"] { grid-template-columns: 1.45fr 1.15fr 1fr 1fr 1fr; } @media (max-width: 900px) { html body #foot-grid[data-berufe="ja"] { grid-template-columns: 1fr 1fr; } html body #foot-grid[data-berufe="ja"] > #foot-brand { grid-column: 1 / -1; } } /* Sammelseite „Personal finden“ (Platzhalter [[stellen]]): eine Karte je Berufsseite. Foto ohne Einblendungen, Ergebnis darunter; letzte Karte blau als Gesprächs-Aufruf. */ .bw-beruf .bf-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin-top: clamp(26px, 4vh, 40px); } .bw-beruf .bf-inhalt a.bf-karte, .bw-beruf .bf-karte { display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; background: #FFFFFF; color: inherit; text-decoration: none; box-shadow: 0 1px 0 rgba(17, 18, 20, .04), 0 18px 40px -28px rgba(11, 15, 26, .35); transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s cubic-bezier(.2, .7, .2, 1); } .bw-beruf .bf-inhalt a.bf-karte:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(160, 3, 30, .45); text-decoration: none; } .bw-beruf .bf-inhalt a.bf-karte:focus-visible { outline: 3px solid #CE0023; outline-offset: 3px; } .bw-beruf .bf-karte-bild { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #E8EAF2; } .bw-beruf .bf-karte-bild img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); } .bw-beruf .bf-karte:hover .bf-karte-bild img { transform: scale(1.05); } .bw-beruf .bf-karte-text { display: flex; flex: 1; flex-direction: column; gap: .55rem; padding: 1.3rem 1.4rem 1.45rem; } .bw-beruf .bf-karte-faelle { align-self: flex-start; padding: .32rem .7rem; border-radius: 999px; background: #FDECEF; color: #CE0023; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .bw-beruf .bf-karte .bf-karte-name { margin: .1rem 0 0; font-size: clamp(1.25rem, 1.6vw, 1.45rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; color: #111214; } .bw-beruf .bf-karte-ergebnis { font-size: .95rem; line-height: 1.45; color: #5A5E68; } .bw-beruf .bf-karte-ergebnis strong { font-weight: 700; color: #CE0023; } .bw-beruf .bf-karte-mehr { display: inline-flex; align-items: center; gap: .45rem; margin-top: auto; padding-top: .7rem; font-weight: 600; color: #111214; } .bw-beruf .bf-karte-mehr .bw-arrow { transition: transform .3s; } .bw-beruf .bf-karte:hover .bf-karte-mehr .bw-arrow { transform: translateX(4px); } .bw-beruf .bf-karte-frage { background: #A0031E; } .bw-beruf .bf-karte-frage .bf-karte-text { justify-content: flex-end; padding: 1.8rem 1.6rem; } .bw-beruf .bf-karte-frage .bf-karte-faelle { background: rgba(255, 255, 255, .16); color: #FFFFFF; } .bw-beruf .bf-karte.bf-karte-frage .bf-karte-name { font-size: clamp(1.5rem, 2.2vw, 2rem); color: #FFFFFF; } .bw-beruf .bf-karte-frage .bf-karte-ergebnis { color: rgba(255, 255, 255, .86); } .bw-beruf .bf-inhalt .bf-karte-frage a.bw-cta { align-self: flex-start; margin-top: .9rem; background: #FFFFFF; color: #111214; } .bw-beruf .bf-inhalt .bf-karte-frage a.bw-cta:hover { background: #CE0023; color: #FFFFFF; } @media (max-width: 1024px) { .bw-beruf .bf-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .bw-beruf .bf-karten { grid-template-columns: 1fr; } .bw-beruf .bf-karte-frage .bf-karte-text { min-height: 0; } } /* Sammelseite: Foto-Mosaik im Einstieg statt eines Titelfotos (Einstellung `mosaik`). */ .bw-beruf .bf-mosaik-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .bw-beruf .bf-mosaik-raster img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 22px; } .bw-beruf .bf-mosaik-raster img:nth-child(2) { transform: translateY(26px); } .bw-beruf .bf-mosaik-raster img:nth-child(4) { transform: translateY(26px); } .bw-beruf .bf-mosaik .bf-garantie { margin-top: -2px; } @media (max-width: 767px) { .bw-beruf .bf-mosaik-raster { gap: 8px; } .bw-beruf .bf-mosaik-raster img { aspect-ratio: 1 / 1; border-radius: 16px; } .bw-beruf .bf-mosaik-raster img:nth-child(2), .bw-beruf .bf-mosaik-raster img:nth-child(4) { transform: none; } } /* ---- Nur anfragen-werk.de, Fallstudien-Seite (seit 10/2026) ---- Die Karten zeigen dort zusätzlich die Ausgangslage aus der Fallstudie (Feld „situation“). Gleiche Schrift wie die Stichpunkte darunter, damit Karte und Liste ruhig wirken. */ .bw-beruf .bf-inhalt .bf-fall-lage { margin: .65rem 0 0; font-size: .93rem; line-height: 1.5; }