/* =========================================================
SPH DESIGN SYSTEM
FOUNDATION + TYPOGRAPHY + BUTTONS
TYPOGRAPHY STATUS:
- Eyebrow: bestehender Stil
- Copy / Copy Large: bestehender Stil
- Headlines: Testwerte zur visuellen Kalibrierung
========================================================= */
/* =========================================================
01 VARIABLES
========================================================= */
:root {
/* -----------------------------------------------------
COLORS
----------------------------------------------------- */
--sph-black: #000000;
--sph-white: #ffffff;
--sph-orange: #fe6901;
--sph-turquoise: #00cfb4;
--sph-blue: #183858;
--sph-blue-light: #1e4e73;
--sph-blue-dark: #0e2f4a;
--sph-beige: #f6f1eb;
--sph-grey-light: #f0f0f0;
/* -----------------------------------------------------
CONTAINER
----------------------------------------------------- */
--sph-container-max: 1600px;
/* -----------------------------------------------------
HORIZONTAL GUTTER
----------------------------------------------------- */
--sph-gutter-desktop: 64px;
--sph-gutter-tablet-landscape: 48px;
--sph-gutter-tablet: 32px;
--sph-gutter-mobile-landscape: 24px;
--sph-gutter-mobile: 20px;
/* -----------------------------------------------------
SECTION SPACING
----------------------------------------------------- */
--sph-section-space-desktop: 120px;
--sph-section-space-laptop: 100px;
--sph-section-space-tablet-landscape: 88px;
--sph-section-space-tablet: 80px;
--sph-section-space-mobile-landscape: 64px;
--sph-section-space-mobile: 56px;
/* -----------------------------------------------------
LAYOUT GAP
----------------------------------------------------- */
--sph-layout-gap-desktop: 64px;
--sph-layout-gap-tablet-landscape: 48px;
--sph-layout-gap-tablet: 48px;
--sph-layout-gap-mobile-landscape: 40px;
--sph-layout-gap-mobile: 32px;
/* -----------------------------------------------------
CONTENT RHYTHM
----------------------------------------------------- */
--sph-content-gap: 20px;
--sph-eyebrow-headline-gap: 8px;
}
/* =========================================================
02 GLOBAL CONTAINER
========================================================= */
.sph-container {
width: 100% !important;
max-width: var(--sph-container-max) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: var(--sph-gutter-desktop) !important;
padding-right: var(--sph-gutter-desktop) !important;
box-sizing: border-box !important;
}
/* =========================================================
03 SECTION SPACING
========================================================= */
.sph-section {
padding-top: var(--sph-section-space-desktop) !important;
padding-bottom: var(--sph-section-space-desktop) !important;
}
/* =========================================================
04 CONTENT STACK
========================================================= */
.sph-content-stack {
gap: var(--sph-content-gap) !important;
}
/* =========================================================
05 EYEBROW
Immer:
- Overpass
- Uppercase
- Türkis
========================================================= */
.sph-eyebrow :is(h1, h2, h3, h4, h5, h6, p) {
font-family: "Overpass", sans-serif !important;
font-size: clamp(
0.875rem,
0.15vw + 0.84rem,
1rem
) !important;
line-height: 1.3 !important;
font-weight: 600 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: var(--sph-turquoise) !important;
margin: 0 !important;
}
/*
Content-Stack hat 20px Gap.
Eyebrow -> Headline soll effektiv 8px betragen.
20px - 12px = 8px
*/
.sph-content-stack > .sph-eyebrow {
margin-bottom: calc(
var(--sph-eyebrow-headline-gap)
- var(--sph-content-gap)
) !important;
}
/* =========================================================
06 PAGE TITLE
Unterseiten-H1
Beispiel:
KARRIERE
Good Times
Türkis
schwarze Fläche
========================================================= */
.sph-page-title h1 {
display: inline-block;
width: fit-content;
font-family: Good-Times !important;
font-size: clamp(
1.875rem,
2vw,
3.125rem
) !important;
line-height: 1 !important;
font-weight: 600 !important;
text-transform: uppercase;
color: var(--sph-turquoise) !important;
background-color: var(--sph-black);
padding: 0.28em 0.42em 0.22em;
margin: 0 !important;
hyphens: none;
-webkit-hyphens: none;
word-break: normal;
overflow-wrap: normal;
}
/* ---------------------------------------------------------
PAGE TITLE → HEADLINE SPACING
--------------------------------------------------------- */
.sph-page-hero__content > .sph-page-title {
margin-bottom: 25px !important;
}
/* =========================================================
07 HOMEPAGE H1
Good Times
Bewusst kleiner begrenzt als bisher.
Farbe wird separat gesetzt.
========================================================= */
.sph-home-title h1 {
font-family: Good-Times !important;
font-size: clamp(
2.125rem,
2vw,
3.25rem
) !important;
line-height: 1.08 !important;
font-weight: 600 !important;
margin: 0 !important;
hyphens: none;
-webkit-hyphens: none;
word-break: normal;
overflow-wrap: normal;
}
/* =========================================================
08 HEADING BASE
sph-heading-* ist standardmäßig Overpass.
Good Times wird bei Bedarf mit
sph-font-goodtimes ergänzt.
========================================================= */
:is(
.sph-heading-1,
.sph-heading-2,
.sph-heading-3,
.sph-heading-4,
.sph-heading-5,
.sph-heading-6
) :is(h1, h2, h3, h4, h5, h6) {
font-family: "Overpass", sans-serif !important;
margin: 0 !important;
hyphens: none;
-webkit-hyphens: none;
word-break: normal;
overflow-wrap: normal;
}
/* =========================================================
09 H1
Overpass
========================================================= */
.sph-heading-1 h1 {
font-size: clamp(
2.125rem,
2vw,
3.25rem
) !important;
line-height: 1.1 !important;
font-weight: 800 !important;
}
/* =========================================================
10 H2
========================================================= */
.sph-heading-2 h2 {
font-size: clamp(
2rem,
1.8vw,
3rem
) !important;
line-height: 1.12 !important;
font-weight: 800 !important;
}
/* =========================================================
11 H3
========================================================= */
.sph-heading-3 h3 {
font-size: clamp(
1.625rem,
1.35vw,
2.25rem
) !important;
line-height: 1.2 !important;
font-weight: 500 !important;
}
/* =========================================================
12 H4
Overpass only
========================================================= */
.sph-heading-4 h4 {
font-size: clamp(
1.375rem,
1vw,
1.75rem
) !important;
line-height: 1.25 !important;
font-weight: 600 !important;
}
/* =========================================================
13 H5
Overpass only
========================================================= */
.sph-heading-5 h5 {
font-size: clamp(
1.125rem,
0.75vw,
1.375rem
) !important;
line-height: 1.3 !important;
font-weight: 600 !important;
}
/* =========================================================
14 H6
Overpass only
========================================================= */
.sph-heading-6 h6 {
font-size: clamp(
1rem,
0.55vw,
1.125rem
) !important;
line-height: 1.35 !important;
font-weight: 600 !important;
}
/* =========================================================
15 GOOD TIMES MODIFIER
Vorgesehen für H2 und H3.
H1-Sonderfälle haben eigene Klassen.
========================================================= */
.sph-font-goodtimes :is(h1, h2, h3) {
font-family: Good-Times !important;
font-weight: 600 !important;
line-height: 1.05 !important;
}
/* =========================================================
16 UPPERCASE MODIFIER
========================================================= */
.sph-uppercase :is(h1, h2, h3, h4, h5, h6) {
text-transform: uppercase !important;
}
/* =========================================================
17 COPY LARGE
========================================================= */
.sph-copy-lg p {
font-family: "Overpass", sans-serif !important;
font-size: clamp(
1.1rem,
0.4vw + 0.98rem,
1.375rem
) !important;
line-height: 1.55 !important;
font-weight: 400 !important;
margin: 0 !important;
}
/* =========================================================
18 COPY
========================================================= */
.sph-copy p {
font-family: "Overpass", sans-serif !important;
font-size: clamp(
1rem,
0.2vw + 0.94rem,
1.125rem
) !important;
line-height: 1.6 !important;
font-weight: 400 !important;
margin: 0 !important;
}
/* =========================================================
19 TEXT COLORS
Mit allen normalen Headline- und Textklassen kombinierbar.
Eyebrow bleibt immer Türkis.
========================================================= */
.sph-text-black :is(
h1, h2, h3, h4, h5, h6, p, a, span
) {
color: var(--sph-black) !important;
}
.sph-text-white :is(
h1, h2, h3, h4, h5, h6, p, a, span
) {
color: var(--sph-white) !important;
}
.sph-text-orange :is(
h1, h2, h3, h4, h5, h6, p, a, span
) {
color: var(--sph-orange) !important;
}
.sph-text-turquoise :is(
h1, h2, h3, h4, h5, h6, p, a, span
) {
color: var(--sph-turquoise) !important;
}
.sph-text-blue :is(
h1, h2, h3, h4, h5, h6, p, a, span
) {
color: var(--sph-blue) !important;
}
.sph-text-blue-light :is(
h1, h2, h3, h4, h5, h6, p, a, span
) {
color: var(--sph-blue-light) !important;
}
.sph-text-blue-dark :is(
h1, h2, h3, h4, h5, h6, p, a, span
) {
color: var(--sph-blue-dark) !important;
}
/* =========================================================
20 TWO COLUMN LAYOUT
========================================================= */
.sph-foundation-split {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: var(--sph-layout-gap-desktop) !important;
}
.sph-foundation-split > .e-con {
flex: 1 1 0 !important;
width: auto !important;
max-width: none !important;
min-width: 0;
}
/* =========================================================
21 GLOBAL ELEMENTOR BUTTON
========================================================= */
.elementor-button .elementor-button-content-wrapper {
display: flex;
align-items: center;
gap: 12px;
}
.elementor-button .elementor-button-content-wrapper::after {
content: "";
display: block;
width: 18px;
height: 18px;
flex: 0 0 18px;
background-color: #ffffff;
-webkit-mask-image:
url("https://sph-ag.com/wp-content/uploads/2024/05/fast-forward.svg");
mask-image:
url("https://sph-ag.com/wp-content/uploads/2024/05/fast-forward.svg");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
transform: translateX(0);
transition: transform 0.25s ease !important;
}
.elementor-button:hover
.elementor-button-content-wrapper::after {
transform: translateX(6px);
}
.elementor-button:focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
}
/* =========================================================
22 LAPTOP
<= 1399px
========================================================= */
@media (max-width: 1399px) {
.sph-section {
padding-top:
var(--sph-section-space-laptop) !important;
padding-bottom:
var(--sph-section-space-laptop) !important;
}
}
/* =========================================================
23 TABLET LANDSCAPE
<= 1199px
========================================================= */
@media (max-width: 1199px) {
.sph-container {
max-width: none !important;
padding-left:
var(--sph-gutter-tablet-landscape) !important;
padding-right:
var(--sph-gutter-tablet-landscape) !important;
}
.sph-section {
padding-top:
var(--sph-section-space-tablet-landscape) !important;
padding-bottom:
var(--sph-section-space-tablet-landscape) !important;
}
.sph-foundation-split {
flex-direction: row !important;
gap:
var(--sph-layout-gap-tablet-landscape) !important;
}
}
/* =========================================================
24 TABLET PORTRAIT
<= 991px
========================================================= */
@media (max-width: 991px) {
.sph-container {
padding-left:
var(--sph-gutter-tablet) !important;
padding-right:
var(--sph-gutter-tablet) !important;
}
.sph-section {
padding-top:
var(--sph-section-space-tablet) !important;
padding-bottom:
var(--sph-section-space-tablet) !important;
}
.sph-foundation-split {
flex-direction: column !important;
align-items: stretch !important;
gap:
var(--sph-layout-gap-tablet) !important;
}
.sph-foundation-split > .e-con {
flex: 0 0 auto !important;
width: 100% !important;
max-width: 100% !important;
}
}
/* =========================================================
25 MOBILE LANDSCAPE
<= 767px
========================================================= */
@media (max-width: 767px) {
.sph-container {
padding-left:
var(--sph-gutter-mobile-landscape) !important;
padding-right:
var(--sph-gutter-mobile-landscape) !important;
}
.sph-section {
padding-top:
var(--sph-section-space-mobile-landscape) !important;
padding-bottom:
var(--sph-section-space-mobile-landscape) !important;
}
.sph-foundation-split {
gap:
var(--sph-layout-gap-mobile-landscape) !important;
}
}
/* =========================================================
26 MOBILE PORTRAIT
<= 576px
========================================================= */
@media (max-width: 576px) {
.sph-container {
padding-left:
var(--sph-gutter-mobile) !important;
padding-right:
var(--sph-gutter-mobile) !important;
}
.sph-section {
padding-top:
var(--sph-section-space-mobile) !important;
padding-bottom:
var(--sph-section-space-mobile) !important;
}
.sph-foundation-split {
gap:
var(--sph-layout-gap-mobile) !important;
}
}
/* =========================================================
27 REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.elementor-button
.elementor-button-content-wrapper::after {
transition: none !important;
}
.elementor-button:hover
.elementor-button-content-wrapper::after {
transform: none;
}
}
/* =========================================================
COMPONENT: FORM
Globales SPH-Formulardesign
Klasse am Elementor Form Widget: sph-form
========================================================= */
.sph-form {
width: 100%;
}
/* ---------------------------------------------------------
FORM GRID
--------------------------------------------------------- */
.sph-form
.elementor-form-fields-wrapper {
display: flex;
align-items: flex-start;
margin-left: -10px !important;
margin-right: -10px !important;
row-gap: 26px;
}
/* ---------------------------------------------------------
FIELD GROUP
--------------------------------------------------------- */
.sph-form
.elementor-field-group {
padding-left: 10px !important;
padding-right: 10px !important;
margin: 0 !important;
}
/* ---------------------------------------------------------
LABELS
--------------------------------------------------------- */
.sph-form
.elementor-field-label {
display: block;
margin: 0 0 9px 0 !important;
font-family:
"Overpass",
sans-serif !important;
font-size:
.9375rem !important;
line-height:
1.4 !important;
font-weight:
600 !important;
text-transform:
none !important;
letter-spacing:
normal !important;
color:
var(--sph-blue) !important;
}
/* ---------------------------------------------------------
INPUTS / SELECT / TEXTAREA
--------------------------------------------------------- */
.sph-form
.elementor-field:not(.elementor-select-wrapper),
.sph-form
.elementor-field-textual,
.sph-form
select.elementor-field {
width: 100%;
min-height: 52px;
padding:
13px 16px !important;
font-family:
"Overpass",
sans-serif !important;
font-size:
1rem !important;
line-height:
1.5 !important;
font-weight:
400 !important;
color:
var(--sph-blue) !important;
background-color:
var(--sph-white) !important;
border:
1px solid rgba(24, 56, 88, .28) !important;
border-radius:
0 !important;
box-shadow:
none !important;
transition:
border-color .2s ease,
box-shadow .2s ease;
}
.sph-form
textarea.elementor-field {
min-height: 140px;
resize: vertical;
}
.sph-form
.elementor-field::placeholder {
color:
rgba(24, 56, 88, .48) !important;
opacity: 1;
}
/* ---------------------------------------------------------
FOCUS
--------------------------------------------------------- */
.sph-form
.elementor-field:focus {
outline: none !important;
border-color:
var(--sph-orange) !important;
box-shadow:
0 0 0 1px var(--sph-orange) !important;
}
/* ---------------------------------------------------------
SELECT
--------------------------------------------------------- */
.sph-form
.elementor-select-wrapper {
width: 100%;
}
.sph-form
.elementor-select-wrapper::before {
color:
var(--sph-blue) !important;
}
/* ---------------------------------------------------------
ACCEPTANCE / DATENSCHUTZ
--------------------------------------------------------- */
.sph-form
.elementor-field-type-acceptance {
margin-top: 2px !important;
}
/* ---------------------------------------------------------
SUBGROUP
--------------------------------------------------------- */
.sph-form
.elementor-field-type-acceptance
.elementor-field-subgroup {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* ---------------------------------------------------------
CHECKBOX + TEXT
--------------------------------------------------------- */
.sph-form
.elementor-field-type-acceptance
.elementor-field-option {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
justify-content: flex-start !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
gap: 12px !important;
}
/* ---------------------------------------------------------
CHECKBOX
--------------------------------------------------------- */
.sph-form
.elementor-field-type-acceptance
.elementor-field-option
input[type="checkbox"] {
display: block !important;
position: static !important;
flex:
0 0 20px !important;
align-self:
flex-start !important;
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
margin: 1px 0 0 0 !important;
padding: 0 !important;
vertical-align: top !important;
accent-color:
var(--sph-orange);
}
/* ---------------------------------------------------------
ACCEPTANCE TEXT
--------------------------------------------------------- */
.sph-form
.elementor-field-type-acceptance
.elementor-field-option
label {
display: block !important;
position: static !important;
flex:
1 1 auto !important;
width: auto !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
font-family:
"Overpass",
sans-serif !important;
font-size:
.9375rem !important;
line-height:
1.5 !important;
font-weight:
400 !important;
text-transform:
none !important;
letter-spacing:
normal !important;
color:
var(--sph-blue) !important;
}
/* ---------------------------------------------------------
LINK
--------------------------------------------------------- */
.sph-form
.elementor-field-type-acceptance
.elementor-field-option
label a {
color:
var(--sph-blue) !important;
text-decoration:
underline;
text-underline-offset:
3px;
}
/* =========================================================
INHALT NICHT MEHR VERFÜGBAR
========================================================= */
.sph-redirect-page {
background-color: var(--sph-white);
}
/* =========================================================
HERO
========================================================= */
.sph-redirect-page__hero {
display: grid !important;
grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
width: 100%;
align-items: center;
gap: var(--sph-layout-gap-desktop);
}
.sph-redirect-page__hero-content {
width: 100%;
max-width: 820px;
}
.sph-redirect-page__title {
width: 100%;
max-width: 820px;
}
.sph-redirect-page__copy {
width: 100%;
max-width: 760px;
}
/* =========================================================
HERO ARROW
========================================================= */
.sph-redirect-page__hero-mark {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100%;
min-height: 340px;
}
.sph-redirect-page__hero-arrow-widget {
width: 100%;
}
.sph-redirect-page__hero-arrow {
display: block;
width: min(100%, 440px);
aspect-ratio: 1.35 / 1;
margin-left: auto;
background-color: var(--sph-orange);
-webkit-mask:
url("https://sph-ag.com/wp-content/uploads/2024/05/fast-forward.svg")
center / contain no-repeat;
mask:
url("https://sph-ag.com/wp-content/uploads/2024/05/fast-forward.svg")
center / contain no-repeat;
}
/* =========================================================
NAVIGATION
========================================================= */
.sph-redirect-page__nav {
width: 100%;
margin-top: 72px;
gap: 0 !important;
border-top:
1px solid rgba(24, 56, 88, 0.22);
}
.sph-redirect-page__row {
position: relative;
display: grid !important;
grid-template-columns:
minmax(240px, 0.8fr)
minmax(0, 1.8fr)
32px;
width: 100%;
align-items: center;
gap: 40px;
padding:
36px 24px !important;
border-bottom:
1px solid rgba(24, 56, 88, 0.22);
box-sizing: border-box;
transition:
background-color 0.2s ease;
}
.sph-redirect-page__row-title,
.sph-redirect-page__row-copy {
position: relative;
z-index: 1;
margin: 0 !important;
}
.sph-redirect-page__row-copy p {
margin: 0 !important;
}
/* =========================================================
ROW ARROW
========================================================= */
.sph-redirect-page__row-icon {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: flex-end;
}
.sph-redirect-page__row-arrow {
display: block;
width: 24px;
height: 24px;
background-color: var(--sph-orange);
-webkit-mask:
url("https://sph-ag.com/wp-content/uploads/2024/05/fast-forward.svg")
center / contain no-repeat;
mask:
url("https://sph-ag.com/wp-content/uploads/2024/05/fast-forward.svg")
center / contain no-repeat;
transition:
transform 0.2s ease;
}
/* =========================================================
FULL ROW LINK
========================================================= */
.sph-redirect-page__row-overlay {
position: absolute !important;
inset: 0;
z-index: 5;
width: 100%;
height: 100%;
margin: 0 !important;
}
.sph-redirect-page__row-link {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
}
/* =========================================================
INTERACTION
========================================================= */
.sph-redirect-page__row:hover {
background-color:
rgba(24, 56, 88, 0.04);
}
.sph-redirect-page__row:hover
.sph-redirect-page__row-title,
.sph-redirect-page__row:hover
.sph-redirect-page__row-copy {
transform: translateX(8px);
}
.sph-redirect-page__row-title,
.sph-redirect-page__row-copy {
transition:
transform 0.2s ease;
}
.sph-redirect-page__row:hover
.sph-redirect-page__row-arrow {
transform: translateX(6px);
}
.sph-redirect-page__row:has(
.sph-redirect-page__row-link:focus-visible
) {
outline:
2px solid var(--sph-orange);
outline-offset:
-2px;
}
/* =========================================================
<= 1199px
========================================================= */
@media (max-width: 1199px) {
.sph-redirect-page__hero {
grid-template-columns:
minmax(0, 1.2fr)
minmax(260px, 0.8fr);
gap:
var(--sph-layout-gap-tablet-landscape);
}
.sph-redirect-page__hero-mark {
min-height: 300px;
}
.sph-redirect-page__nav {
margin-top: 64px;
}
}
/* =========================================================
<= 991px
========================================================= */
@media (max-width: 991px) {
.sph-redirect-page__hero {
grid-template-columns:
minmax(0, 1fr)
minmax(220px, 0.55fr);
gap:
var(--sph-layout-gap-tablet);
}
.sph-redirect-page__hero-mark {
min-height: 240px;
}
.sph-redirect-page__row {
grid-template-columns:
minmax(200px, 0.8fr)
minmax(0, 1.4fr)
28px;
gap: 28px;
}
}
/* =========================================================
<= 767px
========================================================= */
@media (max-width: 767px) {
.sph-redirect-page__hero {
grid-template-columns: 1fr;
gap: 40px;
}
.sph-redirect-page__hero-mark {
min-height: 0;
align-items: flex-start !important;
justify-content: flex-start !important;
}
.sph-redirect-page__hero-arrow {
width: 180px;
margin-left: 0;
}
.sph-redirect-page__nav {
margin-top: 48px;
}
.sph-redirect-page__row {
grid-template-columns:
minmax(0, 1fr)
28px;
gap:
12px 24px;
padding:
24px 0 !important;
}
.sph-redirect-page__row-title {
grid-column: 1;
grid-row: 1;
}
.sph-redirect-page__row-copy {
grid-column: 1;
grid-row: 2;
}
.sph-redirect-page__row-icon {
grid-column: 2;
grid-row: 1 / span 2;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.sph-redirect-page__row,
.sph-redirect-page__row-arrow {
transition: none;
}
}
/* =========================================================
SUCCESS PAGE
========================================================= */
.sph-success-page {
background-color: var(--sph-white);
}
.sph-success-page__inner {
display: grid !important;
grid-template-columns:
minmax(0, 1.15fr)
minmax(320px, 0.85fr);
align-items: center;
gap:
var(--sph-layout-gap-desktop);
min-height:
clamp(560px, 62vh, 760px);
}
.sph-success-page__content {
width: 100%;
max-width:
860px;
}
.sph-success-page__title {
width: 100%;
max-width:
860px;
}
.sph-success-page__copy {
width: 100%;
max-width:
720px;
}
.sph-success-page__button {
align-self: flex-start;
}
/* =========================================================
CHECK
========================================================= */
.sph-success-page__mark {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100%;
min-height:
340px;
}
.sph-success-page__check-widget {
width: 100%;
}
.sph-success-page__check {
width:
min(100%, 440px);
margin-left:
auto;
}
.sph-success-page__check svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.sph-success-page__check path {
fill: none;
stroke:
var(--sph-turquoise);
stroke-width:
24;
stroke-linecap:
square;
stroke-linejoin:
miter;
stroke-dasharray:
230;
stroke-dashoffset:
230;
animation:
sph-success-check-draw
0.8s
cubic-bezier(0.65, 0, 0.35, 1)
0.2s
forwards;
}
@keyframes sph-success-check-draw {
to {
stroke-dashoffset:
0;
}
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1199px) {
.sph-success-page__inner {
grid-template-columns:
minmax(0, 1.2fr)
minmax(280px, 0.8fr);
gap:
var(--sph-layout-gap-tablet-landscape);
}
.sph-success-page__mark {
min-height:
300px;
}
}
@media (max-width: 991px) {
.sph-success-page__inner {
grid-template-columns:
minmax(0, 1fr)
minmax(220px, 0.55fr);
gap:
var(--sph-layout-gap-tablet);
}
.sph-success-page__mark {
min-height:
240px;
}
}
@media (max-width: 767px) {
.sph-success-page__inner {
grid-template-columns:
1fr;
gap:
40px;
min-height:
auto;
}
.sph-success-page__mark {
align-items:
flex-start !important;
justify-content:
flex-start !important;
min-height:
0;
}
.sph-success-page__check {
width:
180px;
margin-left:
0;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.sph-success-page__check path {
stroke-dashoffset:
0;
animation:
none;
}
}
/* =========================================================
COMPONENT: PAGE HERO
========================================================= */
/* ---------------------------------------------------------
HERO SECTION
Der Page Hero verwendet den normalen sph-section Wrapper.
Abweichung vom normalen Section-System:
- eigener Abstand nach oben
- kein Section-Abstand nach unten
Der Abstand zur folgenden Section wird von der
folgenden Section selbst erzeugt.
--------------------------------------------------------- */
.sph-page-hero {
padding-top: 64px !important;
padding-bottom: 0 !important;
}
/* ---------------------------------------------------------
HERO LAYOUT
Der Hero liegt innerhalb des normalen sph-container.
Außen bleibt der Seitenhintergrund sichtbar.
--------------------------------------------------------- */
.sph-page-hero__inner {
display: flex !important;
flex-direction: row !important;
align-items: stretch !important;
gap: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* ---------------------------------------------------------
HERO CONTENT
Linke Hälfte:
- weißer Hintergrund
- Page H1
- Overpass H2 Uppercase
- Copy Large
--------------------------------------------------------- */
.sph-page-hero__content {
flex: 0 0 50% !important;
width: 50% !important;
max-width: 50% !important;
justify-content: center !important;
align-items: flex-start !important;
padding:
clamp(48px, 5vw, 80px)
clamp(48px, 5vw, 80px) !important;
box-sizing: border-box !important;
background-color: var(--sph-white);
}
/* ---------------------------------------------------------
HERO COPY
--------------------------------------------------------- */
.sph-page-hero__copy {
max-width: 640px;
}
.sph-page-hero__copy p + p {
margin-top: 0.8em !important;
}
/* ---------------------------------------------------------
HERO MEDIA
Rechte Hälfte.
Keine Abstände innerhalb der Bildspalte.
--------------------------------------------------------- */
.sph-page-hero__media {
flex: 0 0 50% !important;
width: 50% !important;
max-width: 50% !important;
min-width: 0;
align-self: stretch !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden;
}
/* ---------------------------------------------------------
HERO IMAGE WIDGET
--------------------------------------------------------- */
.sph-page-hero__image {
width: 100% !important;
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* ---------------------------------------------------------
ELEMENTOR IMAGE CONTAINER
--------------------------------------------------------- */
.sph-page-hero__image .elementor-widget-container {
width: 100% !important;
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* ---------------------------------------------------------
HERO IMAGE
Die Motive liegen bereits im Format 1:1 vor.
Das Bild füllt die Media-Spalte vollständig aus.
--------------------------------------------------------- */
.sph-page-hero__image img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover;
margin: 0 !important;
}
/* =========================================================
LAPTOP
<= 1399px
========================================================= */
@media (max-width: 1399px) {
.sph-page-hero__content {
padding:
48px
48px !important;
}
}
/* =========================================================
TABLET LANDSCAPE
<= 1199px
========================================================= */
@media (max-width: 1199px) {
.sph-page-hero {
padding-top: 48px !important;
padding-bottom: 0 !important;
}
.sph-page-hero__content {
padding:
40px
40px !important;
}
}
/* =========================================================
TABLET PORTRAIT
<= 991px
Ab hier:
Text oben
Bild darunter
========================================================= */
@media (max-width: 991px) {
.sph-page-hero {
padding-top: 40px !important;
padding-bottom: 0 !important;
}
.sph-page-hero__inner {
flex-direction: column !important;
}
.sph-page-hero__content,
.sph-page-hero__media {
flex: 0 0 auto !important;
width: 100% !important;
max-width: 100% !important;
}
.sph-page-hero__content {
padding:
48px
32px !important;
}
.sph-page-hero__copy {
max-width: 760px;
}
/*
* Nach dem Stacken soll das fertige 1:1-Motiv
* wieder quadratisch dargestellt werden.
*/
.sph-page-hero__media {
aspect-ratio: 1 / 1;
}
}
/* =========================================================
MOBILE LANDSCAPE
<= 767px
========================================================= */
@media (max-width: 767px) {
.sph-page-hero {
padding-top: 32px !important;
padding-bottom: 0 !important;
}
.sph-page-hero__content {
padding:
40px
24px !important;
}
}
/* =========================================================
MOBILE PORTRAIT
<= 576px
========================================================= */
@media (max-width: 576px) {
.sph-page-hero {
padding-top: 24px !important;
padding-bottom: 0 !important;
}
.sph-page-hero__content {
padding:
36px
20px !important;
}
}
/* =========================================================
COMPONENT: EDITORIAL NETWORK INTRO
========================================================= */
/* ---------------------------------------------------------
SECTION
--------------------------------------------------------- */
.sph-network-intro {
position: relative;
overflow: hidden;
isolation: isolate;
}
/* =========================================================
COMPONENT: EDITORIAL NETWORK INTRO
========================================================= */
/* ---------------------------------------------------------
SECTION
--------------------------------------------------------- */
.sph-network-intro {
position: relative;
overflow: hidden;
isolation: isolate;
}
/* ---------------------------------------------------------
NETWORK BACKGROUND
Original SPH Network SVG
Rein dekorative Ebene.
Kein Einfluss auf sph-container oder Content-Layout.
--------------------------------------------------------- */
.sph-network-intro::before {
content: "";
position: absolute;
width: 1400px;
height: 950px;
left: -180px;
top: 50%;
transform: translateY(-50%);
z-index: -1;
pointer-events: none;
background-image:
url("https://sph-ag.com/wp-content/uploads/2026/10/AdobeStock_1406988309.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.28;
}
/* ---------------------------------------------------------
CONTENT LAYER
--------------------------------------------------------- */
.sph-network-intro > .sph-container {
position: relative;
z-index: 1;
}
/* ---------------------------------------------------------
EDITORIAL LAYOUT
--------------------------------------------------------- */
.sph-network-intro__layout {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
gap: var(--sph-layout-gap-desktop) !important;
}
/* ---------------------------------------------------------
LEFT COLUMN
--------------------------------------------------------- */
.sph-network-intro__left {
flex: 0 0 calc(58.333% - 32px) !important;
width: calc(58.333% - 32px) !important;
max-width: calc(58.333% - 32px) !important;
min-width: 0;
}
/* ---------------------------------------------------------
RIGHT COLUMN
--------------------------------------------------------- */
.sph-network-intro__right {
flex: 1 1 0 !important;
width: auto !important;
max-width: 520px !important;
min-width: 0;
padding-top: clamp(72px, 7vw, 120px) !important;
}
/* ---------------------------------------------------------
TEXT EDITOR PARAGRAPH RHYTHM
--------------------------------------------------------- */
.sph-network-intro__right p + p {
margin-top: 1em !important;
}
/* =========================================================
TABLET LANDSCAPE
<= 1199px
========================================================= */
@media (max-width: 1199px) {
.sph-network-intro__layout {
gap: var(--sph-layout-gap-tablet-landscape) !important;
}
.sph-network-intro__left {
flex-basis: calc(58.333% - 24px) !important;
width: calc(58.333% - 24px) !important;
max-width: calc(58.333% - 24px) !important;
}
.sph-network-intro__right {
padding-top: 72px !important;
}
.sph-network-intro::before {
width: 1150px;
height: 820px;
left: -180px;
opacity: 0.24;
}
}
/* =========================================================
TABLET PORTRAIT
<= 991px
========================================================= */
@media (max-width: 991px) {
.sph-network-intro__layout {
flex-direction: column !important;
align-items: stretch !important;
gap: var(--sph-layout-gap-tablet) !important;
}
.sph-network-intro__left,
.sph-network-intro__right {
flex: 0 0 auto !important;
width: 100% !important;
max-width: 100% !important;
}
.sph-network-intro__right {
padding-top: 0 !important;
max-width: 720px !important;
}
.sph-network-intro::before {
width: 1000px;
height: 760px;
left: -250px;
opacity: 0.20;
}
}
/* =========================================================
MOBILE LANDSCAPE
<= 767px
========================================================= */
@media (max-width: 767px) {
.sph-network-intro__layout {
gap: var(--sph-layout-gap-mobile-landscape) !important;
}
.sph-network-intro::before {
width: 850px;
height: 680px;
left: -300px;
opacity: 0.17;
}
}
/* =========================================================
MOBILE PORTRAIT
<= 576px
========================================================= */
@media (max-width: 576px) {
.sph-network-intro__layout {
gap: var(--sph-layout-gap-mobile) !important;
}
.sph-network-intro::before {
width: 720px;
height: 620px;
left: -300px;
opacity: 0.14;
}
}
/* =========================================================
SPH CAREER STORY
========================================================= */
.sph-career-story {
--career-story-color: #2a4838;
--career-story-overlap: 80px;
}
/* ---------------------------------------------------------
INNER
--------------------------------------------------------- */
.sph-career-story__inner {
position: relative;
}
/* ---------------------------------------------------------
STAGE
Der untere Padding-Bereich erzeugt den Platz,
in den das Bild aus dem Farbpanel herausragt.
--------------------------------------------------------- */
.sph-career-story__stage {
position: relative;
width: 100%;
padding-bottom: var(--career-story-overlap);
}
/* ---------------------------------------------------------
COLORED PANEL
--------------------------------------------------------- */
.sph-career-story__panel {
position: relative;
width: 86%;
min-height: 620px;
background-color: var(--career-story-color);
padding:
clamp(48px, 5vw, 80px)
clamp(280px, 25vw, 430px)
clamp(48px, 5vw, 80px)
clamp(48px, 5vw, 80px);
}
/* ---------------------------------------------------------
CONTENT
--------------------------------------------------------- */
.sph-career-story__content {
position: relative;
z-index: 1;
width: 100%;
max-width: 720px;
}
/* Text innerhalb der Story */
.sph-career-story__content,
.sph-career-story__content h1,
.sph-career-story__content h2,
.sph-career-story__content h3,
.sph-career-story__content h4,
.sph-career-story__content h5,
.sph-career-story__content h6,
.sph-career-story__content p {
color: #ffffff;
}
/* Eyebrow */
.sph-career-story__content .sph-eyebrow :is(h1, h2, h3, h4, h5, h6, p) {
color: #ffffff;
}
/* Headline */
.sph-career-story__content .sph-heading-2 :is(h1, h2, h3, h4, h5, h6) {
color: #ffffff;
}
/* ---------------------------------------------------------
MEDIA
Das Bild wird an der Unterkante der Stage verankert.
Dadurch bleibt der Überstand unabhängig von der
tatsächlichen Höhe des Farbpanels konstant.
--------------------------------------------------------- */
.sph-career-story__media {
position: absolute;
right: 0;
bottom: 0;
width: 34%;
max-width: 500px;
z-index: 2;
}
/* Fertiges Kampagnenmotiv:
kein Cover-Crop, Seitenverhältnis bleibt erhalten */
.sph-career-story__media img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
/* ---------------------------------------------------------
LAPTOP
--------------------------------------------------------- */
@media (max-width: 1399px) {
.sph-career-story {
--career-story-overlap: 72px;
}
.sph-career-story__panel {
width: 87%;
min-height: 580px;
padding:
64px
clamp(260px, 26vw, 360px)
64px
64px;
}
.sph-career-story__media {
width: 35%;
max-width: 460px;
}
}
/* ---------------------------------------------------------
TABLET LANDSCAPE
--------------------------------------------------------- */
@media (max-width: 1199px) {
.sph-career-story {
--career-story-overlap: 64px;
}
.sph-career-story__panel {
width: 88%;
min-height: 540px;
padding:
56px
clamp(230px, 28vw, 320px)
56px
56px;
}
.sph-career-story__media {
width: 36%;
max-width: 400px;
}
}
/* ---------------------------------------------------------
TABLET PORTRAIT
Ab hier wird das Motiv unterhalb des Textes angeordnet.
--------------------------------------------------------- */
@media (max-width: 991px) {
.sph-career-story {
--career-story-overlap: 0px;
}
.sph-career-story__stage {
display: flex;
flex-direction: column;
padding-bottom: 0;
}
.sph-career-story__panel {
width: 100%;
min-height: 0;
padding:
56px
48px
120px;
}
.sph-career-story__content {
max-width: 720px;
}
.sph-career-story__media {
position: relative;
right: auto;
bottom: auto;
width: min(62%, 460px);
max-width: none;
align-self: flex-end;
margin-top: -72px;
margin-right: 32px;
}
}
/* ---------------------------------------------------------
MOBILE LANDSCAPE
--------------------------------------------------------- */
@media (max-width: 767px) {
.sph-career-story__panel {
padding:
48px
32px
104px;
}
.sph-career-story__media {
width: min(72%, 400px);
margin-top: -64px;
margin-right: 24px;
}
}
/* ---------------------------------------------------------
MOBILE PORTRAIT
--------------------------------------------------------- */
@media (max-width: 576px) {
.sph-career-story__panel {
padding:
40px
24px
88px;
}
.sph-career-story__media {
width: calc(100% - 48px);
margin-top: -48px;
margin-right: 24px;
}
}
/* =========================================================
COMPONENT: JOBS
========================================================= */
/* ---------------------------------------------------------
INNER
--------------------------------------------------------- */
.sph-jobs__inner {
display: flex !important;
flex-direction: column !important;
gap: 64px !important;
}
/* ---------------------------------------------------------
HEADER
--------------------------------------------------------- */
.sph-jobs__header {
width: 100%;
max-width: 900px;
}
.sph-jobs__intro {
max-width: 760px;
}
/* ---------------------------------------------------------
JOB LIST
--------------------------------------------------------- */
.sph-jobs__list {
display: flex !important;
flex-direction: column !important;
width: 100%;
gap: 24px !important;
}
/* ---------------------------------------------------------
JOB ROW
Die komplette Card ist verlinkt.
--------------------------------------------------------- */
.sph-job {
position: relative;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
width: 100%;
gap: 48px !important;
padding: 32px 36px !important;
background-color: #f0f0f0;
box-shadow:
0 8px 24px rgba(24, 56, 88, 0.08);
border: 0 !important;
cursor: pointer;
transition:
background-color 0.25s ease,
box-shadow 0.25s ease;
}
.sph-job:hover {
background-color: #ffffff;
box-shadow:
0 12px 32px rgba(24, 56, 88, 0.14);
}
/* ---------------------------------------------------------
FULL CARD LINK
Das HTML-Widget selbst nimmt keinen Platz im Layout ein.
Das enthaltene -Element wird über die komplette
Job-Card gespannt.
Der sichtbare SPH-Button liegt darüber und bleibt
separat klickbar.
--------------------------------------------------------- */
.sph-job__card-link-widget {
position: static !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: none;
}
.sph-job__card-link-widget .elementor-widget-container {
position: static !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: none;
}
.sph-job__card-link {
position: absolute !important;
z-index: 5;
inset: 0;
display: block;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-decoration: none !important;
cursor: pointer;
pointer-events: auto;
}
.sph-job__card-link:focus {
outline: none;
}
.sph-job__card-link:focus-visible {
outline: 2px solid var(--sph-orange);
outline-offset: 4px;
}
/* ---------------------------------------------------------
JOB MAIN
--------------------------------------------------------- */
.sph-job__main {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
min-width: 0;
gap: 18px !important;
}
/* ---------------------------------------------------------
JOB TITLE
--------------------------------------------------------- */
.sph-job__title {
width: fit-content;
}
.sph-job__title .elementor-heading-title {
margin: 0 !important;
font-family: "Overpass", sans-serif;
font-size: clamp(
1.375rem,
0.8vw + 1.1rem,
2rem
) !important;
line-height: 1.2 !important;
font-weight: 700 !important;
color: #183858 !important;
transition: none !important;
}
.sph-job__title .elementor-heading-title a,
.sph-job__title .elementor-heading-title a:link,
.sph-job__title .elementor-heading-title a:visited,
.sph-job__title .elementor-heading-title a:hover,
.sph-job__title .elementor-heading-title a:active,
.sph-job__title .elementor-heading-title a:focus {
color: #183858 !important;
text-decoration: none !important;
transition: none !important;
}
.sph-job__title .elementor-heading-title a:focus-visible {
color: #183858 !important;
outline: 2px solid #183858;
outline-offset: 4px;
}
/* ---------------------------------------------------------
META LIST
--------------------------------------------------------- */
.sph-job__meta {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: wrap !important;
width: 100%;
gap: 12px 32px !important;
}
/* ---------------------------------------------------------
META ITEM
--------------------------------------------------------- */
.sph-job__meta-item {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
width: auto !important;
gap: 10px !important;
}
.sph-job__meta-item--erp {
flex-basis: 100% !important;
}
/* ---------------------------------------------------------
META ICON
--------------------------------------------------------- */
.sph-job__meta-icon {
flex: 0 0 auto !important;
width: 26px !important;
max-width: 26px !important;
margin: 0 !important;
padding: 0 !important;
}
.sph-job__meta-icon .elementor-widget-container {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
margin: 0 !important;
padding: 0 !important;
}
.sph-job__meta-icon img {
display: block;
width: 26px !important;
height: 26px !important;
max-width: 26px !important;
object-fit: contain;
margin: 0 !important;
}
/* ---------------------------------------------------------
META TEXT
--------------------------------------------------------- */
.sph-job__meta-text {
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}
.sph-job__meta-text .elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
}
.sph-job__meta-text p {
margin: 0 !important;
font-family: "Overpass", sans-serif;
font-size: clamp(
1rem,
0.18vw + 0.95rem,
1.125rem
);
line-height: 1.4;
font-weight: 400;
color: #000000 !important;
}
/* ---------------------------------------------------------
ACTION
Nur Positionierung.
Das Button-Design selbst kommt vollständig aus dem
globalen SPH / Elementor Button-System.
Action und Button liegen über dem Full-Card-Link.
--------------------------------------------------------- */
.sph-job__action {
position: relative;
z-index: 10;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
flex: 0 0 auto !important;
width: auto !important;
}
.sph-job__button {
position: relative;
z-index: 10;
width: auto !important;
}
/* =========================================================
LAPTOP
<= 1399px
========================================================= */
@media (max-width: 1399px) {
.sph-job {
gap: 40px !important;
padding: 30px 32px !important;
}
}
/* =========================================================
TABLET LANDSCAPE
<= 1199px
========================================================= */
@media (max-width: 1199px) {
.sph-jobs__inner {
gap: 56px !important;
}
.sph-jobs__list {
gap: 20px !important;
}
.sph-job {
align-items: flex-start !important;
gap: 32px !important;
padding: 28px !important;
}
.sph-job__meta {
gap: 10px 24px !important;
}
.sph-job__action {
padding-top: 4px !important;
}
}
/* =========================================================
TABLET PORTRAIT
<= 991px
========================================================= */
@media (max-width: 991px) {
.sph-jobs__inner {
gap: 48px !important;
}
.sph-job {
gap: 24px !important;
padding: 28px 24px !important;
}
.sph-job__main {
gap: 16px !important;
}
.sph-job__meta {
flex-direction: column !important;
align-items: flex-start !important;
gap: 10px !important;
}
.sph-job__meta-item,
.sph-job__meta-item--erp {
flex-basis: auto !important;
}
}
/* =========================================================
MOBILE LANDSCAPE
<= 767px
========================================================= */
@media (max-width: 767px) {
.sph-jobs__inner {
gap: 40px !important;
}
.sph-jobs__list {
gap: 16px !important;
}
.sph-job {
align-items: flex-start !important;
gap: 20px !important;
padding: 24px 20px !important;
}
.sph-job__action {
padding-top: 2px !important;
}
.sph-job__meta-icon,
.sph-job__meta-icon .elementor-widget-container {
width: 24px !important;
max-width: 24px !important;
height: 24px !important;
}
.sph-job__meta-icon img {
width: 24px !important;
height: 24px !important;
max-width: 24px !important;
}
}
/* =========================================================
MOBILE PORTRAIT
<= 576px
========================================================= */
@media (max-width: 576px) {
.sph-jobs__inner {
gap: 32px !important;
}
.sph-jobs__list {
gap: 16px !important;
}
.sph-job {
flex-direction: column !important;
gap: 18px !important;
padding: 22px 20px !important;
}
.sph-job__main {
width: 100% !important;
}
.sph-job__title .elementor-heading-title {
font-size: 1.25rem !important;
}
.sph-job__meta-text p {
font-size: 0.9375rem;
}
.sph-job__meta-item {
gap: 8px !important;
}
.sph-job__action {
width: auto !important;
padding-top: 0 !important;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.sph-job {
transition: none !important;
}
}
/* =========================================================
COMPONENT: CAREER BENEFITS
========================================================= */
/* ---------------------------------------------------------
INNER
--------------------------------------------------------- */
.sph-career-benefits__inner {
display: flex !important;
flex-direction: column !important;
gap: 72px !important;
}
/* ---------------------------------------------------------
HEADER
--------------------------------------------------------- */
.sph-career-benefits__header {
width: 100%;
max-width: 900px;
}
.sph-career-benefits__intro {
max-width: 760px;
}
/* ---------------------------------------------------------
GRID
--------------------------------------------------------- */
.sph-career-benefits__grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
width: 100%;
gap: 64px 72px !important;
}
/* ---------------------------------------------------------
BENEFIT
--------------------------------------------------------- */
.sph-career-benefit {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
min-width: 0;
gap: 14px !important;
}
/* ---------------------------------------------------------
ICON
--------------------------------------------------------- */
.sph-career-benefit__icon {
position: relative;
width: 88px !important;
height: 88px;
margin: 0 0 4px 0 !important;
color: #183858;
}
/* Orange Akzentfläche */
.sph-career-benefit__icon::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 54px;
height: 54px;
border-radius: 50%;
background-color: rgba(254, 105, 1, 0.22);
z-index: 0;
}
/* Elementor HTML Wrapper */
.sph-career-benefit__icon .elementor-widget-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 88px;
height: 88px;
margin: 0 !important;
padding: 0 !important;
z-index: 1;
}
/* SVG */
.sph-career-benefit__icon svg {
position: relative;
display: block;
width: 72px;
height: 72px;
overflow: visible;
fill: none;
stroke: currentColor;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
z-index: 1;
}
/* ---------------------------------------------------------
TITLE
--------------------------------------------------------- */
.sph-career-benefit__title {
width: 100%;
}
.sph-career-benefit__title .elementor-heading-title {
margin: 0 !important;
font-family: "Overpass", sans-serif;
font-size: clamp(
1.25rem,
0.35vw + 1.15rem,
1.5rem
) !important;
line-height: 1.25 !important;
font-weight: 700 !important;
color: #183858 !important;
}
/* ---------------------------------------------------------
TEXT
--------------------------------------------------------- */
.sph-career-benefit__text {
width: 100%;
max-width: 360px;
}
.sph-career-benefit__text .elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
}
.sph-career-benefit__text p {
margin: 0 !important;
font-family: "Overpass", sans-serif;
font-size: clamp(
1rem,
0.18vw + 0.95rem,
1.125rem
);
line-height: 1.55;
font-weight: 400;
color: #000000;
}
/* =========================================================
LAPTOP
<= 1399px
========================================================= */
@media (max-width: 1399px) {
.sph-career-benefits__inner {
gap: 64px !important;
}
.sph-career-benefits__grid {
gap: 56px 56px !important;
}
}
/* =========================================================
TABLET LANDSCAPE
<= 1199px
========================================================= */
@media (max-width: 1199px) {
.sph-career-benefits__inner {
gap: 56px !important;
}
.sph-career-benefits__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 48px 56px !important;
}
}
/* =========================================================
TABLET PORTRAIT
<= 991px
========================================================= */
@media (max-width: 991px) {
.sph-career-benefits__inner {
gap: 48px !important;
}
.sph-career-benefits__grid {
gap: 44px 40px !important;
}
.sph-career-benefit__icon {
width: 80px !important;
height: 80px;
}
.sph-career-benefit__icon .elementor-widget-container {
width: 80px;
height: 80px;
}
.sph-career-benefit__icon::before {
width: 50px;
height: 50px;
}
.sph-career-benefit__icon svg {
width: 66px;
height: 66px;
}
}
/* =========================================================
MOBILE LANDSCAPE
<= 767px
========================================================= */
@media (max-width: 767px) {
.sph-career-benefits__inner {
gap: 40px !important;
}
.sph-career-benefits__grid {
grid-template-columns: 1fr;
gap: 36px !important;
}
.sph-career-benefit {
display: grid !important;
grid-template-columns: 72px minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: 20px !important;
row-gap: 6px !important;
align-items: start !important;
}
.sph-career-benefit__icon {
grid-column: 1;
grid-row: 1 / span 2;
width: 72px !important;
height: 72px;
margin: 0 !important;
}
.sph-career-benefit__icon .elementor-widget-container {
width: 72px;
height: 72px;
}
.sph-career-benefit__icon::before {
width: 44px;
height: 44px;
}
.sph-career-benefit__icon svg {
width: 58px;
height: 58px;
}
.sph-career-benefit__title {
grid-column: 2;
grid-row: 1;
align-self: end;
}
.sph-career-benefit__text {
grid-column: 2;
grid-row: 2;
max-width: none;
}
}
/* =========================================================
MOBILE PORTRAIT
<= 576px
========================================================= */
@media (max-width: 576px) {
.sph-career-benefits__inner {
gap: 32px !important;
}
.sph-career-benefits__grid {
gap: 32px !important;
}
.sph-career-benefit {
grid-template-columns: 64px minmax(0, 1fr);
column-gap: 16px !important;
}
.sph-career-benefit__icon {
width: 64px !important;
height: 64px;
}
.sph-career-benefit__icon .elementor-widget-container {
width: 64px;
height: 64px;
}
.sph-career-benefit__icon::before {
width: 40px;
height: 40px;
}
.sph-career-benefit__icon svg {
width: 52px;
height: 52px;
}
.sph-career-benefit__title .elementor-heading-title {
font-size: 1.125rem !important;
}
.sph-career-benefit__text p {
font-size: 0.9375rem;
}
}
/* =========================================================
COMPONENT: CAREER CONTACT
========================================================= */
/* ---------------------------------------------------------
SECTION
--------------------------------------------------------- */
.sph-career-contact {
background-color: #ffffff;
}
/* ---------------------------------------------------------
INNER
--------------------------------------------------------- */
.sph-career-contact__inner {
display: flex !important;
flex-direction: column !important;
gap: 56px !important;
}
/* ---------------------------------------------------------
HEADER
--------------------------------------------------------- */
.sph-career-contact__header {
width: 100%;
max-width: 920px;
}
.sph-career-contact__intro {
max-width: 900px;
}
/* ---------------------------------------------------------
PERSON
--------------------------------------------------------- */
.sph-career-contact__person {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
width: fit-content;
gap: 32px !important;
}
/* ---------------------------------------------------------
PORTRAIT
--------------------------------------------------------- */
.sph-career-contact__portrait {
flex: 0 0 auto !important;
width: 128px !important;
max-width: 128px !important;
}
.sph-career-contact__portrait .elementor-widget-container {
width: 128px;
height: 128px;
overflow: hidden;
border-radius: 50%;
}
.sph-career-contact__portrait img {
display: block;
width: 128px !important;
height: 128px !important;
max-width: none !important;
object-fit: cover;
border-radius: 50%;
}
/* ---------------------------------------------------------
PERSON CONTENT
--------------------------------------------------------- */
.sph-career-contact__person-content {
display: flex !important;
flex-direction: column !important;
width: auto !important;
gap: 8px !important;
}
/* ---------------------------------------------------------
NAME
--------------------------------------------------------- */
.sph-career-contact__name {
width: auto !important;
}
.sph-career-contact__name .elementor-heading-title {
margin: 0 !important;
font-family: "Overpass", sans-serif;
font-size: clamp(
1.25rem,
0.35vw + 1.15rem,
1.5rem
) !important;
line-height: 1.25 !important;
font-weight: 700 !important;
color: #183858 !important;
}
/* ---------------------------------------------------------
DETAILS
--------------------------------------------------------- */
.sph-career-contact__details {
width: auto !important;
}
.sph-career-contact__details .elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
}
.sph-career-contact__details-inner {
display: flex;
flex-direction: column;
gap: 20px;
}
/* ---------------------------------------------------------
ROLE
--------------------------------------------------------- */
.sph-career-contact__role {
margin: 0 !important;
font-family: "Overpass", sans-serif;
font-size: 1rem;
line-height: 1.5;
font-weight: 400;
color: #183858;
}
/* ---------------------------------------------------------
CONTACT LINKS
--------------------------------------------------------- */
.sph-career-contact__links {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.sph-career-contact__link {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: "Overpass", sans-serif;
font-size: clamp(
1rem,
0.18vw + 0.95rem,
1.125rem
);
line-height: 1.4;
font-weight: 400;
color: #183858 !important;
text-decoration: none !important;
transition: color 0.25s ease;
}
/* ---------------------------------------------------------
CONTACT ICON
--------------------------------------------------------- */
.sph-career-contact__link svg {
display: block;
width: 22px;
height: 22px;
flex: 0 0 22px;
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ---------------------------------------------------------
LINK HOVER
--------------------------------------------------------- */
.sph-career-contact__link:hover {
color: #fe6901 !important;
}
/* ---------------------------------------------------------
KEYBOARD FOCUS
--------------------------------------------------------- */
.sph-career-contact__link:focus-visible {
color: #fe6901 !important;
outline: 2px solid #fe6901;
outline-offset: 4px;
}
/* =========================================================
LAPTOP
<= 1399px
========================================================= */
@media (max-width: 1399px) {
.sph-career-contact__inner {
gap: 52px !important;
}
}
/* =========================================================
TABLET LANDSCAPE
<= 1199px
========================================================= */
@media (max-width: 1199px) {
.sph-career-contact__inner {
gap: 48px !important;
}
.sph-career-contact__person {
gap: 28px !important;
}
.sph-career-contact__portrait {
width: 116px !important;
max-width: 116px !important;
}
.sph-career-contact__portrait .elementor-widget-container {
width: 116px;
height: 116px;
}
.sph-career-contact__portrait img {
width: 116px !important;
height: 116px !important;
}
}
/* =========================================================
TABLET PORTRAIT
<= 991px
========================================================= */
@media (max-width: 991px) {
.sph-career-contact__inner {
gap: 44px !important;
}
}
/* =========================================================
MOBILE LANDSCAPE
<= 767px
========================================================= */
@media (max-width: 767px) {
.sph-career-contact__inner {
gap: 40px !important;
}
.sph-career-contact__person {
gap: 24px !important;
}
.sph-career-contact__portrait {
width: 104px !important;
max-width: 104px !important;
}
.sph-career-contact__portrait .elementor-widget-container {
width: 104px;
height: 104px;
}
.sph-career-contact__portrait img {
width: 104px !important;
height: 104px !important;
}
}
/* =========================================================
MOBILE PORTRAIT
<= 576px
========================================================= */
@media (max-width: 576px) {
.sph-career-contact__inner {
gap: 32px !important;
}
.sph-career-contact__person {
align-items: flex-start !important;
gap: 20px !important;
}
.sph-career-contact__portrait {
width: 88px !important;
max-width: 88px !important;
}
.sph-career-contact__portrait .elementor-widget-container {
width: 88px;
height: 88px;
}
.sph-career-contact__portrait img {
width: 88px !important;
height: 88px !important;
}
.sph-career-contact__person-content {
gap: 6px !important;
}
.sph-career-contact__details-inner {
gap: 14px;
}
.sph-career-contact__links {
gap: 8px;
}
.sph-career-contact__link {
gap: 9px;
font-size: 0.9375rem;
}
.sph-career-contact__link svg {
width: 20px;
height: 20px;
flex-basis: 20px;
}
}
/* =========================================================
VERY SMALL SCREENS
========================================================= */
@media (max-width: 420px) {
.sph-career-contact__person {
flex-direction: column !important;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.sph-career-contact__link {
transition: none !important;
}
}
/* =========================================================
SPH JOB DETAIL HERO
========================================================= */
/* ---------------------------------------------------------
CAREER CAMPAIGN COLORS
[Unverifiziert]
Die Werte wurden aus den vorhandenen HR-Motiven
visuell abgeleitet.
--------------------------------------------------------- */
.sph-career-bg-terracotta {
--sph-career-bg: #a94c2c;
}
.sph-career-bg-blue {
--sph-career-bg: #15263a;
}
.sph-career-bg-green {
--sph-career-bg: #2a4838;
}
/* ---------------------------------------------------------
HERO OUTER
--------------------------------------------------------- */
.sph-job-hero {
--sph-job-hero-overlap: 80px;
position: relative;
width: 100%;
padding:
64px
0
var(--sph-job-hero-overlap);
overflow: hidden;
}
/* ---------------------------------------------------------
HERO INNER
--------------------------------------------------------- */
.sph-job-hero__inner {
position: relative;
isolation: isolate;
width: min(
calc(100% - 128px),
1600px
);
max-width: 1600px;
min-height: 640px;
margin-inline: auto;
display: flex;
flex-direction: row;
align-items: stretch;
background-color:
var(--sph-career-bg, #a94c2c);
overflow: visible;
}
/* ---------------------------------------------------------
DIGITAL NETWORK
Das Netz sitzt bewusst rechts hinter dem Bildbereich
und läuft nur leicht in den Content hinein.
--------------------------------------------------------- */
.sph-job-hero__inner::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: 0;
width: 100%;
pointer-events: none;
background-image:
url("https://sph-ag.com/wp-content/uploads/2026/10/Abstrakt-Network.png");
background-repeat: no-repeat;
background-position:
left
background-size:
auto 115%;
opacity: .24;
}
/* ---------------------------------------------------------
CONTENT
--------------------------------------------------------- */
.sph-job-hero__content {
position: relative;
z-index: 2;
width: 62%;
max-width: 980px;
display: flex;
flex-direction: column;
align-items: flex-start;
padding:
48px
56px
64px
64px;
}
/* ---------------------------------------------------------
BREADCRUMB
--------------------------------------------------------- */
.sph-job-hero__breadcrumb {
margin:
0
0
32px;
}
.sph-job-hero__breadcrumb p {
margin: 0;
font-family:
"Overpass",
sans-serif;
font-size:
clamp(
.8rem,
.15vw + .76rem,
.9rem
);
line-height: 1.4;
font-weight: 400;
color:
rgba(
255,
255,
255,
.82
);
}
.sph-job-hero__breadcrumb span {
display: inline-block;
margin-inline: .55em;
color:
rgba(
255,
255,
255,
.55
);
}
/* ---------------------------------------------------------
EYEBROW
--------------------------------------------------------- */
.sph-job-hero__eyebrow {
margin:
0
0
20px;
}
.sph-job-hero__eyebrow h1,
.sph-job-hero__eyebrow h2,
.sph-job-hero__eyebrow h3,
.sph-job-hero__eyebrow p {
margin: 0;
color: #ffffff;
}
/* ---------------------------------------------------------
TITLE
--------------------------------------------------------- */
.sph-job-hero__title {
margin:
0
0
32px;
}
.sph-job-hero__title h1 {
margin: 0;
font-family:
"Overpass",
sans-serif;
font-size:
clamp(
2.75rem,
4vw,
5rem
);
line-height: .98;
font-weight: 700;
letter-spacing: -.035em;
color: #ffffff;
hyphens: none;
-webkit-hyphens: none;
word-break: normal;
overflow-wrap: normal;
}
/* ---------------------------------------------------------
META INFORMATION
--------------------------------------------------------- */
.sph-job-hero__meta {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap:
20px
32px;
margin:
0
0
32px;
}
.sph-job-hero__meta-item {
width: auto;
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
}
.sph-job-hero__meta-icon {
flex:
0
0
24px;
width: 24px;
}
.sph-job-hero__meta-icon img {
display: block;
width: 24px;
height: 24px;
object-fit: contain;
filter:
brightness(0)
invert(1);
}
.sph-job-hero__meta-text,
.sph-job-hero__meta-text .elementor-widget-container {
width: auto;
}
.sph-job-hero__meta-text p {
margin: 0;
font-family:
"Overpass",
sans-serif;
font-size:
clamp(
.9375rem,
.15vw + .9rem,
1.0625rem
);
line-height: 1.35;
font-weight: 600;
color: #ffffff;
}
/* ---------------------------------------------------------
INTRO COPY
--------------------------------------------------------- */
.sph-job-hero__copy {
max-width: 820px;
margin: 0;
}
.sph-job-hero__copy p {
margin: 0;
font-family:
"Overpass",
sans-serif;
font-size:
clamp(
1.05rem,
.35vw + .96rem,
1.25rem
);
line-height: 1.55;
font-weight: 400;
color: #ffffff;
}
/* ---------------------------------------------------------
IMAGE
--------------------------------------------------------- */
.sph-job-hero__media {
position: absolute;
z-index: 3;
right: 0;
bottom:
calc(
var(--sph-job-hero-overlap) * -1
);
width: 43%;
max-width: 650px;
display: flex;
align-items: flex-end;
justify-content: flex-end;
pointer-events: none;
}
.sph-job-hero__image,
.sph-job-hero__image .elementor-widget-container {
width: 100%;
}
.sph-job-hero__image img {
display: block;
width: 100%;
height: auto;
max-height: 700px;
object-fit: contain;
object-position:
right
bottom;
}
/* =========================================================
LAPTOP
<= 1399px
========================================================= */
@media (max-width: 1399px) {
.sph-job-hero {
--sph-job-hero-overlap: 72px;
padding-top: 48px;
}
.sph-job-hero__inner {
width:
min(
calc(100% - 96px),
1600px
);
min-height: 600px;
}
.sph-job-hero__content {
width: 64%;
padding:
48px
48px
56px;
}
.sph-job-hero__inner::before {
width: 57%;
background-size:
auto 112%;
opacity: .22;
}
.sph-job-hero__media {
width: 42%;
max-width: 580px;
}
}
/* =========================================================
TABLET LANDSCAPE
<= 1199px
========================================================= */
@media (max-width: 1199px) {
.sph-job-hero {
--sph-job-hero-overlap: 64px;
padding-top: 48px;
}
.sph-job-hero__inner {
width:
min(
calc(100% - 96px),
1600px
);
min-height: 560px;
}
.sph-job-hero__content {
width: 66%;
padding:
40px
40px
48px
48px;
}
.sph-job-hero__breadcrumb {
margin-bottom: 28px;
}
.sph-job-hero__title h1 {
font-size:
clamp(
2.5rem,
5vw,
4rem
);
}
.sph-job-hero__meta {
gap:
16px
24px;
}
.sph-job-hero__inner::before {
width: 56%;
background-size:
auto 108%;
opacity: .20;
}
.sph-job-hero__media {
width: 40%;
max-width: 500px;
}
}
/* =========================================================
TABLET PORTRAIT
<= 991px
========================================================= */
@media (max-width: 991px) {
.sph-job-hero {
--sph-job-hero-overlap: 0px;
padding:
40px
0
80px;
}
.sph-job-hero__inner {
width:
min(
calc(100% - 64px),
1600px
);
min-height: 0;
flex-direction: column;
overflow: visible;
}
.sph-job-hero__inner::before {
top: 0;
right: 0;
bottom: auto;
width: 70%;
height: 60%;
background-position:
right
top;
background-size:
auto 105%;
opacity: .18;
}
.sph-job-hero__content {
width: 100%;
max-width: none;
padding:
40px
48px
112px;
}
.sph-job-hero__breadcrumb {
margin-bottom: 28px;
}
.sph-job-hero__title h1 {
font-size:
clamp(
2.5rem,
7vw,
4rem
);
}
.sph-job-hero__copy {
max-width: 720px;
}
.sph-job-hero__media {
position: relative;
right: auto;
bottom: auto;
width:
min(
68%,
520px
);
max-width: none;
align-self: flex-end;
margin-top: -80px;
margin-right: 24px;
margin-bottom: -48px;
}
}
/* =========================================================
MOBILE LANDSCAPE
<= 767px
========================================================= */
@media (max-width: 767px) {
.sph-job-hero {
padding:
32px
0
64px;
}
.sph-job-hero__inner {
width:
min(
calc(100% - 48px),
1600px
);
}
.sph-job-hero__inner::before {
width: 76%;
height: 50%;
background-position:
right
top;
background-size:
auto 100%;
opacity: .15;
}
.sph-job-hero__content {
padding:
32px
32px
96px;
}
.sph-job-hero__breadcrumb {
margin-bottom: 24px;
}
.sph-job-hero__breadcrumb p {
font-size: .8rem;
}
.sph-job-hero__title {
margin-bottom: 28px;
}
.sph-job-hero__title h1 {
font-size:
clamp(
2.25rem,
9vw,
3.5rem
);
line-height: 1;
}
.sph-job-hero__meta {
flex-direction: column;
align-items: flex-start;
gap: 14px;
margin-bottom: 28px;
}
.sph-job-hero__meta-item {
width: 100%;
}
.sph-job-hero__media {
width:
min(
82%,
460px
);
margin-top: -64px;
margin-right: 16px;
margin-bottom: -40px;
}
}
/* =========================================================
MOBILE PORTRAIT
<= 576px
========================================================= */
@media (max-width: 576px) {
.sph-job-hero {
padding:
24px
0
56px;
}
.sph-job-hero__inner {
width:
min(
calc(100% - 40px),
1600px
);
}
.sph-job-hero__inner::before {
width: 82%;
height: 44%;
background-size:
auto 100%;
opacity: .12;
}
.sph-job-hero__content {
padding:
28px
24px
88px;
}
.sph-job-hero__breadcrumb {
margin-bottom: 20px;
}
.sph-job-hero__eyebrow {
margin-bottom: 16px;
}
.sph-job-hero__title h1 {
font-size:
clamp(
2rem,
10vw,
3rem
);
}
.sph-job-hero__media {
width:
calc(100% - 32px);
margin-top: -56px;
margin-right: 16px;
margin-bottom: -32px;
}
}
/* =========================================================
SPH JOB DETAIL – EDITORIAL INTRO V2
========================================================= */
/* ---------------------------------------------------------
INNER
Die eigentliche Flex-Struktur und die Spaltenbreiten
werden jetzt direkt über Elementor gesteuert.
Desktop:
Lead 42 %
Body 58 %
--------------------------------------------------------- */
.sph-job-intro-editorial__inner {
align-items: flex-start;
gap: 96px;
}
/* ---------------------------------------------------------
LEAD / LINKE SPALTE
--------------------------------------------------------- */
.sph-job-intro-editorial__lead {
min-width: 0;
align-items: flex-start;
}
/* ---------------------------------------------------------
EYEBROW
Typografie und Farbe:
sph-eyebrow
sph-text-orange
--------------------------------------------------------- */
.sph-job-intro-editorial__eyebrow {
width: 100%;
margin:
0
0
24px;
}
/* ---------------------------------------------------------
HEADLINE
Typografie und Farbe:
sph-heading-2
sph-uppercase
sph-text-blue
--------------------------------------------------------- */
.sph-job-intro-editorial__title {
width: 100%;
max-width: 650px;
margin: 0;
}
/* ---------------------------------------------------------
BODY / RECHTE SPALTE
--------------------------------------------------------- */
.sph-job-intro-editorial__body {
min-width: 0;
align-items: flex-start;
padding-top: 44px;
}
/* ---------------------------------------------------------
COPY
Typografie kommt vollständig über sph-copy.
--------------------------------------------------------- */
.sph-job-intro-editorial__copy {
width: 100%;
max-width: 760px;
margin: 0;
}
.sph-job-intro-editorial__copy p {
margin: 0;
}
.sph-job-intro-editorial__copy p + p {
margin-top: 24px;
}
/* ---------------------------------------------------------
CLOSING STATEMENT
--------------------------------------------------------- */
.sph-job-intro-editorial__closing {
width: 100%;
margin:
40px
0
0;
}
.sph-job-intro-editorial__closing h3 {
margin: 0;
font-family:
"Overpass",
sans-serif;
font-size:
clamp(
1rem,
.25vw + .94rem,
1.25rem
);
line-height: 1.3;
font-weight: 800;
letter-spacing: .025em;
text-transform: uppercase;
color: #fe6901;
}
/* =========================================================
LAPTOP
<= 1399px
========================================================= */
@media (max-width: 1399px) {
.sph-job-intro-editorial__inner {
gap: 72px;
}
.sph-job-intro-editorial__body {
padding-top: 40px;
}
}
/* =========================================================
TABLET LANDSCAPE
<= 1199px
Zwei Spalten bleiben bestehen.
========================================================= */
@media (max-width: 1199px) {
.sph-job-intro-editorial__inner {
gap: 48px;
}
.sph-job-intro-editorial__body {
padding-top: 36px;
}
.sph-job-intro-editorial__copy p + p {
margin-top: 20px;
}
.sph-job-intro-editorial__closing {
margin-top: 32px;
}
}
/* =========================================================
TABLET PORTRAIT
<= 991px
Elementor stellt den Inner-Container hier auf column
und beide Spalten auf 100 %.
========================================================= */
@media (max-width: 991px) {
.sph-job-intro-editorial__inner {
gap: 40px;
}
.sph-job-intro-editorial__title {
max-width: 720px;
}
.sph-job-intro-editorial__body {
max-width: 760px;
padding-top: 0;
}
}
/* =========================================================
MOBILE LANDSCAPE
<= 767px
========================================================= */
@media (max-width: 767px) {
.sph-job-intro-editorial__inner {
gap: 32px;
}
.sph-job-intro-editorial__eyebrow {
margin-bottom: 20px;
}
.sph-job-intro-editorial__closing {
margin-top: 28px;
}
}
/* =========================================================
MOBILE PORTRAIT
<= 576px
========================================================= */
@media (max-width: 576px) {
.sph-job-intro-editorial__inner {
gap: 28px;
}
.sph-job-intro-editorial__eyebrow {
margin-bottom: 16px;
}
.sph-job-intro-editorial__copy p + p {
margin-top: 18px;
}
.sph-job-intro-editorial__closing {
margin-top: 24px;
}
}
/* =========================================================
SPH JOB DETAIL – WAS DICH BEI UNS ERWARTET
========================================================= */
.sph-job-tasks {
background-color: var(--sph-light-gray, #F0F0F0);
}
.sph-job-tasks__inner {
align-items: flex-start;
gap: 96px;
}
.sph-job-tasks__lead,
.sph-job-tasks__body {
min-width: 0;
align-items: flex-start;
}
.sph-job-tasks__eyebrow {
width: 100%;
margin: 0 0 24px;
}
.sph-job-tasks__title {
width: 100%;
max-width: 620px;
margin: 0;
}
.sph-job-tasks__intro {
width: 100%;
max-width: 860px;
margin: 0 0 34px;
}
.sph-job-tasks__intro p {
margin: 0;
}
.sph-job-tasks__list {
width: 100%;
margin: 0;
}
.sph-job-tasks__list ul {
width: 100%;
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid rgba(24, 56, 88, 0.16);
}
.sph-job-tasks__list li {
position: relative;
margin: 0;
padding: 18px 0 18px 46px;
border-bottom: 1px solid rgba(24, 56, 88, 0.16);
}
.sph-job-tasks__list li::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 22px;
height: 22px;
background-color: var(--sph-orange, #FE6901);
-webkit-mask-image: url("https://sph-ag.com/wp-content/uploads/2024/05/fast-forward.svg");
mask-image: url("https://sph-ag.com/wp-content/uploads/2024/05/fast-forward.svg");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
transform: translateY(-50%);
}
.sph-job-tasks__list li p {
margin: 0;
}
@media (max-width: 1399px) {
.sph-job-tasks__inner {
gap: 72px;
}
}
@media (max-width: 1199px) {
.sph-job-tasks__inner {
gap: 48px;
}
.sph-job-tasks__intro {
margin-bottom: 30px;
}
.sph-job-tasks__list li {
padding-top: 16px;
padding-bottom: 16px;
}
}
@media (max-width: 991px) {
.sph-job-tasks__inner {
gap: 40px;
}
.sph-job-tasks__title {
max-width: 720px;
}
.sph-job-tasks__intro {
max-width: 820px;
}
}
@media (max-width: 767px) {
.sph-job-tasks__inner {
gap: 32px;
}
.sph-job-tasks__eyebrow {
margin-bottom: 20px;
}
.sph-job-tasks__intro {
margin-bottom: 26px;
}
.sph-job-tasks__list li {
padding: 16px 0 16px 40px;
}
.sph-job-tasks__list li::before {
width: 20px;
height: 20px;
}
}
@media (max-width: 576px) {
.sph-job-tasks__inner {
gap: 28px;
}
.sph-job-tasks__eyebrow {
margin-bottom: 16px;
}
.sph-job-tasks__intro {
margin-bottom: 24px;
}
.sph-job-tasks__list li {
padding: 15px 0 15px 36px;
}
.sph-job-tasks__list li::before {
width: 18px;
height: 18px;
}
}
/* =========================================================
SPH JOB DETAIL – IDEALERWEISE BRINGST DU MIT
========================================================= */
.sph-job-profile {
background-color: var(--sph-white, #FFFFFF);
}
.sph-job-profile__inner {
align-items: flex-start;
gap: 96px;
}
.sph-job-profile__lead,
.sph-job-profile__body,
.sph-job-profile__plus {
min-width: 0;
align-items: flex-start;
}
.sph-job-profile__eyebrow {
width: 100%;
margin: 0 0 24px;
}
.sph-job-profile__title {
width: 100%;
max-width: 620px;
margin: 0;
}
.sph-job-profile__intro {
width: 100%;
max-width: 860px;
margin: 0 0 34px;
}
.sph-job-profile__intro p {
margin: 0;
}
.sph-job-profile__intro p + p {
margin-top: 24px;
}
.sph-job-profile__list {
width: 100%;
margin: 0 0 48px;
}
.sph-job-profile__list ul,
.sph-job-profile__plus-list ul {
width: 100%;
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid rgba(24, 56, 88, 0.16);
}
.sph-job-profile__list li,
.sph-job-profile__plus-list li {
position: relative;
margin: 0;
padding: 18px 0 18px 46px;
border-bottom: 1px solid rgba(24, 56, 88, 0.16);
}
.sph-job-profile__list li::before,
.sph-job-profile__plus-list li::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 22px;
height: 22px;
background-color: var(--sph-orange, #FE6901);
-webkit-mask-image: url("https://sph-ag.com/wp-content/uploads/2024/05/fast-forward.svg");
mask-image: url("https://sph-ag.com/wp-content/uploads/2024/05/fast-forward.svg");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
transform: translateY(-50%);
}
.sph-job-profile__list li p,
.sph-job-profile__plus-list li p {
margin: 0;
}
.sph-job-profile__plus {
width: 100%;
margin: 0 0 40px;
padding: 40px 44px 42px;
background-color: rgba(24, 56, 88, 0.07);
}
.sph-job-profile__plus-icon {
width: 100%;
margin: 0 0 14px;
}
.sph-job-profile__plus-icon p {
margin: 0;
font-family: "Overpass", sans-serif;
font-size: 2.5rem;
line-height: 0.8;
font-weight: 700;
color: var(--sph-orange, #FE6901);
}
.sph-job-profile__plus-title {
width: 100%;
margin: 0 0 20px;
}
.sph-job-profile__plus-intro {
width: 100%;
margin: 0 0 22px;
}
.sph-job-profile__plus-intro p {
margin: 0;
}
.sph-job-profile__plus-list {
width: 100%;
margin: 0;
}
.sph-job-profile__plus-list li {
padding-top: 14px;
padding-bottom: 14px;
}
.sph-job-profile__plus-list li::before {
width: 19px;
height: 19px;
}
.sph-job-profile__closing {
width: 100%;
max-width: 860px;
margin: 0;
}
.sph-job-profile__closing p {
margin: 0;
}
.sph-job-profile__closing p + p {
margin-top: 26px;
}
.sph-job-profile__closing p:nth-child(2) {
font-size: clamp(1.15rem, 0.35vw + 1.05rem, 1.4rem);
line-height: 1.35;
color: var(--sph-dark-blue, #183858);
}
@media (max-width: 1399px) {
.sph-job-profile__inner {
gap: 72px;
}
}
@media (max-width: 1199px) {
.sph-job-profile__inner {
gap: 48px;
}
.sph-job-profile__intro {
margin-bottom: 30px;
}
.sph-job-profile__list {
margin-bottom: 40px;
}
.sph-job-profile__list li {
padding-top: 16px;
padding-bottom: 16px;
}
.sph-job-profile__plus {
margin-bottom: 36px;
padding: 36px 38px 38px;
}
}
@media (max-width: 991px) {
.sph-job-profile__inner {
gap: 40px;
}
.sph-job-profile__title {
max-width: 720px;
}
.sph-job-profile__intro,
.sph-job-profile__closing {
max-width: 820px;
}
}
@media (max-width: 767px) {
.sph-job-profile__inner {
gap: 32px;
}
.sph-job-profile__eyebrow {
margin-bottom: 20px;
}
.sph-job-profile__intro {
margin-bottom: 26px;
}
.sph-job-profile__intro p + p {
margin-top: 20px;
}
.sph-job-profile__list {
margin-bottom: 32px;
}
.sph-job-profile__list li,
.sph-job-profile__plus-list li {
padding: 16px 0 16px 40px;
}
.sph-job-profile__list li::before,
.sph-job-profile__plus-list li::before {
width: 20px;
height: 20px;
}
.sph-job-profile__plus {
margin-bottom: 32px;
padding: 30px 28px 32px;
}
.sph-job-profile__closing p + p {
margin-top: 22px;
}
}
@media (max-width: 576px) {
.sph-job-profile__inner {
gap: 28px;
}
.sph-job-profile__eyebrow {
margin-bottom: 16px;
}
.sph-job-profile__intro {
margin-bottom: 24px;
}
.sph-job-profile__list {
margin-bottom: 28px;
}
.sph-job-profile__list li,
.sph-job-profile__plus-list li {
padding: 15px 0 15px 36px;
}
.sph-job-profile__list li::before,
.sph-job-profile__plus-list li::before {
width: 18px;
height: 18px;
}
.sph-job-profile__plus {
margin-bottom: 28px;
padding: 26px 22px 28px;
}
.sph-job-profile__plus-icon {
margin-bottom: 12px;
}
.sph-job-profile__plus-title {
margin-bottom: 18px;
}
.sph-job-profile__plus-intro {
margin-bottom: 18px;
}
.sph-job-profile__closing p + p {
margin-top: 20px;
}
}
/* =========================================================
COMPONENT: HOMEPAGE HERO
========================================================= */
/* ---------------------------------------------------------
HERO
Homepage-Sonderlösung:
- volle Viewportbreite
- läuft hinter die Navigation
- großflächiges Hintergrundmotiv
- Content orientiert sich am sph-container
--------------------------------------------------------- */
.sph-home-hero {
position: relative;
width: 100%;
min-height: 100svh;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden;
background-color: #0e2f4a;
background-image:
linear-gradient(
90deg,
rgba(14, 47, 74, 0.98) 0%,
rgba(14, 47, 74, 0.94) 24%,
rgba(14, 47, 74, 0.80) 42%,
rgba(14, 47, 74, 0.40) 60%,
rgba(14, 47, 74, 0.08) 78%,
rgba(14, 47, 74, 0.00) 100%
),
url("https://sph-ag.com/wp-content/uploads/2026/10/Homepage-Hero.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
/* ---------------------------------------------------------
INNER CONTAINER
--------------------------------------------------------- */
.sph-home-hero__inner {
position: relative;
z-index: 2;
min-height: 100svh;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important;
padding-top: 140px !important;
padding-bottom: 80px !important;
box-sizing: border-box;
}
/* ---------------------------------------------------------
CONTENT
--------------------------------------------------------- */
.sph-home-hero__content {
width: 58% !important;
max-width: 920px !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
/* ---------------------------------------------------------
EYEBROW
--------------------------------------------------------- */
.sph-home-hero__eyebrow {
width: 100%;
margin: 0 0 24px !important;
}
.sph-home-hero__eyebrow p {
margin: 0 !important;
color: var(--sph-turquoise, #00CFB4) !important;
}
/* ---------------------------------------------------------
H1
--------------------------------------------------------- */
.sph-home-hero__title {
width: 100%;
margin: 0 0 32px !important;
}
.sph-home-hero__title h1 {
margin: 0 !important;
color: var(--sph-white, #FFFFFF) !important;
font-size:
clamp(
3.25rem,
4.7vw,
6.5rem
) !important;
line-height: 0.98 !important;
letter-spacing: -0.025em;
hyphens: none;
-webkit-hyphens: none;
word-break: normal;
overflow-wrap: normal;
}
/* ---------------------------------------------------------
COPY
--------------------------------------------------------- */
.sph-home-hero__copy {
width: 100%;
max-width: 760px;
margin: 0 0 36px !important;
}
.sph-home-hero__copy p {
margin: 0 !important;
color: var(--sph-white, #FFFFFF) !important;
}
.sph-home-hero__copy p + p {
margin-top: 0.8em !important;
}
/* ---------------------------------------------------------
BUTTON
Das vollständige Button-Design kommt aus dem
globalen SPH Button-System.
Hier werden ausschließlich hero-spezifische
Layout-Eigenschaften definiert.
--------------------------------------------------------- */
.sph-home-hero__button {
margin: 0 !important;
}
/* =========================================================
LAPTOP
<= 1399px
========================================================= */
@media (max-width: 1399px) {
.sph-home-hero {
background-position: 58% center;
}
.sph-home-hero__inner {
padding-top: 120px !important;
padding-bottom: 64px !important;
}
.sph-home-hero__content {
width: 60% !important;
max-width: 800px !important;
}
.sph-home-hero__title h1 {
font-size:
clamp(
3rem,
4.6vw,
5.25rem
) !important;
}
}
/* =========================================================
TABLET LANDSCAPE
<= 1199px
========================================================= */
@media (max-width: 1199px) {
.sph-home-hero {
min-height: 820px;
background-image:
linear-gradient(
90deg,
rgba(14, 47, 74, 0.98) 0%,
rgba(14, 47, 74, 0.94) 30%,
rgba(14, 47, 74, 0.78) 50%,
rgba(14, 47, 74, 0.30) 72%,
rgba(14, 47, 74, 0.05) 100%
),
url("https://sph-ag.com/wp-content/uploads/2026/10/Homepage-Hero.png");
background-position: 62% center;
}
.sph-home-hero__inner {
min-height: 820px;
padding-top: 112px !important;
padding-bottom: 56px !important;
}
.sph-home-hero__content {
width: 62% !important;
max-width: 700px !important;
}
.sph-home-hero__title {
margin-bottom: 28px !important;
}
.sph-home-hero__copy {
max-width: 620px;
margin-bottom: 32px !important;
}
}
/* =========================================================
TABLET PORTRAIT
<= 991px
Bild bleibt vollflächig.
Gradient wird stärker und vertikaler.
========================================================= */
@media (max-width: 991px) {
.sph-home-hero {
min-height: 100svh;
justify-content: flex-end !important;
background-image:
linear-gradient(
0deg,
rgba(14, 47, 74, 1.00) 0%,
rgba(14, 47, 74, 0.98) 26%,
rgba(14, 47, 74, 0.86) 48%,
rgba(14, 47, 74, 0.35) 72%,
rgba(14, 47, 74, 0.08) 100%
),
url("https://sph-ag.com/wp-content/uploads/2026/10/Homepage-Hero.png");
background-position: 68% center;
}
.sph-home-hero__inner {
min-height: 100svh;
justify-content: flex-end !important;
padding-top: 120px !important;
padding-bottom: 64px !important;
}
.sph-home-hero__content {
width: 100% !important;
max-width: 720px !important;
}
.sph-home-hero__eyebrow {
margin-bottom: 20px !important;
}
.sph-home-hero__title {
margin-bottom: 26px !important;
}
.sph-home-hero__title h1 {
font-size:
clamp(
2.75rem,
7vw,
4.5rem
) !important;
}
.sph-home-hero__copy {
max-width: 640px;
}
}
/* =========================================================
MOBILE LANDSCAPE
<= 767px
========================================================= */
@media (max-width: 767px) {
.sph-home-hero {
background-position: 66% center;
}
.sph-home-hero__inner {
padding-top: 104px !important;
padding-bottom: 48px !important;
}
.sph-home-hero__content {
max-width: 620px !important;
}
.sph-home-hero__title {
margin-bottom: 24px !important;
}
.sph-home-hero__title h1 {
font-size:
clamp(
2.5rem,
8.5vw,
3.75rem
) !important;
line-height: 1 !important;
}
.sph-home-hero__copy {
margin-bottom: 28px !important;
}
}
/* =========================================================
MOBILE PORTRAIT
<= 576px
========================================================= */
@media (max-width: 576px) {
.sph-home-hero {
min-height: 100svh;
background-image:
linear-gradient(
0deg,
rgba(14, 47, 74, 1.00) 0%,
rgba(14, 47, 74, 1.00) 30%,
rgba(14, 47, 74, 0.90) 50%,
rgba(14, 47, 74, 0.40) 72%,
rgba(14, 47, 74, 0.10) 100%
),
url("https://sph-ag.com/wp-content/uploads/2026/10/Homepage-Hero.png");
background-position: 66% center;
}
.sph-home-hero__inner {
min-height: 100svh;
padding-top: 96px !important;
padding-bottom: 36px !important;
}
.sph-home-hero__eyebrow {
margin-bottom: 16px !important;
}
.sph-home-hero__title {
margin-bottom: 22px !important;
}
.sph-home-hero__title h1 {
font-size:
clamp(
2.25rem,
10.5vw,
3.25rem
) !important;
line-height: 1.02 !important;
letter-spacing: -0.02em;
}
.sph-home-hero__copy {
max-width: 100%;
margin-bottom: 26px !important;
}
.sph-home-hero__copy p {
font-size: 1.05rem !important;
line-height: 1.5 !important;
}
.sph-home-hero__button .elementor-button {
min-height: 48px;
padding: 13px 18px !important;
font-size: 0.8rem;
}
}
/* =========================================================
HOMEPAGE HEADER OVERLAY
========================================================= */
body.page-id-48773 #header_pop {
position: absolute !important;
top: 0;
left: 0;
width: 100% !important;
z-index: 1000;
background: transparent !important;
}
/* =========================================================
HOMEPAGE HERO TITLE
Basis:
sph-home-title = globale Homepage-H1
Hero Modifier:
- weiße Schrift
- begrenzte Textbreite
- keine eigene Font-Family
- keine eigene Font-Size
========================================================= */
.sph-home-hero__title {
max-width: 900px;
}
.sph-home-hero__title h1 {
color: var(--sph-white) !important;
font-family: Good-Times !important;
font-size: clamp(
3.25rem,
4.25vw,
5.5rem
) !important;
line-height: 1.02 !important;
font-weight: 600 !important;
margin: 0 !important;
hyphens: none;
-webkit-hyphens: none;
word-break: normal;
overflow-wrap: normal;
}
/* =========================================================
HOMEPAGE HERO COPY
========================================================= */
.sph-home-hero__copy p {
font-size: clamp(
1.25rem,
1.15vw,
1.625rem
) !important;
line-height: 1.5 !important;
color: var(--sph-white) !important;
hyphens: none;
}
/* =========================================================
HEADER ÜBER HERO
========================================================= */
/* =========================================================
HEADER OVERLAY – NUR HOMEPAGE
WICHTIG:
Der Header darf auf normalen Unterseiten NICHT absolut
positioniert sein, da er sonst aus dem Dokumentfluss fällt
und der erste Seiteninhalt unter die Navigation rutscht.
========================================================= */
body.page-id-48773 header.elementor-location-header {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1000 !important;
margin: 0 !important;
}
/* =========================================================
HOMEPAGE – 03 AUSGANGSSITUATIONEN V3
========================================================= */
.sph-home-situations {
background-color: var(--sph-beige);
}
.sph-home-situations__inner {
width: 100%;
}
/* =========================================================
INTRO
========================================================= */
.sph-home-situations__intro {
width: 100%;
max-width: 980px;
margin-bottom: 64px;
}
.sph-home-situations__title {
width: 100%;
max-width: 900px;
margin: 0;
}
.sph-home-situations__lead {
width: 100%;
max-width: 820px;
margin: 0;
}
/* =========================================================
GRID
========================================================= */
.sph-home-situations__grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
gap: 0 !important;
border-top:
1px solid rgba(24, 56, 88, 0.22);
}
/* =========================================================
ITEM
========================================================= */
.sph-home-situations__item {
position: relative;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
min-width: 0;
min-height: 310px;
padding:
44px 44px 36px 200px !important;
overflow: hidden;
box-sizing: border-box;
background-color:
#ffffff;
border-bottom:
1px solid rgba(24, 56, 88, 0.22);
cursor: pointer;
transition:
background-color 0.3s ease;
}
.sph-home-situations__item:nth-child(odd) {
border-right:
1px solid rgba(24, 56, 88, 0.22);
}
/* =========================================================
NUMBER 01–04
Die Nummer ist ein echtes Hintergrundelement.
Sie beansprucht keine eigene Layoutspalte.
========================================================= */
.sph-home-situations__number {
position: absolute !important;
z-index: 0;
top: 48px;
left: 44px;
width: auto !important;
margin: 0 !important;
pointer-events: none;
user-select: none;
}
.sph-home-situations__number p {
margin: 0 !important;
font-family:
Good-Times !important;
font-size:
clamp(6.5rem, 8vw, 10rem) !important;
line-height:
0.82 !important;
font-weight:
600 !important;
color:
rgba(0, 207, 180, 0.14) !important;
white-space:
nowrap;
transition:
color 0.3s ease,
transform 0.3s ease;
}
/* =========================================================
CONTENT
========================================================= */
.sph-home-situations__body {
position: relative;
z-index: 2;
width: 100% !important;
max-width: none !important;
min-width: 0;
margin: 0 !important;
/*
* Der eigentliche Card-Link liegt darüber.
* Inhalte bleiben rein visuell.
*/
pointer-events: none;
}
.sph-home-situations__item-title {
width: 100% !important;
max-width: none !important;
min-width: 0;
margin: 0 !important;
}
.sph-home-situations__item-title
:is(h2, h3, h4) {
width: 100%;
max-width: none;
margin: 0 !important;
hyphens: none;
-webkit-hyphens: none;
word-break: normal;
overflow-wrap: normal;
transition:
color 0.3s ease;
}
.sph-home-situations__item-copy {
width: 100%;
max-width: 520px;
margin: 0 !important;
}
.sph-home-situations__item-copy p {
transition:
color 0.3s ease;
}
/* =========================================================
CARD LINK
Der bereits vorhandene sph-teaser-link wird über die
komplette Card gespannt.
Dadurch bleibt ein echtes -Element erhalten.
========================================================= */
.sph-home-situations__link {
position: static !important;
z-index: auto;
align-self: auto;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: none;
}
.sph-home-situations__link
.elementor-widget-container {
position: static !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: none;
}
.sph-home-situations__item
.sph-teaser-link {
position: absolute !important;
z-index: 10;
inset: 0;
display: block;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-decoration: none !important;
cursor: pointer;
pointer-events: auto;
}
/* =========================================================
FAST-FORWARD
Das ::after gehört zum vollflächigen Link,
wird aber weiterhin unten rechts positioniert.
========================================================= */
.sph-home-situations__item
.sph-teaser-link::after {
content: "";
position: absolute;
right: 44px;
bottom: 36px;
width: 30px;
height: 30px;
background-color:
var(--sph-orange);
-webkit-mask-image:
url("https://sph-ag.com/wp-content/uploads/2024/05/fast-forward.svg");
mask-image:
url("https://sph-ag.com/wp-content/uploads/2024/05/fast-forward.svg");
-webkit-mask-repeat:
no-repeat;
mask-repeat:
no-repeat;
-webkit-mask-position:
center;
mask-position:
center;
-webkit-mask-size:
contain;
mask-size:
contain;
transform:
translateX(0);
transition:
transform 0.3s ease;
pointer-events: none;
}
/* =========================================================
HOVER
========================================================= */
@media (hover: hover) and (pointer: fine) {
.sph-home-situations__item:hover {
background-color:
var(--sph-blue-dark);
}
.sph-home-situations__item:hover
.sph-home-situations__number p {
color:
rgba(0, 207, 180, 0.52) !important;
transform:
translateX(6px);
}
.sph-home-situations__item:hover
.sph-home-situations__item-title
:is(h2, h3, h4),
.sph-home-situations__item:hover
.sph-home-situations__item-copy p {
color:
var(--sph-white) !important;
}
.sph-home-situations__item:hover
.sph-teaser-link::after {
transform:
translateX(6px);
}
}
/* =========================================================
KEYBOARD FOCUS
Der echte Link erhält den Fokus.
========================================================= */
.sph-home-situations__item:focus-within {
background-color:
var(--sph-blue-dark);
}
.sph-home-situations__item:focus-within
.sph-home-situations__number p {
color:
rgba(0, 207, 180, 0.52) !important;
}
.sph-home-situations__item:focus-within
.sph-home-situations__item-title
:is(h2, h3, h4),
.sph-home-situations__item:focus-within
.sph-home-situations__item-copy p {
color:
var(--sph-white) !important;
}
.sph-home-situations__item
.sph-teaser-link:focus {
outline:
none;
}
.sph-home-situations__item
.sph-teaser-link:focus-visible {
outline:
3px solid var(--sph-turquoise);
outline-offset:
-3px;
}
/* =========================================================
<= 1399px
========================================================= */
@media (max-width: 1399px) {
.sph-home-situations__intro {
margin-bottom:
56px;
}
.sph-home-situations__item {
min-height:
300px;
padding:
40px 36px 32px 170px !important;
}
.sph-home-situations__number {
top:
44px;
left:
36px;
}
.sph-home-situations__number p {
font-size:
clamp(6rem, 8vw, 8.5rem) !important;
}
.sph-home-situations__item
.sph-teaser-link::after {
right:
36px;
bottom:
32px;
}
}
/* =========================================================
<= 1199px
========================================================= */
@media (max-width: 1199px) {
.sph-home-situations__intro {
margin-bottom:
48px;
}
.sph-home-situations__item {
min-height:
290px;
padding:
36px 32px 30px 140px !important;
}
.sph-home-situations__number {
top:
40px;
left:
32px;
}
.sph-home-situations__number p {
font-size:
6rem !important;
}
.sph-home-situations__item
.sph-teaser-link::after {
right:
32px;
bottom:
30px;
}
}
/* =========================================================
<= 991px
========================================================= */
@media (max-width: 991px) {
.sph-home-situations__intro {
max-width:
760px;
margin-bottom:
40px;
}
.sph-home-situations__grid {
grid-template-columns:
1fr;
}
.sph-home-situations__item:nth-child(odd) {
border-right:
0;
}
.sph-home-situations__item {
min-height:
0;
padding:
36px 32px 32px 150px !important;
}
.sph-home-situations__number {
top:
40px;
left:
32px;
}
.sph-home-situations__number p {
font-size:
5.5rem !important;
}
.sph-home-situations__item-copy {
max-width:
620px;
}
.sph-home-situations__item
.sph-teaser-link::after {
right:
32px;
bottom:
32px;
}
}
/* =========================================================
<= 767px
========================================================= */
@media (max-width: 767px) {
.sph-home-situations__intro {
margin-bottom:
32px;
}
.sph-home-situations__item {
padding:
30px 24px 28px 112px !important;
}
.sph-home-situations__number {
top:
34px;
left:
24px;
}
.sph-home-situations__number p {
font-size:
4rem !important;
}
.sph-home-situations__item
.sph-teaser-link::after {
right:
24px;
bottom:
28px;
width:
30px;
height:
30px;
}
}
/* =========================================================
<= 576px
========================================================= */
@media (max-width: 576px) {
.sph-home-situations__item {
padding:
28px 20px 26px 88px !important;
}
.sph-home-situations__number {
top:
31px;
left:
20px;
}
.sph-home-situations__number p {
font-size:
3.25rem !important;
}
.sph-home-situations__item-title
:is(h2, h3, h4) {
overflow-wrap:
break-word;
}
.sph-home-situations__item
.sph-teaser-link::after {
right:
20px;
bottom:
26px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.sph-home-situations__item,
.sph-home-situations__number p,
.sph-home-situations__item-title
:is(h2, h3, h4),
.sph-home-situations__item-copy p,
.sph-teaser-link::after {
transition:
none !important;
}
.sph-home-situations__item:hover
.sph-home-situations__number p,
.sph-home-situations__item:hover
.sph-teaser-link::after {
transform:
none;
}
}
/* =========================================================
HOMEPAGE – 04 LÖSUNGEN
========================================================= */
.sph-home-solutions {
position: relative;
overflow: hidden;
isolation: isolate;
background-color: var(--sph-blue-dark);
}
/* =========================================================
STATISCHE PROZESSGRAFIK
========================================================= */
.sph-home-solutions::before {
content: "";
position: absolute;
z-index: 0;
top: 50%;
left: 0;
width: clamp(520px, 43vw, 860px);
height: min(88%, 680px);
transform: translateY(-50%);
pointer-events: none;
opacity: 0.76;
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 650' fill='none'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-40 92H185C225 92 246 107 263 139L301 211C314 236 334 248 364 248H478C510 248 528 262 547 287L590 344C608 368 630 378 661 378H870' stroke='%2300cfb4' stroke-width='2.2' opacity='.56'/%3E%3Cpath d='M-40 171H143C178 171 196 183 211 208L250 272C264 295 282 306 311 306H405C436 306 454 291 470 267L507 211C523 187 542 176 572 176H760' stroke='%2300cfb4' stroke-width='1.7' opacity='.38'/%3E%3Cpath d='M-40 284H129C158 284 177 297 194 320L233 373C249 395 269 406 298 406H389C419 406 438 418 455 441L494 493C512 517 534 528 566 528H824' stroke='%2300cfb4' stroke-width='2' opacity='.48'/%3E%3Cpath d='M-40 410H118C151 410 171 397 189 373L230 318C247 295 267 284 297 284H375C408 284 427 297 444 323L483 382C500 408 521 421 553 421H678C706 421 724 409 741 388L774 347C791 326 810 316 840 316H920' stroke='%2300cfb4' stroke-width='2.3' opacity='.62'/%3E%3Cpath d='M-40 516H86C119 516 138 502 154 478L194 419C210 395 229 384 259 384H340C372 384 390 369 406 345L442 291C459 265 479 253 511 253H614' stroke='%2300cfb4' stroke-width='1.6' opacity='.34'/%3E%3Cpath d='M-40 579H116C148 579 169 568 186 544L228 486C244 464 264 453 293 453H385C417 453 436 467 452 491L487 543C504 568 525 580 557 580H756' stroke='%2300cfb4' stroke-width='1.5' opacity='.3'/%3E%3Cpath d='M-20 132H110C151 132 176 151 191 188L228 279C240 309 259 323 292 323H355C386 323 405 335 421 358L458 411C475 435 495 447 526 447H644' stroke='%23ffffff' stroke-width='1' stroke-dasharray='7 11' opacity='.13'/%3E%3Cpath d='M-20 620H88C126 620 149 604 165 570L200 496C214 467 235 453 268 453H349C382 453 403 439 420 412L457 353C473 327 494 315 526 315H702' stroke='%23ffffff' stroke-width='1' stroke-dasharray='7 11' opacity='.1'/%3E%3C/g%3E%3Cg fill='%2300cfb4'%3E%3Ccircle cx='185' cy='92' r='5' opacity='.56'/%3E%3Ccircle cx='250' cy='272' r='7' opacity='.72'/%3E%3Ccircle cx='301' cy='211' r='11' opacity='.95'/%3E%3Ccircle cx='311' cy='306' r='5' opacity='.52'/%3E%3Ccircle cx='233' cy='373' r='6' opacity='.64'/%3E%3Ccircle cx='298' cy='406' r='10' opacity='.88'/%3E%3Ccircle cx='297' cy='284' r='5' opacity='.48'/%3E%3Ccircle cx='389' cy='406' r='5' opacity='.55'/%3E%3Ccircle cx='444' cy='323' r='7' opacity='.68'/%3E%3Ccircle cx='478' cy='248' r='5' opacity='.48'/%3E%3Ccircle cx='511' cy='253' r='8' opacity='.7'/%3E%3Ccircle cx='553' cy='421' r='11' opacity='.96'/%3E%3Ccircle cx='566' cy='528' r='5' opacity='.5'/%3E%3Ccircle cx='661' cy='378' r='7' opacity='.72'/%3E%3Ccircle cx='741' cy='388' r='5' opacity='.48'/%3E%3C/g%3E%3Cg fill='none' stroke='%2300cfb4'%3E%3Ccircle cx='301' cy='211' r='22' stroke-width='1.5' opacity='.25'/%3E%3Ccircle cx='298' cy='406' r='20' stroke-width='1.5' opacity='.22'/%3E%3Ccircle cx='553' cy='421' r='23' stroke-width='1.5' opacity='.26'/%3E%3C/g%3E%3C/svg%3E");
}
/* =========================================================
ÜBERGANG ZUM CONTENT
========================================================= */
.sph-home-solutions::after {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 56%;
height: 100%;
pointer-events: none;
background:
linear-gradient(
90deg,
rgba(14, 47, 74, 0) 0%,
rgba(14, 47, 74, 0) 58%,
rgba(14, 47, 74, 0.55) 82%,
var(--sph-blue-dark) 100%
);
}
/* =========================================================
INNER
========================================================= */
.sph-home-solutions__inner {
position: relative;
z-index: 2;
}
/* =========================================================
SPLIT
========================================================= */
.sph-home-solutions__split {
position: relative;
z-index: 2;
display: flex !important;
align-items: center !important;
gap: clamp(64px, 7vw, 120px) !important;
}
/* =========================================================
INTRO
========================================================= */
.sph-home-solutions__intro {
position: relative;
z-index: 3;
flex: 0 0 42% !important;
width: 42% !important;
max-width: 620px !important;
}
.sph-home-solutions__eyebrow {
margin: 0 !important;
}
.sph-home-solutions__title {
margin: 0 !important;
}
.sph-home-solutions__copy {
max-width: 590px;
}
/* =========================================================
BUTTON
========================================================= */
.sph-home-solutions__button {
margin: 8px 0 0 !important;
}
/* =========================================================
LISTE
========================================================= */
.sph-home-solutions__list {
position: relative;
z-index: 3;
flex: 1 1 auto !important;
min-width: 0;
gap: 0 !important;
row-gap: 0 !important;
column-gap: 0 !important;
margin: 0 !important;
padding: 0 !important;
border-top:
1px solid rgba(255, 255, 255, 0.16);
}
/* =========================================================
EINZELNE LÖSUNG
========================================================= */
.sph-home-solutions__item {
position: relative;
display: grid !important;
grid-template-columns:
96px minmax(0, 1fr) 52px;
align-items: center !important;
min-width: 0;
min-height: 154px;
margin: 0 !important;
padding:
26px 20px !important;
gap: 0 !important;
row-gap: 0 !important;
column-gap: 0 !important;
border-bottom:
1px solid rgba(255, 255, 255, 0.16);
overflow: hidden;
box-sizing: border-box;
cursor: pointer;
transition:
background-color 0.28s ease;
}
/* =========================================================
ICON-BEREICH
========================================================= */
.sph-home-solutions__marker {
position: relative;
z-index: 2;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: 100% !important;
height: auto !important;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
gap: 0px !important;
pointer-events: none;
}
/*
* Gemeinsame Iconfläche.
*/
.sph-home-solutions__marker-shape {
display: block;
width: 54px;
height: 54px;
flex: 0 0 54px;
margin: 0 !important;
padding: 0 !important;
background-color:
var(--sph-white) !important;
transform:
none !important;
transition:
none !important;
-webkit-mask-repeat:
no-repeat;
mask-repeat:
no-repeat;
-webkit-mask-position:
center;
mask-position:
center;
-webkit-mask-size:
contain;
mask-size:
contain;
}
/* =========================================================
ICON 01 – IN:FASHION
Fashion / Kleiderbügel
========================================================= */
.sph-solution--fashion
.sph-home-solutions__marker-shape {
-webkit-mask-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0-2.5 1.8-4.5 4.2-4.5 2.3 0 4.1 1.7 4.1 4 0 2.2-1.3 3.4-3.3 4.6l-1 0.6v3.1'/%3E%3Cpath d='M24 20.8 7.5 33.5c-1.4 1.1-.6 3.3 1.2 3.3h30.6c1.8 0 2.6-2.2 1.2-3.3L24 20.8Z'/%3E%3C/g%3E%3C/svg%3E");
mask-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0-2.5 1.8-4.5 4.2-4.5 2.3 0 4.1 1.7 4.1 4 0 2.2-1.3 3.4-3.3 4.6l-1 0.6v3.1'/%3E%3Cpath d='M24 20.8 7.5 33.5c-1.4 1.1-.6 3.3 1.2 3.3h30.6c1.8 0 2.6-2.2 1.2-3.3L24 20.8Z'/%3E%3C/g%3E%3C/svg%3E");
}
/* =========================================================
ICON 02 – IN:OMNICHANNEL
========================================================= */
.sph-solution--omnichannel
.sph-home-solutions__marker-shape {
-webkit-mask-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='14' r='4'/%3E%3Ccircle cx='36' cy='12' r='4'/%3E%3Ccircle cx='37' cy='35' r='4'/%3E%3Ccircle cx='13' cy='36' r='4'/%3E%3Ccircle cx='24' cy='24' r='5'/%3E%3Cpath d='m15.5 16 4.5 5M32.5 15l-5 5M28 27l5.5 5M20.5 28 16 33'/%3E%3C/g%3E%3C/svg%3E");
mask-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='14' r='4'/%3E%3Ccircle cx='36' cy='12' r='4'/%3E%3Ccircle cx='37' cy='35' r='4'/%3E%3Ccircle cx='13' cy='36' r='4'/%3E%3Ccircle cx='24' cy='24' r='5'/%3E%3Cpath d='m15.5 16 4.5 5M32.5 15l-5 5M28 27l5.5 5M20.5 28 16 33'/%3E%3C/g%3E%3C/svg%3E");
}
/* =========================================================
ICON 03 – IN:FINANCE
========================================================= */
.sph-solution--finance
.sph-home-solutions__marker-shape {
-webkit-mask-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 7h19l7 7v27H11V7Z'/%3E%3Cpath d='M30 7v8h7M17 33v-7M24 33V18M31 33v-11M16 36h16'/%3E%3C/g%3E%3C/svg%3E");
mask-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 7h19l7 7v27H11V7Z'/%3E%3Cpath d='M30 7v8h7M17 33v-7M24 33V18M31 33v-11M16 36h16'/%3E%3C/g%3E%3C/svg%3E");
}
/* =========================================================
ICON 04 – AI:REPLENISH
========================================================= */
.sph-solution--replenish
.sph-home-solutions__marker-shape {
-webkit-mask-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 17 24 12l10 5v11l-10 5-10-5V17Z'/%3E%3Cpath d='m14 17 10 5 10-5M24 22v11'/%3E%3Cpath d='M9 17a17 17 0 0 1 27-8M39 31a17 17 0 0 1-27 8'/%3E%3Cpath d='m32 7 5 1-1 5M16 41l-5-1 1-5'/%3E%3C/g%3E%3C/svg%3E");
mask-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 17 24 12l10 5v11l-10 5-10-5V17Z'/%3E%3Cpath d='m14 17 10 5 10-5M24 22v11'/%3E%3Cpath d='M9 17a17 17 0 0 1 27-8M39 31a17 17 0 0 1-27 8'/%3E%3Cpath d='m32 7 5 1-1 5M16 41l-5-1 1-5'/%3E%3C/g%3E%3C/svg%3E");
}
/* =========================================================
CONTENT
========================================================= */
.sph-home-solutions__body {
position: relative;
z-index: 2;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
gap: 10px !important;
pointer-events: none;
}
.sph-home-solutions__item-title {
min-width: 0;
margin: 0 !important;
}
.sph-home-solutions__item-title
:is(h1, h2, h3, h4, h5, h6) {
margin: 0 !important;
overflow-wrap: normal;
word-break: normal;
hyphens: none;
-webkit-hyphens: none;
}
.sph-home-solutions__item-copy {
min-width: 0;
margin: 0 !important;
}
.sph-home-solutions__item-copy p {
margin: 0 !important;
}
/* =========================================================
LINK
========================================================= */
.sph-home-solutions__link {
position: static !important;
z-index: auto;
display: block;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: none;
}
.sph-home-solutions__link
.elementor-widget-container {
position: static !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: none;
}
/*
* Echter Link über die gesamte Lösungszeile.
*/
.sph-home-solutions__row-link {
position: absolute !important;
z-index: 10;
inset: 0;
display: block;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 0;
text-decoration: none;
cursor: pointer;
pointer-events: auto;
}
/* =========================================================
FAST-FORWARD
========================================================= */
.sph-home-solutions__row-link::before {
content: "";
position: absolute;
top: 50%;
right: 20px;
width: 26px;
height: 26px;
background-color:
var(--sph-orange);
-webkit-mask-image:
url("https://sph-ag.com/wp-content/uploads/2024/05/fast-forward.svg");
mask-image:
url("https://sph-ag.com/wp-content/uploads/2024/05/fast-forward.svg");
-webkit-mask-repeat:
no-repeat;
mask-repeat:
no-repeat;
-webkit-mask-position:
center;
mask-position:
center;
-webkit-mask-size:
contain;
mask-size:
contain;
transform:
translate(0, -50%);
transition:
transform 0.28s ease;
pointer-events: none;
}
/*
* Alte künstliche Linkvergrößerung deaktivieren.
*/
.sph-home-solutions__row-link::after {
content: none !important;
display: none !important;
}
/* =========================================================
HOVER
========================================================= */
@media (hover: hover) and (pointer: fine) {
.sph-home-solutions__item:hover {
background-color:
rgba(30, 78, 115, 0.72);
}
/*
* Icon bleibt IMMER weiß.
*/
.sph-home-solutions__item:hover
.sph-home-solutions__marker-shape {
background-color:
var(--sph-white) !important;
transform:
none !important;
}
/*
* Nur der orange Fast-Forward bewegt sich.
*/
.sph-home-solutions__item:hover
.sph-home-solutions__row-link::before {
transform:
translate(6px, -50%);
}
}
/* =========================================================
KEYBOARD FOCUS
========================================================= */
.sph-home-solutions__item:focus-within {
background-color:
rgba(30, 78, 115, 0.72);
}
.sph-home-solutions__item:focus-within
.sph-home-solutions__marker-shape {
background-color:
var(--sph-white) !important;
transform:
none !important;
}
.sph-home-solutions__row-link:focus {
outline: none;
}
.sph-home-solutions__row-link:focus-visible {
outline:
2px solid var(--sph-turquoise);
outline-offset:
-2px;
}
/* =========================================================
SCREENREADER
========================================================= */
.sph-sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip:
rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* =========================================================
<= 1399px
========================================================= */
@media (max-width: 1399px) {
.sph-home-solutions::before {
width:
clamp(500px, 42vw, 720px);
opacity:
0.68;
}
.sph-home-solutions__split {
gap:
80px !important;
}
.sph-home-solutions__item {
grid-template-columns:
88px minmax(0, 1fr) 48px;
min-height:
148px;
margin:
0 !important;
padding:
24px 16px !important;
}
.sph-home-solutions__marker-shape {
width:
50px;
height:
50px;
flex-basis:
50px;
}
.sph-home-solutions__row-link::before {
right:
16px;
}
}
/* =========================================================
<= 1199px
========================================================= */
@media (max-width: 1199px) {
.sph-home-solutions::before {
width:
580px;
left:
-100px;
opacity:
0.56;
}
.sph-home-solutions::after {
width:
58%;
}
.sph-home-solutions__split {
gap:
56px !important;
}
.sph-home-solutions__intro {
flex-basis:
40% !important;
width:
40% !important;
}
.sph-home-solutions__item {
grid-template-columns:
80px minmax(0, 1fr) 46px;
min-height:
142px;
margin:
0 !important;
padding:
22px 14px !important;
}
.sph-home-solutions__marker-shape {
width:
46px;
height:
46px;
flex-basis:
46px;
}
.sph-home-solutions__row-link::before {
right:
14px;
}
}
/* =========================================================
<= 991px
========================================================= */
@media (max-width: 991px) {
.sph-home-solutions::before {
width:
620px;
height:
460px;
top:
40px;
left:
-170px;
transform:
none;
opacity:
0.38;
}
.sph-home-solutions::after {
width:
100%;
height:
50%;
background:
linear-gradient(
180deg,
rgba(14, 47, 74, 0) 0%,
rgba(14, 47, 74, 0.15) 55%,
var(--sph-blue-dark) 100%
);
}
.sph-home-solutions__split {
flex-direction:
column !important;
align-items:
stretch !important;
gap:
56px !important;
}
.sph-home-solutions__intro {
flex:
0 0 auto !important;
width:
100% !important;
max-width:
720px !important;
}
.sph-home-solutions__list {
width:
100% !important;
gap:
0 !important;
row-gap:
0 !important;
}
.sph-home-solutions__item {
grid-template-columns:
82px minmax(0, 1fr) 52px;
min-height:
138px;
margin:
0 !important;
padding:
22px 18px !important;
}
.sph-home-solutions__marker-shape {
width:
48px;
height:
48px;
flex-basis:
48px;
}
.sph-home-solutions__row-link::before {
right:
18px;
}
}
/* =========================================================
<= 767px
========================================================= */
@media (max-width: 767px) {
.sph-home-solutions::before {
width:
500px;
height:
380px;
top:
50px;
left:
-220px;
opacity:
0.25;
}
.sph-home-solutions::after {
display:
none;
}
.sph-home-solutions__split {
gap:
44px !important;
}
.sph-home-solutions__item {
grid-template-columns:
68px minmax(0, 1fr) 44px;
min-height:
128px;
margin:
0 !important;
padding:
20px 8px !important;
}
.sph-home-solutions__marker-shape {
width:
42px;
height:
42px;
flex-basis:
42px;
}
.sph-home-solutions__row-link::before {
right:
8px;
width:
22px;
height:
22px;
}
}
/* =========================================================
<= 576px
========================================================= */
@media (max-width: 576px) {
.sph-home-solutions::before {
width:
430px;
height:
330px;
top:
65px;
left:
-220px;
opacity:
0.20;
}
.sph-home-solutions__split {
gap:
36px !important;
}
.sph-home-solutions__item {
grid-template-columns:
58px minmax(0, 1fr) 40px;
min-height:
120px;
margin:
0 !important;
padding:
18px 4px !important;
}
.sph-home-solutions__marker-shape {
width:
38px;
height:
38px;
flex-basis:
38px;
}
.sph-home-solutions__body {
gap:
8px !important;
}
.sph-home-solutions__row-link::before {
right:
4px;
width:
20px;
height:
20px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.sph-home-solutions__item,
.sph-home-solutions__row-link::before {
transition:
none !important;
}
.sph-home-solutions__marker-shape {
transition:
none !important;
transform:
none !important;
}
.sph-home-solutions__item:hover
.sph-home-solutions__row-link::before {
transform:
translate(0, -50%);
}
}
/* =========================================================
HOMEPAGE – 05 MICROSOFT-PLATTFORM
========================================================= */
.sph-home-platform {
position: relative;
overflow: hidden;
background-color: var(--sph-grey-light);
}
/* =========================================================
INNER
========================================================= */
.sph-home-platform__inner {
position: relative;
z-index: 2;
align-items: center !important;
}
/* =========================================================
INTRO
========================================================= */
.sph-home-platform__intro {
width: 100% !important;
max-width: 980px !important;
margin: 0 auto !important;
align-items: center !important;
text-align: center;
}
.sph-home-platform__eyebrow {
width: 100%;
}
.sph-home-platform__eyebrow
:is(h1, h2, h3, h4, h5, h6, p) {
text-align: center;
}
.sph-home-platform__title {
width: 100%;
max-width: 900px;
margin: 0 auto !important;
}
.sph-home-platform__title
:is(h1, h2, h3) {
text-align: center;
}
.sph-home-platform__copy {
width: 100%;
max-width: 900px;
margin: 0 auto !important;
}
.sph-home-platform__copy p {
text-align: center;
}
/* =========================================================
VISUALISIERUNG
========================================================= */
.sph-home-platform__visual {
position: relative;
width: 100% !important;
max-width: 980px !important;
min-height: 350px;
margin: 30px auto 0 !important;
}
/* =========================================================
PRODUKTE
========================================================= */
.sph-home-platform__products {
position: relative;
z-index: 3;
display: grid !important;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 72px !important;
width: 100% !important;
max-width: 900px !important;
margin: 0 auto !important;
}
/* =========================================================
PRODUKT-CARDS
========================================================= */
.sph-home-platform__product {
position: relative;
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 118px;
padding: 22px 30px !important;
background-color:
rgba(255, 255, 255, 0.82);
border:
1px solid rgba(24, 56, 88, 0.12);
border-radius: 16px;
box-shadow:
0 10px 30px rgba(14, 47, 74, 0.045);
box-sizing: border-box;
}
/* =========================================================
PRODUKTLOGOS
========================================================= */
.sph-home-platform__product-logo {
width: 100% !important;
max-width: 360px !important;
margin: 0 auto !important;
}
.sph-home-platform__product-logo
.elementor-widget-container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.sph-home-platform__product-logo img {
display: block;
width: auto;
max-width: 100%;
height: 72px;
max-height: 72px;
object-fit: contain;
}
.sph-home-platform__product--bc
.sph-home-platform__product-logo img {
width: min(100%, 300px);
height: auto;
}
.sph-home-platform__product--fscm
.sph-home-platform__product-logo img {
width: min(100%, 270px);
height: auto;
}
/* =========================================================
SVG VERBINDUNGSLINIEN – DESKTOP
========================================================= */
.sph-home-platform__svg {
position: absolute !important;
z-index: 1;
top: 108px;
left: 50%;
width: 100% !important;
height: 175px;
transform: translateX(-50%);
pointer-events: none;
}
.sph-home-platform__svg
.elementor-widget-container {
width: 100%;
height: 100%;
}
.sph-home-platform__connections {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
/* =========================================================
LINIEN
========================================================= */
.sph-home-platform__line {
fill: none;
stroke: var(--sph-blue);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
/* =========================================================
VERBINDUNGSPUNKTE
========================================================= */
.sph-home-platform__node {
fill: var(--sph-turquoise);
opacity: 0;
transform-box: fill-box;
transform-origin: center;
transform: scale(0.4);
}
/* =========================================================
DYNAMICS 365 HUB
========================================================= */
.sph-home-platform__hub {
position: absolute !important;
z-index: 4;
left: 50%;
bottom: 0;
width: min(390px, 46%) !important;
transform: translateX(-50%);
align-items: center !important;
opacity: 0;
}
.sph-home-platform__hub-logo {
width: 100% !important;
margin: 0 !important;
}
.sph-home-platform__hub-logo
.elementor-widget-container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.sph-home-platform__hub-logo img {
display: block;
width: auto;
max-width: 100%;
max-height: 96px;
object-fit: contain;
}
/* =========================================================
BUTTON
========================================================= */
.sph-home-platform__button {
align-self: center;
margin: 10px 0 0 !important;
}
/* =========================================================
VIEWPORT-ANIMATION
========================================================= */
.sph-home-platform.is-visible
.sph-home-platform__line--left {
animation:
sph-platform-draw
1.8s
cubic-bezier(0.65, 0, 0.35, 1)
0.2s
forwards;
}
.sph-home-platform.is-visible
.sph-home-platform__line--right {
animation:
sph-platform-draw
1.8s
cubic-bezier(0.65, 0, 0.35, 1)
0.35s
forwards;
}
.sph-home-platform.is-visible
.sph-home-platform__node--left-start {
animation:
sph-platform-node
0.35s
ease
0.1s
forwards;
}
.sph-home-platform.is-visible
.sph-home-platform__node--right-start {
animation:
sph-platform-node
0.35s
ease
0.25s
forwards;
}
.sph-home-platform.is-visible
.sph-home-platform__node--center {
animation:
sph-platform-node
0.4s
ease
1.15s
forwards;
}
.sph-home-platform.is-visible
.sph-home-platform__hub {
animation:
sph-platform-hub
0.65s
ease
1.2s
forwards;
}
/* =========================================================
KEYFRAMES
========================================================= */
@keyframes sph-platform-draw {
from {
stroke-dashoffset: 1;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes sph-platform-node {
from {
opacity: 0;
transform: scale(0.4);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes sph-platform-hub {
from {
opacity: 0;
transform:
translateX(-50%)
translateY(10px);
}
to {
opacity: 1;
transform:
translateX(-50%)
translateY(0);
}
}
/* =========================================================
<= 1399px
========================================================= */
@media (max-width: 1399px) {
.sph-home-platform__visual {
max-width: 920px !important;
min-height: 340px;
}
.sph-home-platform__products {
max-width: 840px !important;
gap: 64px !important;
}
}
/* =========================================================
<= 1199px
========================================================= */
@media (max-width: 1199px) {
.sph-home-platform__visual {
max-width: 840px !important;
min-height: 330px;
margin-top: 28px !important;
}
.sph-home-platform__products {
max-width: 780px !important;
gap: 48px !important;
}
.sph-home-platform__product {
min-height: 108px;
padding: 20px 24px !important;
}
.sph-home-platform__product-logo img {
max-height: 66px;
}
.sph-home-platform__hub {
width: min(360px, 46%) !important;
}
}
/* =========================================================
<= 991px
========================================================= */
@media (max-width: 991px) {
.sph-home-platform__intro {
max-width: 760px !important;
}
.sph-home-platform__visual {
min-height: 315px;
}
.sph-home-platform__products {
gap: 32px !important;
}
.sph-home-platform__product {
min-height: 100px;
padding: 18px 20px !important;
border-radius: 14px;
}
.sph-home-platform__product-logo img {
max-height: 58px;
}
.sph-home-platform__svg {
top: 92px;
height: 160px;
}
.sph-home-platform__hub {
width: min(330px, 48%) !important;
}
}
/* =========================================================
<= 767px – MOBILE
========================================================= */
@media (max-width: 767px) {
/* ---------------------------------------------
Intro
--------------------------------------------- */
.sph-home-platform__intro {
align-items: flex-start !important;
text-align: left;
}
.sph-home-platform__eyebrow
:is(h1, h2, h3, h4, h5, h6, p),
.sph-home-platform__title
:is(h1, h2, h3),
.sph-home-platform__copy p {
text-align: left;
}
/* ---------------------------------------------
Visualisierung
--------------------------------------------- */
.sph-home-platform__visual {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 100% !important;
min-height: 0;
margin:
28px auto 0 !important;
gap: 0 !important;
}
/* ---------------------------------------------
Produkte
--------------------------------------------- */
.sph-home-platform__products {
position: relative;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
width: 100% !important;
gap: 16px !important;
margin: 0 !important;
}
.sph-home-platform__product {
width: 100% !important;
min-height: 86px;
padding:
16px 20px !important;
border-radius: 12px;
box-shadow:
0 6px 20px rgba(14, 47, 74, 0.035);
}
/* ---------------------------------------------
Mobile Verbindung zwischen BC und F&SCM
--------------------------------------------- */
.sph-home-platform__product:first-child::after {
content: "";
position: absolute;
z-index: 4;
left: 50%;
bottom: -17px;
width: 2px;
height: 18px;
background-color:
var(--sph-blue);
transform:
translateX(-50%);
}
.sph-home-platform__product:last-child::after {
content: "";
position: absolute;
z-index: 4;
left: 50%;
bottom: -42px;
width: 2px;
height: 42px;
background-color:
var(--sph-blue);
transform:
translateX(-50%);
}
.sph-home-platform__product:last-child::before {
content: "";
position: absolute;
z-index: 5;
left: 50%;
bottom: -47px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color:
var(--sph-turquoise);
transform:
translateX(-50%);
}
/* ---------------------------------------------
Produktlogos
--------------------------------------------- */
.sph-home-platform__product-logo {
width: 100% !important;
max-width: 300px !important;
}
.sph-home-platform__product-logo img {
max-height: 54px;
}
.sph-home-platform__product--bc
.sph-home-platform__product-logo img {
width: min(100%, 245px);
}
.sph-home-platform__product--fscm
.sph-home-platform__product-logo img {
width: min(100%, 220px);
}
/* ---------------------------------------------
Desktop-SVG auf Mobile ausblenden
--------------------------------------------- */
.sph-home-platform__svg {
display: none !important;
}
/* ---------------------------------------------
Dynamics 365
--------------------------------------------- */
.sph-home-platform__hub {
position: relative !important;
z-index: 4;
left: auto;
bottom: auto;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
max-width: 280px !important;
margin:
58px auto 0 !important;
opacity: 1;
transform: none !important;
animation: none !important;
}
.sph-home-platform__hub-logo {
width: 100% !important;
margin: 0 auto !important;
}
.sph-home-platform__hub-logo
.elementor-widget-container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.sph-home-platform__hub-logo img {
display: block;
width: auto;
max-width: 100%;
max-height: 78px;
margin: 0 auto;
object-fit: contain;
}
/* ---------------------------------------------
Button
--------------------------------------------- */
.sph-home-platform__button {
align-self: center;
margin:
30px 0 0 !important;
}
}
/* =========================================================
<= 576px
========================================================= */
@media (max-width: 576px) {
.sph-home-platform__visual {
margin-top:
24px !important;
}
.sph-home-platform__products {
gap:
14px !important;
}
.sph-home-platform__product {
min-height:
82px;
padding:
14px 16px !important;
}
.sph-home-platform__product-logo img {
max-height:
50px;
}
.sph-home-platform__product--bc
.sph-home-platform__product-logo img {
width:
min(100%, 225px);
}
.sph-home-platform__product--fscm
.sph-home-platform__product-logo img {
width:
min(100%, 205px);
}
.sph-home-platform__hub {
max-width:
250px !important;
margin-top:
54px !important;
}
.sph-home-platform__hub-logo img {
max-height:
70px;
}
.sph-home-platform__button {
margin-top:
26px !important;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.sph-home-platform__line {
stroke-dashoffset: 0;
}
.sph-home-platform__node {
opacity: 1;
transform: scale(1);
}
.sph-home-platform__hub {
opacity: 1;
transform:
translateX(-50%);
}
.sph-home-platform.is-visible
.sph-home-platform__line,
.sph-home-platform.is-visible
.sph-home-platform__node,
.sph-home-platform.is-visible
.sph-home-platform__hub {
animation:
none !important;
}
}
@media (max-width: 767px)
and (prefers-reduced-motion: reduce) {
.sph-home-platform__hub {
transform:
none !important;
}
}
/* =========================================================
HOMEPAGE – 06 REFERENZEN
========================================================= */
.sph-home-reference {
position: relative;
overflow: hidden;
background-color: #ffffff;
}
/* =========================================================
INNER
========================================================= */
.sph-home-reference__inner {
position: relative;
z-index: 2;
}
/* =========================================================
INTRO
========================================================= */
.sph-home-reference__intro {
width: 100%;
max-width: 980px !important;
}
.sph-home-reference__eyebrow {
margin: 0 !important;
}
.sph-home-reference__title {
width: 100%;
max-width: 900px;
margin: 0 !important;
}
/* =========================================================
FEATURED REFERENCE
========================================================= */
.sph-home-reference__feature {
position: relative;
display: block !important;
width: 100% !important;
min-height: 600px;
margin-top: 48px !important;
overflow: visible;
}
/* =========================================================
FEATURE IMAGE
========================================================= */
.sph-home-reference__image {
position: absolute !important;
z-index: 1;
top: 0;
left: 0;
width: 78% !important;
height: 100% !important;
margin: 0 !important;
overflow: hidden;
}
.sph-home-reference__image
.elementor-widget-container {
width: 100%;
height: 100%;
overflow: hidden;
}
.sph-home-reference__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition:
transform 0.6s ease;
}
/* =========================================================
CASE PANEL
========================================================= */
.sph-home-reference__case {
position: absolute !important;
z-index: 3;
top: 50%;
right: 0;
width: 42% !important;
max-width: 650px !important;
min-height: 470px;
padding:
clamp(42px, 4vw, 68px) !important;
transform:
translateY(-50%);
justify-content: center !important;
background-color:
var(--sph-blue-dark);
box-sizing: border-box;
}
/* =========================================================
CASE CONTENT
========================================================= */
.sph-home-reference__case-tag {
margin: 0 !important;
}
.sph-home-reference__case-title {
margin: 0 !important;
}
.sph-home-reference__case-title
:is(h1, h2, h3, h4, h5, h6) {
margin: 0;
}
.sph-home-reference__meta {
margin: 0 !important;
}
.sph-home-reference__meta p {
margin: 0;
opacity: 0.72;
}
.sph-home-reference__copy {
max-width: 470px;
margin: 4px 0 0 !important;
}
.sph-home-reference__copy p {
margin: 0;
}
/* =========================================================
BUTTON
Das Button-Design selbst bleibt vollständig global.
========================================================= */
.sph-home-reference__button {
align-self: flex-start;
margin: 12px 0 0 !important;
}
/* =========================================================
SUBTILER IMAGE HOVER
========================================================= */
@media (hover: hover) and (pointer: fine) {
.sph-home-reference__feature:hover
.sph-home-reference__image img {
transform:
scale(1.015);
}
}
/* =========================================================
LOGO BAND
========================================================= */
.sph-home-reference__logo-band {
position: relative;
width: 100% !important;
margin-top: 72px !important;
background-color: #f0f0f0;
}
/* =========================================================
LOGO BAND INNER
========================================================= */
.sph-home-reference__logos-inner {
padding-top: 48px !important;
padding-bottom: 48px !important;
}
/* =========================================================
LOGO ROW
========================================================= */
.sph-home-reference__logos {
display: grid !important;
grid-template-columns:
repeat(5, minmax(0, 1fr));
align-items: center !important;
gap:
clamp(28px, 4vw, 72px) !important;
width: 100% !important;
}
/* =========================================================
LOGOS
========================================================= */
.sph-home-reference__logo {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin: 0 !important;
opacity: 0.58;
transition:
opacity 0.25s ease,
transform 0.25s ease;
}
.sph-home-reference__logo
.elementor-widget-container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.sph-home-reference__logo img {
display: block;
width: auto;
max-width: 100%;
height: 58px;
max-height: 58px;
object-fit: contain;
filter:
grayscale(1);
}
/* Peter Hahn als Featured Reference etwas präsenter */
.sph-home-reference__logo:first-child {
opacity: 0.9;
}
/* =========================================================
LOGO HOVER
========================================================= */
@media (hover: hover) and (pointer: fine) {
.sph-home-reference__logo:hover {
opacity: 1;
transform:
translateY(-2px);
}
}
/* =========================================================
<= 1399px
========================================================= */
@media (max-width: 1399px) {
.sph-home-reference__feature {
min-height: 560px;
margin-top:
44px !important;
}
.sph-home-reference__image {
width:
79% !important;
}
.sph-home-reference__case {
width:
43% !important;
min-height:
440px;
padding:
52px !important;
}
.sph-home-reference__logo-band {
margin-top:
64px !important;
}
}
/* =========================================================
<= 1199px
========================================================= */
@media (max-width: 1199px) {
.sph-home-reference__feature {
min-height:
500px;
}
.sph-home-reference__image {
width:
80% !important;
}
.sph-home-reference__case {
width:
46% !important;
min-height:
410px;
padding:
44px !important;
}
.sph-home-reference__logos {
gap:
36px !important;
}
.sph-home-reference__logo img {
height:
52px;
max-height:
52px;
}
}
/* =========================================================
<= 991px
========================================================= */
@media (max-width: 991px) {
.sph-home-reference__intro {
max-width:
760px !important;
}
.sph-home-reference__feature {
min-height:
470px;
margin-top:
40px !important;
}
.sph-home-reference__image {
width:
82% !important;
}
.sph-home-reference__case {
width:
50% !important;
min-height:
390px;
padding:
38px !important;
}
.sph-home-reference__logo-band {
margin-top:
56px !important;
}
.sph-home-reference__logos-inner {
padding-top:
40px !important;
padding-bottom:
40px !important;
}
.sph-home-reference__logos {
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap:
32px 48px !important;
}
}
/* =========================================================
<= 767px
MOBILE
========================================================= */
@media (max-width: 767px) {
/*
* Auf Mobile wird die Überlagerung bewusst aufgelöst.
*/
.sph-home-reference__feature {
display: flex !important;
flex-direction: column !important;
min-height: 0;
margin-top:
32px !important;
overflow: hidden;
}
/* -----------------------------------------------------
IMAGE
----------------------------------------------------- */
.sph-home-reference__image {
position: relative !important;
top: auto;
left: auto;
width: 100% !important;
height: auto !important;
aspect-ratio:
16 / 10;
}
.sph-home-reference__image
.elementor-widget-container {
width: 100%;
height: 100%;
}
.sph-home-reference__image img {
width: 100%;
height: 100%;
object-position:
center;
}
/* -----------------------------------------------------
CASE
----------------------------------------------------- */
.sph-home-reference__case {
position: relative !important;
top: auto;
right: auto;
width: 100% !important;
max-width: none !important;
min-height: 0;
padding:
36px 28px !important;
transform:
none;
}
.sph-home-reference__copy {
max-width:
580px;
}
/* -----------------------------------------------------
LOGO BAND
----------------------------------------------------- */
.sph-home-reference__logo-band {
margin-top:
0 !important;
}
.sph-home-reference__logos-inner {
padding-top:
36px !important;
padding-bottom:
36px !important;
}
.sph-home-reference__logos {
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap:
28px 36px !important;
}
.sph-home-reference__logo img {
height:
48px;
max-height:
48px;
}
}
/* =========================================================
<= 576px
========================================================= */
@media (max-width: 576px) {
.sph-home-reference__feature {
margin-top:
28px !important;
}
.sph-home-reference__image {
aspect-ratio:
4 / 3;
}
.sph-home-reference__case {
padding:
32px 22px !important;
}
.sph-home-reference__button {
margin-top:
8px !important;
}
.sph-home-reference__logos-inner {
padding-top:
32px !important;
padding-bottom:
32px !important;
}
.sph-home-reference__logos {
gap:
26px 28px !important;
}
.sph-home-reference__logo img {
height:
42px;
max-height:
42px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.sph-home-reference__image img,
.sph-home-reference__logo {
transition:
none !important;
}
}
/* =========================================================
HOMEPAGE – 07 EVENTS + KARRIERE
========================================================= */
/* =========================================================
EVENTS
========================================================= */
.sph-home-events {
position: relative;
width: 100%;
overflow: hidden;
background-color: #f0f0f0;
}
.sph-home-events__inner {
position: relative;
}
/* =========================================================
EVENTS – INTRO
========================================================= */
.sph-home-events__intro {
width: 100%;
max-width: 1050px;
}
.sph-home-events__title {
width: 100%;
max-width: 1000px;
margin: 0 !important;
}
.sph-home-events__lead {
width: 100%;
max-width: 760px;
margin: 4px 0 0 !important;
}
/* =========================================================
EVENT LIST
========================================================= */
.sph-home-events__list {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
margin-top: 56px !important;
gap: 0 !important;
border-top:
1px solid rgba(14, 47, 74, 0.18);
}
/* =========================================================
EVENT ITEM
========================================================= */
.sph-home-events__item {
position: relative;
display: grid !important;
grid-template-columns:
135px
minmax(0, 1fr)
72px;
align-items: stretch !important;
width: 100% !important;
min-height: 150px;
padding: 0 !important;
margin: 0 !important;
gap: 0 !important;
border: 0 !important;
border-bottom:
1px solid rgba(14, 47, 74, 0.18) !important;
background-color:
transparent;
box-sizing:
border-box;
transition:
background-color 0.25s ease,
padding 0.25s ease;
}
.sph-home-events__item > .e-con {
margin: 0 !important;
}
/* =========================================================
EVENT DATE
========================================================= */
.sph-home-events__date {
position: relative;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
align-self: stretch !important;
width: 100% !important;
height: 100% !important;
min-height: 149px;
margin: 0 !important;
padding:
26px 20px !important;
border: 0 !important;
border-right:
1px solid rgba(14, 47, 74, 0.18) !important;
box-sizing:
border-box;
text-align: center;
}
.sph-home-events__day {
width: 100%;
margin: 0 !important;
text-align: center;
}
.sph-home-events__day
.elementor-heading-title {
width: 100%;
font-family:
Good-Times !important;
font-size:
clamp(
2.4rem,
3vw,
4rem
) !important;
line-height:
0.9 !important;
font-weight:
600 !important;
color:
var(--sph-blue-dark) !important;
margin:
0 !important;
text-align:
center !important;
}
.sph-home-events__month {
width: 100%;
margin:
12px 0 0 !important;
text-align:
center;
}
.sph-home-events__month
.elementor-heading-title {
width: 100%;
font-family:
"Overpass",
sans-serif !important;
font-size:
0.95rem !important;
line-height:
1 !important;
font-weight:
700 !important;
letter-spacing:
0.14em;
text-transform:
uppercase;
color:
var(--sph-blue-dark) !important;
margin:
0 !important;
text-align:
center !important;
}
/* =========================================================
EVENT CONTENT
========================================================= */
.sph-home-events__item-content {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important;
align-self: stretch !important;
width: 100% !important;
height: 100% !important;
min-height: 149px;
min-width: 0;
margin: 0 !important;
padding:
26px 44px !important;
gap:
5px !important;
box-sizing:
border-box;
}
.sph-home-events__meta {
margin: 0 !important;
}
.sph-home-events__meta
.elementor-heading-title {
font-size:
0.875rem !important;
}
.sph-home-events__item-title {
margin: 0 !important;
}
.sph-home-events__item-title
.elementor-heading-title {
font-size:
clamp(
1.25rem,
1.3vw,
1.6rem
) !important;
line-height:
1.25 !important;
font-weight:
700 !important;
color:
var(--sph-blue-dark) !important;
margin:
0 !important;
}
.sph-home-events__item-copy {
width: 100%;
max-width: 760px;
margin: 0 !important;
}
.sph-home-events__item-copy p {
margin: 0 !important;
color:
rgba(14, 47, 74, 0.76);
}
/* =========================================================
EVENT FULL-SURFACE LINK
========================================================= */
.sph-home-events__item-link {
position: absolute !important;
z-index: 10;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: none;
}
.sph-home-events__item-link
.elementor-widget-container {
width: 100%;
height: 100%;
margin: 0 !important;
padding: 0 !important;
}
.sph-home-events__item-link
.elementor-button-wrapper {
width: 100%;
height: 100%;
margin: 0 !important;
padding: 0 !important;
}
.sph-home-events__item-link
.elementor-button {
position: relative;
display: block;
width: 100%;
height: 100%;
min-height: 100%;
margin: 0 !important;
padding: 0 !important;
background:
transparent !important;
border:
0 !important;
border-radius:
0 !important;
box-shadow:
none !important;
pointer-events: auto;
}
/* =========================================================
ACCESSIBLE HIDDEN LINK TEXT
========================================================= */
.sph-home-events__item-link
.elementor-button-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* =========================================================
EVENT ARROW
========================================================= */
.sph-home-events__item-link
.elementor-button-content-wrapper {
position: absolute;
top: 50%;
right: 20px;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
gap: 0 !important;
transform:
translateY(-50%);
}
.sph-home-events__item-link
.elementor-button-content-wrapper::after {
width: 24px;
height: 24px;
flex:
0 0 24px;
background-color:
var(--sph-orange);
transform:
translateX(0);
transition:
transform 0.25s ease !important;
}
/* =========================================================
EVENT HOVER
========================================================= */
@media (hover: hover) and (pointer: fine) {
/*
* Der Hover bekommt oben und unten etwas Luft.
* Die Trennlinien bleiben dabei an ihrer Position.
*/
.sph-home-events__item::before {
content: "";
position: absolute;
z-index: 0;
top: 8px;
right: 0;
bottom: 8px;
left: 0;
background-color:
#ffffff;
opacity: 0;
transition:
opacity 0.25s ease;
pointer-events:
none;
}
.sph-home-events__item:hover {
background-color:
transparent;
}
.sph-home-events__item:hover::before {
opacity: 1;
}
/*
* Inhalt über der Hoverfläche halten.
*/
.sph-home-events__date,
.sph-home-events__item-content {
position: relative;
z-index: 2;
}
.sph-home-events__item:hover
.sph-home-events__item-link
.elementor-button-content-wrapper::after {
transform:
translateX(6px);
}
}
/* =========================================================
EVENT KEYBOARD FOCUS
========================================================= */
.sph-home-events__item:has(
.sph-home-events__item-link
.elementor-button:focus-visible
)::before {
opacity: 1;
}
.sph-home-events__item-link
.elementor-button:focus-visible {
outline:
2px solid var(--sph-orange);
outline-offset:
-2px;
}
/* =========================================================
ALL EVENTS BUTTON
========================================================= */
.sph-home-events__all-button {
align-self:
flex-end;
margin:
40px 0 0 !important;
}
/* =========================================================
KARRIERE
========================================================= */
.sph-home-career {
position: relative;
width: 100%;
padding:
0 0 120px;
background-color:
#f0f0f0;
}
.sph-home-career__inner {
position: relative;
}
/* =========================================================
CAREER BANNER
========================================================= */
.sph-home-career__banner {
position: relative;
display: grid !important;
grid-template-columns:
minmax(0, 44%)
minmax(0, 56%);
width: 100% !important;
min-height: 380px;
overflow: hidden;
background-color:
var(--sph-blue-dark);
}
/* =========================================================
CAREER IMAGE
========================================================= */
.sph-home-career__image {
position: relative;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
overflow: hidden;
}
.sph-home-career__image
.elementor-widget-container {
width: 100%;
height: 100%;
}
.sph-home-career__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition:
transform 0.6s ease;
}
.sph-home-career__image::before,
.sph-home-career__image::after {
content:
none !important;
display:
none !important;
}
/* =========================================================
CAREER CONTENT
========================================================= */
.sph-home-career__content {
position: relative;
z-index: 3;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important;
width: 100% !important;
padding:
clamp(
48px,
5vw,
82px
) !important;
background-color:
var(--sph-blue-dark);
}
.sph-home-career__title {
width: 100%;
max-width: 700px;
margin: 0 !important;
}
.sph-home-career__copy {
width: 100%;
max-width: 680px;
margin:
4px 0 0 !important;
}
.sph-home-career__copy p {
margin: 0 !important;
}
/* =========================================================
CAREER BUTTON
========================================================= */
.sph-home-career__button {
margin:
14px 0 0 !important;
}
/* =========================================================
CAREER HOVER
========================================================= */
@media (hover: hover) and (pointer: fine) {
.sph-home-career__banner:hover
.sph-home-career__image img {
transform:
scale(1.015);
}
}
/* =========================================================
<= 1399px
========================================================= */
@media (max-width: 1399px) {
.sph-home-events__list {
margin-top:
48px !important;
}
.sph-home-events__item {
grid-template-columns:
125px
minmax(0, 1fr)
64px;
}
.sph-home-events__date {
padding:
26px 18px !important;
}
.sph-home-events__item-content {
padding:
26px 38px !important;
}
.sph-home-career {
padding-bottom:
100px;
}
.sph-home-career__banner {
min-height:
360px;
}
}
/* =========================================================
<= 1199px
========================================================= */
@media (max-width: 1199px) {
.sph-home-events__item {
grid-template-columns:
115px
minmax(0, 1fr)
60px;
min-height:
140px;
}
.sph-home-events__date,
.sph-home-events__item-content {
min-height:
139px;
}
.sph-home-events__date {
padding:
24px 16px !important;
}
.sph-home-events__item-content {
padding:
24px 32px !important;
}
.sph-home-career__banner {
grid-template-columns:
minmax(0, 46%)
minmax(0, 54%);
}
.sph-home-career__content {
padding:
48px !important;
}
}
/* =========================================================
<= 991px
========================================================= */
@media (max-width: 991px) {
.sph-home-events__intro {
max-width:
780px;
}
.sph-home-events__list {
margin-top:
44px !important;
}
.sph-home-events__item {
grid-template-columns:
105px
minmax(0, 1fr)
54px;
min-height:
132px;
}
.sph-home-events__date,
.sph-home-events__item-content {
min-height:
131px;
}
.sph-home-events__date {
padding:
22px 14px !important;
}
.sph-home-events__item-content {
padding:
22px 26px !important;
}
.sph-home-events__item-copy {
max-width:
620px;
}
.sph-home-career {
padding-bottom:
88px;
}
.sph-home-career__banner {
grid-template-columns:
minmax(0, 43%)
minmax(0, 57%);
min-height:
340px;
}
.sph-home-career__content {
padding:
40px !important;
}
}
/* =========================================================
<= 767px
========================================================= */
@media (max-width: 767px) {
.sph-home-events__list {
margin-top:
36px !important;
}
.sph-home-events__item {
grid-template-columns:
76px
minmax(0, 1fr)
36px;
min-height:
112px;
}
.sph-home-events__date,
.sph-home-events__item-content {
min-height:
111px;
}
.sph-home-events__date {
justify-content:
center !important;
padding:
20px 8px !important;
}
.sph-home-events__day
.elementor-heading-title {
font-size:
2rem !important;
}
.sph-home-events__month {
margin-top:
7px !important;
}
.sph-home-events__month
.elementor-heading-title {
font-size:
0.7rem !important;
letter-spacing:
0.08em;
}
.sph-home-events__item-content {
padding:
24px 18px !important;
}
.sph-home-events__item-copy {
display:
none;
}
.sph-home-events__meta
.elementor-heading-title {
font-size:
0.75rem !important;
}
.sph-home-events__item-title
.elementor-heading-title {
font-size:
1.1rem !important;
}
.sph-home-events__item-link
.elementor-button-content-wrapper {
right:
4px;
}
.sph-home-events__item-link
.elementor-button-content-wrapper::after {
width:
20px;
height:
20px;
flex:
0 0 20px;
}
.sph-home-events__all-button {
align-self:
flex-start;
margin-top:
32px !important;
}
/* -----------------------------------------------------
CAREER
----------------------------------------------------- */
.sph-home-career {
padding-bottom:
80px;
}
.sph-home-career__banner {
display:
flex !important;
flex-direction:
column !important;
min-height:
0;
}
.sph-home-career__image {
width:
100% !important;
height:
auto !important;
aspect-ratio:
16 / 9;
}
.sph-home-career__content {
padding:
36px 28px !important;
}
}
/* =========================================================
<= 576px
========================================================= */
@media (max-width: 576px) {
.sph-home-events__item {
grid-template-columns:
68px
minmax(0, 1fr)
28px;
}
.sph-home-events__date {
padding:
18px 6px !important;
}
.sph-home-events__month
.elementor-heading-title {
font-size:
0.65rem !important;
letter-spacing:
0.06em;
}
.sph-home-events__item-content {
padding:
22px 14px !important;
}
.sph-home-events__item-link
.elementor-button-content-wrapper {
right:
0;
}
.sph-home-events__item-link
.elementor-button-content-wrapper::after {
width:
18px;
height:
18px;
flex:
0 0 18px;
}
.sph-home-career {
padding-bottom:
64px;
}
.sph-home-career__image {
aspect-ratio:
4 / 3;
}
.sph-home-career__content {
padding:
32px 22px !important;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.sph-home-events__item,
.sph-home-events__item::before,
.sph-home-events__item-link
.elementor-button-content-wrapper::after,
.sph-home-career__image img {
transition:
none !important;
}
}
/* =========================================================
HOMEPAGE – 08 KONTAKT / ABSCHLUSS
========================================================= */
.sph-home-contact {
position: relative;
width: 100%;
overflow: hidden;
background-color: var(--sph-blue-dark);
isolation: isolate;
}
/* =========================================================
LARGE ORANGE SPH ARROW
Desktop + Tablet Landscape
Wird im finalen Visual-Pass noch feinjustiert.
========================================================= */
.sph-home-contact::before {
content: "";
position: absolute;
z-index: 0;
top: 0;
bottom: 0;
left: 0;
width: clamp(500px, 40vw, 760px);
height: 100%;
margin: 0;
padding: 0;
background-image:
url("data:image/svg+xml,%3Csvg viewBox='0 0 700 1000' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0 H205 L620 410 C675 458 675 542 620 590 L205 1000 H0 L515 535 C545 508 545 492 515 465 Z' fill='%23fe6901'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: left top;
background-size: 100% 100%;
opacity: 0.92;
pointer-events: none;
}
/* =========================================================
SUBTLE BACKGROUND DEPTH
========================================================= */
.sph-home-contact::after {
content: "";
position: absolute;
z-index: 0;
inset: 0;
background:
radial-gradient(
circle at 12% 45%,
rgba(30, 78, 115, 0.34) 0,
rgba(30, 78, 115, 0) 42%
);
pointer-events: none;
}
/* =========================================================
INNER
========================================================= */
.sph-home-contact__inner {
position: relative;
z-index: 2;
}
/* =========================================================
MAIN GRID
========================================================= */
.sph-home-contact__grid {
position: relative;
display: grid !important;
grid-template-columns:
minmax(0, 1.05fr)
minmax(420px, 0.75fr);
align-items: center !important;
gap: clamp(72px, 7vw, 130px) !important;
width: 100% !important;
}
/* =========================================================
LEFT CONTENT
========================================================= */
.sph-home-contact__content {
position: relative;
z-index: 2;
width: 100%;
max-width: 820px;
}
.sph-home-contact__eyebrow {
margin: 0 !important;
}
.sph-home-contact__title {
width: 100%;
max-width: 800px;
margin: 0 !important;
}
.sph-home-contact__lead {
width: 100%;
max-width: 720px;
margin: 8px 0 0 !important;
}
.sph-home-contact__lead p {
margin: 0 !important;
}
/* =========================================================
BENEFITS
========================================================= */
.sph-home-contact__benefits {
display: flex !important;
flex-direction: column !important;
width: 100%;
gap: 14px !important;
margin: 20px 0 0 !important;
}
.sph-home-contact__benefit {
position: relative;
width: 100%;
margin: 0 !important;
padding-left: 58px;
}
.sph-home-contact__benefit p {
margin: 0 !important;
}
/* =========================================================
BENEFIT FAST-FORWARD
Türkis = Information / Mehrwert
========================================================= */
.sph-home-contact__benefit::before {
content: "";
position: absolute;
top: 50%;
left: 4px;
width: 28px;
height: 28px;
background-color: var(--sph-turquoise);
-webkit-mask-image:
url("https://sph-ag.com/wp-content/uploads/2024/05/fast-forward.svg");
mask-image:
url("https://sph-ag.com/wp-content/uploads/2024/05/fast-forward.svg");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
transform: translateY(-50%);
}
/* =========================================================
DIRECT CONTACT
========================================================= */
.sph-home-contact__direct {
width: 100%;
max-width: 720px;
margin: 34px 0 0 !important;
padding: 34px 0 0 !important;
border-top:
1px solid rgba(255, 255, 255, 0.28);
}
.sph-home-contact__direct-title {
margin: 0 !important;
}
.sph-home-contact__direct-title
.elementor-heading-title {
font-size: 1rem !important;
line-height: 1.3 !important;
font-weight: 700 !important;
letter-spacing: 0.04em;
}
.sph-home-contact__direct-links {
margin: 18px 0 0 !important;
}
.sph-home-contact__direct-links p {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px 38px;
margin: 0 !important;
}
/* =========================================================
DIRECT CONTACT LINKS
========================================================= */
.sph-home-contact__direct-links a {
display: inline-flex;
align-items: center;
gap: 14px;
color: #ffffff;
font-weight: 600;
text-decoration: none;
transition:
color 0.2s ease;
}
.sph-home-contact__direct-links a:hover {
color: var(--sph-turquoise);
}
.sph-home-contact__direct-links a:focus-visible {
outline:
2px solid var(--sph-turquoise);
outline-offset: 4px;
}
/* =========================================================
ROUND CONTACT ICON
Gemeinsame Basis
Kreis = zurückhaltende Fläche
Icon = Orange / Aktion
========================================================= */
.sph-home-contact__direct-links
a::before {
content: "";
display: block;
width: 46px;
height: 46px;
flex: 0 0 46px;
border-radius: 50%;
background-color:
rgba(255, 255, 255, 0.10);
background-repeat: no-repeat;
background-position: center;
transition:
background-color 0.2s ease,
transform 0.2s ease;
}
/* =========================================================
PHONE ICON
========================================================= */
.sph-home-contact__direct-links
a[href^="tel:"]::before {
background-color:
rgba(255, 255, 255, 0.10);
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fe6901' d='M6.62 10.79a15.46 15.46 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.61 21 3 13.39 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.02l-2.2 2.2Z'/%3E%3C/svg%3E");
background-size: 21px 21px;
}
/* =========================================================
MAIL ICON
========================================================= */
.sph-home-contact__direct-links
a[href^="mailto:"]::before {
background-color:
rgba(255, 255, 255, 0.10);
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fe6901' d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 4-8 5-8-5V6l8 5 8-5v2Z'/%3E%3C/svg%3E");
background-size: 22px 22px;
}
/* =========================================================
CONTACT ICON HOVER
Kreis wird leicht sichtbarer.
========================================================= */
.sph-home-contact__direct-links
a:hover::before {
background-color:
rgba(255, 255, 255, 0.16);
transform:
translateY(-2px);
}
/* =========================================================
REMOVE OLD CONTACT SEPARATOR
========================================================= */
.sph-home-contact__direct-separator {
display: none !important;
}
/* =========================================================
FORM CONTAINER
========================================================= */
.sph-home-contact__form {
position: relative;
z-index: 3;
width: 100% !important;
min-height: 610px;
padding:
clamp(38px, 3.5vw, 58px) !important;
background-color: #ffffff;
border-radius: 12px;
box-sizing: border-box;
box-shadow:
0 28px 70px rgba(0, 0, 0, 0.18);
}
/* =========================================================
EMPTY FORM STATE
========================================================= */
.sph-home-contact__form:empty {
display: block !important;
}
/* =========================================================
FORM BUILDER PREPARATION
========================================================= */
.sph-home-contact__form > * {
position: relative;
z-index: 2;
width: 100%;
}
/* =========================================================
FORM SUBMIT BUTTON
Keine lokale Rekonstruktion des Buttondesigns.
Globales SPH-Buttondesign bleibt zuständig.
========================================================= */
#sph-home-contact-submit {
width: auto !important;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1600px) {
.sph-home-contact::before {
width:
min(40vw, 760px);
}
}
/* =========================================================
<= 1399px
========================================================= */
@media (max-width: 1399px) {
.sph-home-contact::before {
top: 0;
right: auto;
bottom: 0;
left: 0;
width: 42vw;
height: 100%;
transform: none;
opacity: 0.92;
}
.sph-home-contact__grid {
grid-template-columns:
minmax(0, 1fr)
minmax(400px, 0.72fr);
gap: 72px !important;
}
.sph-home-contact__form {
min-height: 580px;
}
}
/* =========================================================
<= 1199px
TABLET LANDSCAPE
========================================================= */
@media (max-width: 1199px) {
.sph-home-contact::before {
top: 0;
right: auto;
bottom: 0;
left: 0;
width: 44vw;
height: 100%;
transform: none;
opacity: 0.92;
}
.sph-home-contact__grid {
grid-template-columns:
minmax(0, 1fr)
minmax(380px, 0.78fr);
gap: 56px !important;
}
.sph-home-contact__benefit {
padding-left: 48px;
}
.sph-home-contact__benefit::before {
width: 24px;
height: 24px;
}
.sph-home-contact__form {
min-height: 560px;
padding: 42px !important;
}
}
/* =========================================================
<= 991px
TABLET PORTRAIT
Großer SPH-Pfeil ab hier vollständig ausgeblendet.
========================================================= */
@media (max-width: 991px) {
.sph-home-contact::before {
content: none !important;
display: none !important;
background-image: none !important;
}
.sph-home-contact__grid {
grid-template-columns:
minmax(0, 1fr);
gap: 56px !important;
}
.sph-home-contact__content {
max-width: 760px;
}
.sph-home-contact__lead {
max-width: 680px;
}
.sph-home-contact__form {
width:
min(100%, 680px) !important;
min-height: 520px;
justify-self: center;
}
}
/* =========================================================
<= 767px
MOBILE
========================================================= */
@media (max-width: 767px) {
.sph-home-contact__grid {
gap: 44px !important;
}
/* -----------------------------------------------------
BENEFITS
----------------------------------------------------- */
.sph-home-contact__benefits {
gap: 12px !important;
margin-top: 16px !important;
}
.sph-home-contact__benefit {
padding-left: 42px;
}
.sph-home-contact__benefit::before {
left: 0;
width: 22px;
height: 22px;
}
/* -----------------------------------------------------
DIRECT CONTACT
----------------------------------------------------- */
.sph-home-contact__direct {
margin-top: 28px !important;
padding-top: 28px !important;
}
.sph-home-contact__direct-links p {
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
/* -----------------------------------------------------
CONTACT ICONS
----------------------------------------------------- */
.sph-home-contact__direct-links
a::before {
width: 44px;
height: 44px;
flex-basis: 44px;
}
/* -----------------------------------------------------
FORM
----------------------------------------------------- */
.sph-home-contact__form {
width: 100% !important;
min-height: 500px;
padding:
34px 28px !important;
border-radius: 10px;
}
/* -----------------------------------------------------
SUBMIT BUTTON
----------------------------------------------------- */
#sph-home-contact-submit {
width: 100% !important;
}
}
/* =========================================================
<= 576px
MOBILE PORTRAIT
========================================================= */
@media (max-width: 576px) {
.sph-home-contact__grid {
gap: 36px !important;
}
.sph-home-contact__lead {
margin-top: 4px !important;
}
/* -----------------------------------------------------
BENEFITS
----------------------------------------------------- */
.sph-home-contact__benefit {
padding-left: 38px;
}
.sph-home-contact__benefit::before {
width: 20px;
height: 20px;
}
/* -----------------------------------------------------
DIRECT CONTACT
----------------------------------------------------- */
.sph-home-contact__direct {
margin-top: 24px !important;
padding-top: 24px !important;
}
.sph-home-contact__direct-links
a {
gap: 12px;
}
.sph-home-contact__direct-links
a::before {
width: 42px;
height: 42px;
flex: 0 0 42px;
}
.sph-home-contact__direct-links
a[href^="tel:"]::before {
background-size:
19px 19px;
}
.sph-home-contact__direct-links
a[href^="mailto:"]::before {
background-size:
20px 20px;
}
/* -----------------------------------------------------
FORM
----------------------------------------------------- */
.sph-home-contact__form {
min-height: 460px;
padding:
30px 22px !important;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.sph-home-contact__direct-links a,
.sph-home-contact__direct-links a::before {
transition: none !important;
}
.sph-home-contact__direct-links
a:hover::before {
transform: none;
}
}
/* =========================================================
FORM – DATENSCHUTZ / OPT-IN
========================================================= */
.sph-home-contact__form .sph-form-legal {
color: #000000;
font-family: "Overpass", sans-serif !important;
font-size: 0.9375rem !important;
line-height: 1 !important;
font-weight: 400 !important;
}
.sph-home-contact__form .sph-form-legal a {
color: var(--sph-orange) !important;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
.sph-home-contact__form .sph-form-legal a:hover {
color: var(--sph-blue-dark) !important;
}
.sph-home-contact__form .sph-form-legal a:focus-visible {
outline: 2px solid var(--sph-orange);
outline-offset: 2px;
}
/* =========================================================
FORM – CHECKBOXES
kompakte SPH Checkbox
========================================================= */
.sph-home-contact__form input[type="checkbox"] {
-webkit-appearance: none !important;
appearance: none !important;
position: relative !important;
display: inline-block !important;
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
min-height: 18px !important;
max-width: 18px !important;
max-height: 18px !important;
flex: 0 0 18px !important;
margin: 1px 8px 0 0 !important;
padding: 0 !important;
border: 1.5px solid var(--sph-blue-dark) !important;
border-radius: 3px !important;
background: #ffffff !important;
box-shadow: none !important;
vertical-align: top !important;
cursor: pointer;
box-sizing: border-box !important;
transition:
border-color 0.15s ease,
background-color 0.15s ease,
box-shadow 0.15s ease;
}
/* =========================================================
HOVER
========================================================= */
.sph-home-contact__form input[type="checkbox"]:hover {
border-color: var(--sph-orange) !important;
}
/* =========================================================
CHECKED
========================================================= */
.sph-home-contact__form input[type="checkbox"]:checked {
border-color: var(--sph-orange) !important;
background:
var(--sph-orange) !important;
}
/* =========================================================
CHECKMARK
========================================================= */
.sph-home-contact__form input[type="checkbox"]:checked::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 4px;
height: 8px;
border: solid #ffffff;
border-width:
0 2px 2px 0;
transform:
rotate(45deg);
}
/* =========================================================
KEYBOARD FOCUS
========================================================= */
.sph-home-contact__form input[type="checkbox"]:focus {
outline: none !important;
}
.sph-home-contact__form input[type="checkbox"]:focus-visible {
outline:
2px solid rgba(254, 105, 1, 0.35) !important;
outline-offset:
2px !important;
}
/* =========================================================
SUBPAGE HERO
Universeller Hero für Corporate-Unterseiten
GRUNDSÄTZE
---------------------------------------------------------
- Header bleibt auf Unterseiten im normalen Dokumentfluss
- definierter Abstand Navigation -> Hero
- kompakter Abstand Hero -> Folgesektion
- Hero nutzt die volle Breite des sph-container
- Content Desktop / Tablet Landscape exakt 50 %
- Bild liegt auf Desktop tatsächlich in der rechten Hälfte
- dunkelblauer Übergang zwischen Content und Bild
- sph-page-title bleibt globale H1-Typografie
- optionaler Button nutzt globales Button-Styling
- keine CSS-Dekorationen
========================================================= */
.sph-subpage-hero {
position: relative;
overflow: visible;
margin: 0 !important;
/* Überschreibt bei Kombination mit .sph-section bewusst
das normale Section-Spacing nur für diesen Hero. */
padding-top: 32px !important;
padding-bottom: 48px !important;
background: transparent !important;
background-color: transparent !important;
}
/* =========================================================
SUBPAGE HERO
========================================================= */
/* =========================================================
INNER / SPH-CONTAINER
Die globale max-width von .sph-container bleibt bestehen.
Nur die horizontalen Gutter werden innerhalb dieses
speziellen Hero-Containers entfernt, damit die Hero-
Fläche die vollständige Containerbreite nutzt.
========================================================= */
.sph-subpage-hero__inner {
position: relative;
z-index: 1;
width: 100%;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* =========================================================
HERO MEDIA
========================================================= */
.sph-subpage-hero__media {
position: relative;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
width: 100% !important;
max-width: none !important;
min-height: clamp(500px, 38vw, 620px);
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
background: var(--sph-blue-dark) !important;
background-color: var(--sph-blue-dark) !important;
isolation: isolate;
}
/* =========================================================
IMAGE WIDGET
Desktop:
Das Bild beginnt bewusst bereits innerhalb der linken
Hero-Hälfte.
Dadurch gibt es keine harte 50/50-Schnittkante.
Der Übergang zum Textbereich entsteht ausschließlich
durch das darüberliegende Overlay.
========================================================= */
.sph-subpage-hero__image {
position: absolute !important;
z-index: 0;
top: 0;
right: 0;
bottom: 0;
left: 40%;
width: 60% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.sph-subpage-hero__image .elementor-widget-container {
width: 100%;
height: 100%;
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
IMAGE
Das Motiv wird innerhalb der erweiterten Bildfläche
bewusst nach rechts priorisiert.
========================================================= */
.sph-subpage-hero__image img {
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
object-fit: cover;
/*
* Leichte Verschiebung nach rechts.
* Dadurch sitzt das Hauptmotiv weniger zentral und
* bekommt rechts mehr visuelles Gewicht.
*/
object-position: 62% center;
}
/* =========================================================
DARK BLUE OVERLAY
Links vollständig dunkelblau.
Das Bild beginnt bereits bei 40 %, bleibt dort aber
zunächst stark vom Overlay überdeckt.
Erst danach wird das Bild kontinuierlich freigegeben.
Dadurch entsteht kein sichtbarer vertikaler Schnitt.
========================================================= */
.sph-subpage-hero__media::before {
content: "";
position: absolute;
z-index: 1;
inset: 0;
pointer-events: none;
background:
linear-gradient(
90deg,
rgba(14, 47, 74, 1) 0%,
rgba(14, 47, 74, 1) 32%,
rgba(14, 47, 74, 0.99) 38%,
rgba(14, 47, 74, 0.96) 44%,
rgba(14, 47, 74, 0.88) 50%,
rgba(14, 47, 74, 0.72) 58%,
rgba(14, 47, 74, 0.50) 66%,
rgba(14, 47, 74, 0.28) 74%,
rgba(14, 47, 74, 0.12) 82%,
rgba(14, 47, 74, 0.03) 90%,
rgba(14, 47, 74, 0) 96%
);
}
/* =========================================================
CONTENT
Desktop und Tablet Landscape:
Contentbereich bleibt exakt 50 % der Hero-Fläche.
Der eigentliche Text erhält innerhalb dieser Fläche
kontrollierte Breiten, damit die Zeilen nicht unnötig
lang werden.
========================================================= */
.sph-subpage-hero__content {
position: relative;
z-index: 2;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important;
flex: 0 0 50% !important;
width: 50% !important;
max-width: 50% !important;
min-width: 0;
margin: 0 !important;
padding:
clamp(48px, 4vw, 72px) !important;
gap: 0 !important;
box-sizing: border-box;
}
/* =========================================================
PAGE TITLE / H1
Typografie kommt weiterhin aus sph-page-title.
========================================================= */
.sph-subpage-hero__page-title {
width: 100%;
margin: 0 0 28px !important;
}
.sph-subpage-hero__page-title h1 {
margin: 0 !important;
}
/* =========================================================
HEADLINE / H2
========================================================= */
.sph-subpage-hero__headline {
width: 100%;
max-width: 600px;
margin: 0 0 28px !important;
}
.sph-subpage-hero__headline h2 {
margin: 0 !important;
color: var(--sph-white);
text-wrap: balance;
}
/* =========================================================
COPY
Etwas kompakter als bisher.
Gewicht bleibt kräftig genug für den Hero.
========================================================= */
.sph-subpage-hero__copy {
width: 100%;
max-width: 560px;
margin: 0 !important;
}
.sph-subpage-hero__copy,
.sph-subpage-hero__copy p {
color: var(--sph-white);
font-size: clamp(1rem, 0.95vw, 1.125rem);
line-height: 1.55;
font-weight: 500;
}
.sph-subpage-hero__copy p {
margin: 0 !important;
}
/* =========================================================
OPTIONALER BUTTON
Keine lokale Button-Gestaltung.
Ausschließlich Positionierung.
========================================================= */
.sph-subpage-hero__button {
margin:
32px 0 0 !important;
}
/* =========================================================
<= 1399px
========================================================= */
@media (max-width: 1399px) {
.sph-subpage-hero__media {
min-height: 560px;
}
.sph-subpage-hero__content {
flex-basis: 50% !important;
width: 50% !important;
max-width: 50% !important;
padding:
56px !important;
}
.sph-subpage-hero__image {
left: 39%;
width: 61% !important;
}
.sph-subpage-hero__image img {
object-position: 64% center;
}
}
/* =========================================================
<= 1199px
TABLET LANDSCAPE
50-%-Contentbereich bleibt bestehen.
========================================================= */
@media (max-width: 1199px) {
.sph-subpage-hero__media {
min-height: 520px;
}
.sph-subpage-hero__content {
flex-basis: 50% !important;
width: 50% !important;
max-width: 50% !important;
padding:
48px !important;
}
.sph-subpage-hero__image {
left: 38%;
width: 62% !important;
}
.sph-subpage-hero__image img {
object-position: 66% center;
}
.sph-subpage-hero__page-title {
margin-bottom:
24px !important;
}
.sph-subpage-hero__headline {
margin-bottom:
24px !important;
}
.sph-subpage-hero__button {
margin-top:
28px !important;
}
}
/* =========================================================
<= 991px
TABLET PORTRAIT
Contentbereich wird breiter.
Das Bild läuft weiterhin unter den Verlauf.
========================================================= */
@media (max-width: 991px) {
.sph-subpage-hero__media {
min-height: 500px;
}
.sph-subpage-hero__content {
flex-basis: 64% !important;
width: 64% !important;
max-width: 64% !important;
padding:
44px 40px !important;
}
.sph-subpage-hero__image {
left: 32%;
width: 68% !important;
}
.sph-subpage-hero__image img {
object-position:
68% center;
}
.sph-subpage-hero__media::before {
background:
linear-gradient(
90deg,
rgba(14, 47, 74, 1) 0%,
rgba(14, 47, 74, 1) 36%,
rgba(14, 47, 74, 0.98) 46%,
rgba(14, 47, 74, 0.90) 56%,
rgba(14, 47, 74, 0.70) 66%,
rgba(14, 47, 74, 0.42) 76%,
rgba(14, 47, 74, 0.16) 88%,
rgba(14, 47, 74, 0) 100%
);
}
.sph-subpage-hero__button {
margin-top:
28px !important;
}
}
/* =========================================================
<= 767px
MOBILE LANDSCAPE / MOBILE
Ab hier wieder vollflächiges Bild.
Der horizontale Verlauf wird durch einen vertikalen
Verlauf ersetzt.
========================================================= */
@media (max-width: 767px) {
.sph-subpage-hero__media {
justify-content:
flex-end !important;
min-height:
560px;
}
.sph-subpage-hero__image {
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
.sph-subpage-hero__image img {
object-position:
65% center;
}
.sph-subpage-hero__media::before {
background:
linear-gradient(
180deg,
rgba(14, 47, 74, 0.06) 0%,
rgba(14, 47, 74, 0.16) 22%,
rgba(14, 47, 74, 0.52) 46%,
rgba(14, 47, 74, 0.90) 68%,
rgba(14, 47, 74, 1) 100%
);
}
.sph-subpage-hero__content {
justify-content:
flex-end !important;
flex-basis:
100% !important;
width:
100% !important;
max-width:
100% !important;
padding:
48px 32px !important;
}
.sph-subpage-hero__page-title {
margin-bottom:
20px !important;
}
.sph-subpage-hero__headline {
max-width:
620px;
margin-bottom:
20px !important;
}
.sph-subpage-hero__copy {
max-width:
520px;
}
.sph-subpage-hero__button {
margin-top:
24px !important;
}
}
/* =========================================================
<= 576px
MOBILE PORTRAIT
========================================================= */
@media (max-width: 576px) {
.sph-subpage-hero__media {
min-height:
520px;
}
.sph-subpage-hero__content {
padding:
40px 20px !important;
}
.sph-subpage-hero__page-title {
margin-bottom:
18px !important;
}
.sph-subpage-hero__headline {
margin-bottom:
18px !important;
}
.sph-subpage-hero__copy,
.sph-subpage-hero__copy p {
font-size: 1rem;
line-height: 1.5;
}
.sph-subpage-hero__button {
margin-top:
24px !important;
}
}
/* =========================================================
<= 400px
VERY SMALL DEVICES
========================================================= */
@media (max-width: 400px) {
.sph-subpage-hero__media {
min-height:
500px;
}
.sph-subpage-hero__content {
padding:
36px 20px !important;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.sph-subpage-hero,
.sph-subpage-hero *,
.sph-subpage-hero *::before,
.sph-subpage-hero *::after {
transition:
none !important;
animation:
none !important;
}
}
/* =========================================================
COMPONENT: LÖSUNGEN ÜBERSICHT
========================================================= */
.sph-solutions-overview {
position: relative;
overflow: hidden;
isolation: isolate;
background-color: var(--sph-blue-dark);
}
/* ---------------------------------------------------------
BACKGROUND GRAPHIC
--------------------------------------------------------- */
.sph-solutions-overview::before {
content: "";
position: absolute;
z-index: 0;
top: 50%;
left: 0;
width: clamp(520px, 43vw, 860px);
height: min(88%, 680px);
transform: translateY(-50%);
pointer-events: none;
opacity: 0.76;
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 650' fill='none'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-40 92H185C225 92 246 107 263 139L301 211C314 236 334 248 364 248H478C510 248 528 262 547 287L590 344C608 368 630 378 661 378H870' stroke='%2300cfb4' stroke-width='2.2' opacity='.56'/%3E%3Cpath d='M-40 171H143C178 171 196 183 211 208L250 272C264 295 282 306 311 306H405C436 306 454 291 470 267L507 211C523 187 542 176 572 176H760' stroke='%2300cfb4' stroke-width='1.7' opacity='.38'/%3E%3Cpath d='M-40 284H129C158 284 177 297 194 320L233 373C249 395 269 406 298 406H389C419 406 438 418 455 441L494 493C512 517 534 528 566 528H824' stroke='%2300cfb4' stroke-width='2' opacity='.48'/%3E%3Cpath d='M-40 410H118C151 410 171 397 189 373L230 318C247 295 267 284 297 284H375C408 284 427 297 444 323L483 382C500 408 521 421 553 421H678C706 421 724 409 741 388L774 347C791 326 810 316 840 316H920' stroke='%2300cfb4' stroke-width='2.3' opacity='.62'/%3E%3Cpath d='M-40 516H86C119 516 138 502 154 478L194 419C210 395 229 384 259 384H340C372 384 390 369 406 345L442 291C459 265 479 253 511 253H614' stroke='%2300cfb4' stroke-width='1.6' opacity='.34'/%3E%3Cpath d='M-40 579H116C148 579 169 568 186 544L228 486C244 464 264 453 293 453H385C417 453 436 467 452 491L487 543C504 568 525 580 557 580H756' stroke='%2300cfb4' stroke-width='1.5' opacity='.3'/%3E%3Cpath d='M-20 132H110C151 132 176 151 191 188L228 279C240 309 259 323 292 323H355C386 323 405 335 421 358L458 411C475 435 495 447 526 447H644' stroke='%23ffffff' stroke-width='1' stroke-dasharray='7 11' opacity='.13'/%3E%3Cpath d='M-20 620H88C126 620 149 604 165 570L200 496C214 467 235 453 268 453H349C382 453 403 439 420 412L457 353C473 327 494 315 526 315H702' stroke='%23ffffff' stroke-width='1' stroke-dasharray='7 11' opacity='.1'/%3E%3C/g%3E%3Cg fill='%2300cfb4'%3E%3Ccircle cx='185' cy='92' r='5' opacity='.56'/%3E%3Ccircle cx='250' cy='272' r='7' opacity='.72'/%3E%3Ccircle cx='301' cy='211' r='11' opacity='.95'/%3E%3Ccircle cx='311' cy='306' r='5' opacity='.52'/%3E%3Ccircle cx='233' cy='373' r='6' opacity='.64'/%3E%3Ccircle cx='298' cy='406' r='10' opacity='.88'/%3E%3Ccircle cx='297' cy='284' r='5' opacity='.48'/%3E%3Ccircle cx='389' cy='406' r='5' opacity='.55'/%3E%3Ccircle cx='444' cy='323' r='7' opacity='.68'/%3E%3Ccircle cx='478' cy='248' r='5' opacity='.48'/%3E%3Ccircle cx='511' cy='253' r='8' opacity='.7'/%3E%3Ccircle cx='553' cy='421' r='11' opacity='.96'/%3E%3Ccircle cx='566' cy='528' r='5' opacity='.5'/%3E%3Ccircle cx='661' cy='378' r='7' opacity='.72'/%3E%3Ccircle cx='741' cy='388' r='5' opacity='.48'/%3E%3C/g%3E%3Cg fill='none' stroke='%2300cfb4'%3E%3Ccircle cx='301' cy='211' r='22' stroke-width='1.5' opacity='.25'/%3E%3Ccircle cx='298' cy='406' r='20' stroke-width='1.5' opacity='.22'/%3E%3Ccircle cx='553' cy='421' r='23' stroke-width='1.5' opacity='.26'/%3E%3C/g%3E%3C/svg%3E");
}
.sph-solutions-overview::after {
content: "";
position: absolute;
z-index: 1;
inset: 0;
pointer-events: none;
background:
linear-gradient(
90deg,
rgba(14,47,74,.05) 0%,
rgba(14,47,74,.18) 34%,
rgba(14,47,74,.78) 56%,
var(--sph-blue-dark) 78%
);
}
/* ---------------------------------------------------------
INNER
--------------------------------------------------------- */
.sph-solutions-overview__inner {
position: relative;
z-index: 2;
width: 100% !important;
gap: clamp(56px, 5vw, 80px) !important;
}
/* ---------------------------------------------------------
HEADER
--------------------------------------------------------- */
.sph-solutions-overview__header {
position: relative;
z-index: 3;
width: 100%;
max-width: 1120px;
margin: 0 !important;
}
.sph-solutions-overview__eyebrow,
.sph-solutions-overview__title {
margin: 0 !important;
}
/* ---------------------------------------------------------
GRID
--------------------------------------------------------- */
.sph-solutions-overview__grid {
position: relative;
z-index: 3;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100% !important;
max-width: none !important;
margin: 0 !important;
gap: 0 !important;
border-top: 1px solid rgba(255,255,255,.16);
}
/* ---------------------------------------------------------
SOLUTION ITEM
--------------------------------------------------------- */
.sph-solutions-overview__item {
position: relative;
display: grid !important;
grid-template-columns: 86px minmax(0, 1fr);
align-items: start !important;
min-width: 0;
min-height: 330px;
padding: 38px 76px 72px 40px !important;
gap: 0 !important;
border-bottom: 1px solid rgba(255,255,255,.16);
overflow: hidden;
cursor: pointer;
transition:
background-color .28s ease;
}
.sph-solutions-overview__item:nth-child(odd) {
border-right: 1px solid rgba(255,255,255,.16);
}
/* ---------------------------------------------------------
ICON
--------------------------------------------------------- */
.sph-solutions-overview__marker {
position: relative;
z-index: 2;
display: flex !important;
align-items: flex-start !important;
justify-content: flex-start !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: none;
}
.sph-solutions-overview__marker-shape {
display: block;
width: 54px;
height: 54px;
flex: 0 0 54px;
margin: 0 !important;
padding: 0 !important;
background-color: var(--sph-white) !important;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* IN:FASHION */
.sph-solution--fashion
.sph-solutions-overview__marker-shape {
-webkit-mask-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0-2.5 1.8-4.5 4.2-4.5 2.3 0 4.1 1.7 4.1 4 0 2.2-1.3 3.4-3.3 4.6l-1 0.6v3.1'/%3E%3Cpath d='M24 20.8 7.5 33.5c-1.4 1.1-.6 3.3 1.2 3.3h30.6c1.8 0 2.6-2.2 1.2-3.3L24 20.8Z'/%3E%3C/g%3E%3C/svg%3E");
mask-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0-2.5 1.8-4.5 4.2-4.5 2.3 0 4.1 1.7 4.1 4 0 2.2-1.3 3.4-3.3 4.6l-1 0.6v3.1'/%3E%3Cpath d='M24 20.8 7.5 33.5c-1.4 1.1-.6 3.3 1.2 3.3h30.6c1.8 0 2.6-2.2 1.2-3.3L24 20.8Z'/%3E%3C/g%3E%3C/svg%3E");
}
/* IN:OMNICHANNEL */
.sph-solution--omnichannel
.sph-solutions-overview__marker-shape {
-webkit-mask-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='14' r='4'/%3E%3Ccircle cx='36' cy='12' r='4'/%3E%3Ccircle cx='37' cy='35' r='4'/%3E%3Ccircle cx='13' cy='36' r='4'/%3E%3Ccircle cx='24' cy='24' r='5'/%3E%3Cpath d='m15.5 16 4.5 5M32.5 15l-5 5M28 27l5.5 5M20.5 28 16 33'/%3E%3C/g%3E%3C/svg%3E");
mask-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='14' r='4'/%3E%3Ccircle cx='36' cy='12' r='4'/%3E%3Ccircle cx='37' cy='35' r='4'/%3E%3Ccircle cx='13' cy='36' r='4'/%3E%3Ccircle cx='24' cy='24' r='5'/%3E%3Cpath d='m15.5 16 4.5 5M32.5 15l-5 5M28 27l5.5 5M20.5 28 16 33'/%3E%3C/g%3E%3C/svg%3E");
}
/* IN:FINANCE */
.sph-solution--finance
.sph-solutions-overview__marker-shape {
-webkit-mask-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 7h19l7 7v27H11V7Z'/%3E%3Cpath d='M30 7v8h7M17 33v-7M24 33V18M31 33v-11M16 36h16'/%3E%3C/g%3E%3C/svg%3E");
mask-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 7h19l7 7v27H11V7Z'/%3E%3Cpath d='M30 7v8h7M17 33v-7M24 33V18M31 33v-11M16 36h16'/%3E%3C/g%3E%3C/svg%3E");
}
/* AI:REPLENISH */
.sph-solution--replenish
.sph-solutions-overview__marker-shape {
-webkit-mask-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 17 24 12l10 5v11l-10 5-10-5V17Z'/%3E%3Cpath d='m14 17 10 5 10-5M24 22v11'/%3E%3Cpath d='M9 17a17 17 0 0 1 27-8M39 31a17 17 0 0 1-27 8'/%3E%3Cpath d='m32 7 5 1-1 5M16 41l-5-1 1-5'/%3E%3C/g%3E%3C/svg%3E");
mask-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 17 24 12l10 5v11l-10 5-10-5V17Z'/%3E%3Cpath d='m14 17 10 5 10-5M24 22v11'/%3E%3Cpath d='M9 17a17 17 0 0 1 27-8M39 31a17 17 0 0 1-27 8'/%3E%3Cpath d='m32 7 5 1-1 5M16 41l-5-1 1-5'/%3E%3C/g%3E%3C/svg%3E");
}
/* ---------------------------------------------------------
CONTENT
--------------------------------------------------------- */
.sph-solutions-overview__body {
position: static;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
gap: 12px !important;
pointer-events: none;
}
.sph-solutions-overview__name,
.sph-solutions-overview__subtitle,
.sph-solutions-overview__copy,
.sph-solutions-overview__cta {
margin: 0 !important;
}
/* ---------------------------------------------------------
SUBTITLE
--------------------------------------------------------- */
.sph-solutions-overview__subtitle
.elementor-heading-title {
margin: 0 !important;
font-family: "Overpass", sans-serif;
font-size: clamp(
1.25rem,
.45vw + 1.1rem,
1.625rem
);
line-height: 1.22;
font-weight: 700;
color: var(--sph-white) !important;
}
/* ---------------------------------------------------------
COPY
--------------------------------------------------------- */
.sph-solutions-overview__copy {
max-width: 520px;
}
.sph-solutions-overview__copy p {
margin: 0 !important;
}
/* ---------------------------------------------------------
CTA / FAST FORWARD
Wie auf der Homepage:
nur Fast-Forward rechts unten in der gesamten Kachel.
--------------------------------------------------------- */
.sph-solutions-overview__cta {
position: absolute !important;
z-index: 4;
right: 40px !important;
bottom: 32px !important;
display: block !important;
width: 32px !important;
height: 32px !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
font-size: 0 !important;
line-height: 0 !important;
color: transparent !important;
pointer-events: none;
}
.sph-solutions-overview__cta .elementor-widget-container {
position: absolute !important;
inset: 0;
display: block !important;
width: 32px !important;
height: 32px !important;
margin: 0 !important;
padding: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
color: transparent !important;
}
.sph-solutions-overview__cta .elementor-widget-container > * {
display: none !important;
}
.sph-solutions-overview__cta::after {
content: "";
position: absolute;
inset: 0;
display: block;
width: 32px;
height: 32px;
background-color: var(--sph-orange);
-webkit-mask:
url("https://sph-ag.com/wp-content/uploads/2024/05/fast-forward.svg")
center / contain no-repeat;
mask:
url("https://sph-ag.com/wp-content/uploads/2024/05/fast-forward.svg")
center / contain no-repeat;
transition: transform .22s ease;
}
/* ---------------------------------------------------------
HOVER
--------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
.sph-solutions-overview__item:hover
.sph-solutions-overview__cta::after {
transform: translateX(6px);
}
}
/* ---------------------------------------------------------
RESPONSIVE
--------------------------------------------------------- */
@media (max-width: 1199px) {
.sph-solutions-overview__cta {
right: 28px !important;
bottom: 28px !important;
}
}
@media (max-width: 767px) {
.sph-solutions-overview__cta,
.sph-solutions-overview__cta .elementor-widget-container {
width: 28px !important;
height: 28px !important;
}
.sph-solutions-overview__cta {
right: 20px !important;
bottom: 24px !important;
}
.sph-solutions-overview__cta::after {
width: 28px;
height: 28px;
}
}
/* ---------------------------------------------------------
REDUCED MOTION
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.sph-solutions-overview__cta::after {
transition: none !important;
}
}
/* ---------------------------------------------------------
FULL CARD LINK
--------------------------------------------------------- */
.sph-solutions-overview__link,
.sph-solutions-overview__link
.elementor-widget-container {
position: static !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: none;
}
.sph-solutions-overview__row-link {
position: absolute !important;
z-index: 10;
inset: 0;
display: block;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-decoration: none !important;
cursor: pointer;
pointer-events: auto;
}
/* ---------------------------------------------------------
HOVER
--------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
.sph-solutions-overview__item:hover {
background-color: rgba(255,255,255,.045);
}
.sph-solutions-overview__item:hover
.sph-solutions-overview__cta-icon {
transform: translateX(6px);
}
}
/* ---------------------------------------------------------
FOCUS
--------------------------------------------------------- */
.sph-solutions-overview__row-link:focus {
outline: none;
}
.sph-solutions-overview__row-link:focus-visible {
outline: 2px solid var(--sph-turquoise);
outline-offset: -4px;
}
/* =========================================================
TABLET LANDSCAPE
<= 1199px
========================================================= */
@media (max-width: 1199px) {
.sph-solutions-overview__item {
grid-template-columns:
72px minmax(0,1fr);
padding:
32px 64px 68px 28px !important;
}
.sph-solutions-overview__cta {
right: 28px !important;
bottom: 28px !important;
}
}
/* =========================================================
TABLET PORTRAIT
<= 991px
========================================================= */
@media (max-width: 991px) {
.sph-solutions-overview::before {
left: -220px;
opacity: .46;
}
.sph-solutions-overview::after {
background:
rgba(14,47,74,.58);
}
.sph-solutions-overview__grid {
grid-template-columns: 1fr;
}
.sph-solutions-overview__item {
min-height: 0;
border-right: 0 !important;
}
}
/* =========================================================
MOBILE LANDSCAPE
<= 767px
========================================================= */
@media (max-width: 767px) {
.sph-solutions-overview::before {
left: -330px;
opacity: .34;
}
.sph-solutions-overview__inner {
gap: 40px !important;
}
.sph-solutions-overview__item {
grid-template-columns:
58px minmax(0,1fr);
padding:
28px 56px 64px 20px !important;
}
.sph-solutions-overview__marker-shape {
width: 42px;
height: 42px;
flex-basis: 42px;
}
.sph-solutions-overview__cta {
right: 20px !important;
bottom: 24px !important;
width: 28px !important;
height: 28px !important;
}
.sph-solutions-overview__cta-icon {
width: 28px !important;
height: 28px !important;
}
}
/* =========================================================
MOBILE PORTRAIT
<= 576px
========================================================= */
@media (max-width: 576px) {
.sph-solutions-overview__item {
grid-template-columns: 1fr;
gap: 18px !important;
padding:
24px 52px 62px 20px !important;
}
.sph-solutions-overview__marker {
width: auto !important;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.sph-solutions-overview__item,
.sph-solutions-overview__cta-icon {
transition: none !important;
}
}
/* =========================================================
COMPONENT: BRANCHENKOMPETENZ
========================================================= */
.sph-industry-competence {
position: relative;
background-color: var(--sph-white);
}
/* ---------------------------------------------------------
INNER
--------------------------------------------------------- */
.sph-industry-competence__inner {
display: grid !important;
grid-template-columns:
minmax(0, 0.92fr)
minmax(0, 1.08fr);
align-items: start !important;
width: 100%;
gap: clamp(72px, 7vw, 120px) !important;
}
/* =========================================================
LEFT CONTENT
========================================================= */
.sph-industry-competence__content {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
width: 100%;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
}
/* ---------------------------------------------------------
EYEBROW
--------------------------------------------------------- */
.sph-industry-competence__eyebrow {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
/* ---------------------------------------------------------
HEADLINE
--------------------------------------------------------- */
.sph-industry-competence__title {
width: 100%;
margin: 0 0 32px 0 !important;
padding: 18px 0 0 0 !important;
}
/* ---------------------------------------------------------
COPY
--------------------------------------------------------- */
.sph-industry-competence__copy {
width: 100%;
max-width: 700px;
margin: 0 !important;
padding: 0 !important;
}
.sph-industry-competence__copy p {
margin: 0 0 24px 0 !important;
}
.sph-industry-competence__copy p:last-child {
margin-bottom: 0 !important;
}
.sph-industry-competence__copy strong {
font-weight: 700 !important;
color: var(--sph-blue) !important;
}
/* =========================================================
TOPICS GRID
========================================================= */
.sph-industry-competence__topics {
display: grid !important;
grid-template-columns:
repeat(2, minmax(0, 1fr));
align-items: stretch !important;
width: 100%;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
border-top:
1px solid rgba(24, 56, 88, .16);
border-left:
1px solid rgba(24, 56, 88, .16);
}
/* =========================================================
TOPIC
========================================================= */
.sph-industry-topic {
position: relative;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
min-width: 0;
min-height: 300px;
margin: 0 !important;
padding:
36px 36px 40px 36px !important;
gap: 0 !important;
border-right:
1px solid rgba(24, 56, 88, .16);
border-bottom:
1px solid rgba(24, 56, 88, .16);
}
/* =========================================================
ICON WIDGET
========================================================= */
.sph-industry-topic__icon-widget {
display: block !important;
width: 58px !important;
height: 58px !important;
flex: 0 0 58px !important;
margin: 0 0 28px 0 !important;
padding: 0 !important;
}
.sph-industry-topic__icon-widget
.elementor-widget-container {
display: block !important;
width: 58px !important;
height: 58px !important;
margin: 0 !important;
padding: 0 !important;
}
/* ---------------------------------------------------------
ICON BASE
--------------------------------------------------------- */
.sph-industry-topic__icon {
display: block;
width: 58px;
height: 58px;
margin: 0;
padding: 0;
background-color:
var(--sph-turquoise);
-webkit-mask-repeat:
no-repeat;
mask-repeat:
no-repeat;
-webkit-mask-position:
center;
mask-position:
center;
-webkit-mask-size:
contain;
mask-size:
contain;
}
/* ---------------------------------------------------------
ICON: KOLLEKTIONEN & SAISONS
--------------------------------------------------------- */
.sph-industry-topic--seasons
.sph-industry-topic__icon {
-webkit-mask-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12.5c0-2.4 1.8-4.3 4.1-4.3 2.3 0 4.1 1.7 4.1 4 0 2.1-1.3 3.3-3.2 4.5l-1 .6v3.3'/%3E%3Cpath d='M24 20.6 7.6 33.3c-1.5 1.2-.7 3.5 1.2 3.5h30.4c1.9 0 2.7-2.3 1.2-3.5L24 20.6Z'/%3E%3C/g%3E%3C/svg%3E");
mask-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12.5c0-2.4 1.8-4.3 4.1-4.3 2.3 0 4.1 1.7 4.1 4 0 2.1-1.3 3.3-3.2 4.5l-1 .6v3.3'/%3E%3Cpath d='M24 20.6 7.6 33.3c-1.5 1.2-.7 3.5 1.2 3.5h30.4c1.9 0 2.7-2.3 1.2-3.5L24 20.6Z'/%3E%3C/g%3E%3C/svg%3E");
}
/* ---------------------------------------------------------
ICON: ARTIKEL & VARIANTEN
--------------------------------------------------------- */
.sph-industry-topic--variants
.sph-industry-topic__icon {
-webkit-mask-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m24 6 15 8v20l-15 8-15-8V14l15-8Z'/%3E%3Cpath d='m9 14 15 8 15-8M24 22v20'/%3E%3Cpath d='m17 10 15 8'/%3E%3C/g%3E%3C/svg%3E");
mask-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m24 6 15 8v20l-15 8-15-8V14l15-8Z'/%3E%3Cpath d='m9 14 15 8 15-8M24 22v20'/%3E%3Cpath d='m17 10 15 8'/%3E%3C/g%3E%3C/svg%3E");
}
/* ---------------------------------------------------------
ICON: WARE & VERFÜGBARKEIT
--------------------------------------------------------- */
.sph-industry-topic--availability
.sph-industry-topic__icon {
-webkit-mask-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 37h32'/%3E%3Cpath d='M10 26h10v11H10V26ZM28 26h10v11H28V26ZM19 14h10v12H19V14Z'/%3E%3Cpath d='M24 7v7M20.5 10.5 24 7l3.5 3.5'/%3E%3C/g%3E%3C/svg%3E");
mask-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 37h32'/%3E%3Cpath d='M10 26h10v11H10V26ZM28 26h10v11H28V26ZM19 14h10v12H19V14Z'/%3E%3Cpath d='M24 7v7M20.5 10.5 24 7l3.5 3.5'/%3E%3C/g%3E%3C/svg%3E");
}
/* ---------------------------------------------------------
ICON: KANÄLE & VERTRIEBSWEGE
--------------------------------------------------------- */
.sph-industry-topic--channels
.sph-industry-topic__icon {
-webkit-mask-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='5.5'/%3E%3Ccircle cx='11' cy='11' r='4'/%3E%3Ccircle cx='37' cy='11' r='4'/%3E%3Ccircle cx='37' cy='37' r='4'/%3E%3Ccircle cx='11' cy='37' r='4'/%3E%3Cpath d='m14 14 6 6M34 14l-6 6M28 28l6 6M20 28l-6 6'/%3E%3C/g%3E%3C/svg%3E");
mask-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='5.5'/%3E%3Ccircle cx='11' cy='11' r='4'/%3E%3Ccircle cx='37' cy='11' r='4'/%3E%3Ccircle cx='37' cy='37' r='4'/%3E%3Ccircle cx='11' cy='37' r='4'/%3E%3Cpath d='m14 14 6 6M34 14l-6 6M28 28l6 6M20 28l-6 6'/%3E%3C/g%3E%3C/svg%3E");
}
/* =========================================================
TOPIC BODY
========================================================= */
.sph-industry-topic__body {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
width: 100%;
margin: 0 !important;
padding: 0 !important;
gap: 12px !important;
}
/* ---------------------------------------------------------
TOPIC TITLE
--------------------------------------------------------- */
.sph-industry-topic__title {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.sph-industry-topic__title
.elementor-heading-title {
margin: 0 !important;
font-family:
"Overpass",
sans-serif !important;
font-size:
clamp(
1.25rem,
.45vw + 1.1rem,
1.625rem
) !important;
line-height: 1.2 !important;
font-weight: 700 !important;
color:
var(--sph-blue) !important;
text-transform: uppercase;
}
/* ---------------------------------------------------------
TOPIC COPY
--------------------------------------------------------- */
.sph-industry-topic__copy {
width: 100%;
max-width: 340px;
margin: 0 !important;
padding: 0 !important;
}
.sph-industry-topic__copy p {
margin: 0 !important;
}
/* =========================================================
LAPTOP
<= 1399px
========================================================= */
@media (max-width: 1399px) {
.sph-industry-competence__inner {
gap: 72px !important;
}
.sph-industry-topic {
min-height: 280px;
padding:
32px 30px 36px 30px !important;
}
}
/* =========================================================
TABLET LANDSCAPE
<= 1199px
========================================================= */
@media (max-width: 1199px) {
.sph-industry-competence__inner {
grid-template-columns:
minmax(0, .9fr)
minmax(0, 1.1fr);
gap: 56px !important;
}
.sph-industry-competence__title {
margin-bottom: 28px !important;
}
.sph-industry-topic {
min-height: 260px;
padding:
28px 26px 32px 26px !important;
}
.sph-industry-topic__icon-widget,
.sph-industry-topic__icon-widget
.elementor-widget-container,
.sph-industry-topic__icon {
width: 52px !important;
height: 52px !important;
}
.sph-industry-topic__icon-widget {
flex-basis: 52px !important;
margin-bottom: 24px !important;
}
}
/* =========================================================
TABLET PORTRAIT
<= 991px
========================================================= */
@media (max-width: 991px) {
.sph-industry-competence__inner {
grid-template-columns: 1fr;
gap: 56px !important;
}
.sph-industry-competence__content {
max-width: 760px;
}
.sph-industry-competence__topics {
width: 100%;
}
.sph-industry-topic {
min-height: 250px;
}
}
/* =========================================================
MOBILE LANDSCAPE
<= 767px
========================================================= */
@media (max-width: 767px) {
.sph-industry-competence__inner {
gap: 48px !important;
}
.sph-industry-competence__title {
margin-bottom: 24px !important;
}
.sph-industry-competence__copy p {
margin-bottom: 20px !important;
}
.sph-industry-topic {
min-height: 230px;
padding:
26px 22px 30px 22px !important;
}
.sph-industry-topic__icon-widget,
.sph-industry-topic__icon-widget
.elementor-widget-container,
.sph-industry-topic__icon {
width: 46px !important;
height: 46px !important;
}
.sph-industry-topic__icon-widget {
flex-basis: 46px !important;
margin-bottom: 22px !important;
}
}
/* =========================================================
MOBILE PORTRAIT
<= 576px
========================================================= */
@media (max-width: 576px) {
.sph-industry-competence__inner {
gap: 40px !important;
}
.sph-industry-competence__topics {
grid-template-columns: 1fr;
}
.sph-industry-topic {
min-height: 0;
padding:
28px 20px 30px 20px !important;
}
.sph-industry-topic__copy {
max-width: 100%;
}
}
/* =========================================================
COMPONENT: TECHNOLOGIE + KONTAKT CTA
========================================================= */
.sph-tech-contact {
position: relative;
width: 100%;
margin: 0 !important;
padding: 0 !important;
background:
linear-gradient(
90deg,
var(--sph-blue-dark) 0%,
var(--sph-blue-dark) 72%,
var(--sph-grey-light) 72%,
var(--sph-grey-light) 100%
);
}
/* ---------------------------------------------------------
INNER
--------------------------------------------------------- */
.sph-tech-contact__inner {
display: grid !important;
grid-template-columns:
minmax(0, 3fr)
minmax(320px, 1fr);
align-items: stretch !important;
width: 100%;
margin: 0 auto !important;
padding: 0 !important;
gap: 0 !important;
overflow: visible !important;
}
/* =========================================================
TECHNOLOGY AREA
========================================================= */
.sph-tech-contact__technology {
position: relative;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
min-width: 0;
min-height: 620px;
margin: 0 !important;
padding:
clamp(56px, 5vw, 80px)
clamp(48px, 5vw, 80px) !important;
gap: 0 !important;
background-color:
var(--sph-blue-dark);
color:
var(--sph-white);
}
/* ---------------------------------------------------------
LEFT BACKGROUND EXTENSION
--------------------------------------------------------- */
.sph-tech-contact__technology::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
right: 100%;
bottom: 0;
width: 100vw;
background-color:
var(--sph-blue-dark);
pointer-events: none;
}
/* ---------------------------------------------------------
LEFT EYEBROW
--------------------------------------------------------- */
.sph-tech-contact__eyebrow {
width: 100%;
margin: 0 0 12px 0 !important;
padding: 0 !important;
}
/* ---------------------------------------------------------
LEFT TITLE
--------------------------------------------------------- */
.sph-tech-contact__title {
width: 100%;
max-width: 820px;
margin: 0 0 28px 0 !important;
padding: 0 !important;
}
.sph-tech-contact__title
.elementor-heading-title {
color:
var(--sph-white) !important;
}
/* ---------------------------------------------------------
LEFT COPY
--------------------------------------------------------- */
.sph-tech-contact__copy {
width: 100%;
max-width: 720px;
margin: 0 0 32px 0 !important;
padding: 0 !important;
}
.sph-tech-contact__copy,
.sph-tech-contact__copy p {
color:
var(--sph-white) !important;
}
.sph-tech-contact__copy p {
margin: 0 !important;
}
/* ---------------------------------------------------------
TECHNOLOGY BUTTON
Nur Layout.
Typografie, Farbe, Pfeil, Padding und Hover kommen
vollständig aus dem globalen SPH-Button.
--------------------------------------------------------- */
.sph-tech-contact__button--technology {
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
TECHNOLOGY STACK
========================================================= */
.sph-tech-contact__stack {
display: grid !important;
grid-template-columns:
repeat(5, minmax(0, 1fr));
align-items: stretch !important;
width: 100%;
margin:
auto 0 0 0 !important;
padding:
64px 0 0 0 !important;
gap: 0 !important;
}
/* ---------------------------------------------------------
STACK ITEM
--------------------------------------------------------- */
.sph-tech-contact__stack-item {
position: relative;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
min-width: 0;
margin: 0 !important;
padding:
0 24px !important;
gap: 8px !important;
border-right:
1px solid rgba(255,255,255,.22);
}
.sph-tech-contact__stack-item:first-child {
padding-left:
0 !important;
}
.sph-tech-contact__stack-item:last-child {
padding-right:
0 !important;
border-right: 0;
}
/* ---------------------------------------------------------
STACK NAME
--------------------------------------------------------- */
.sph-tech-contact__stack-name {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.sph-tech-contact__stack-name
.elementor-heading-title {
margin: 0 !important;
font-family:
"Overpass",
sans-serif !important;
font-size:
clamp(
.9375rem,
.15vw + .9rem,
1.0625rem
) !important;
line-height:
1.3 !important;
font-weight:
700 !important;
color:
var(--sph-white) !important;
text-transform:
uppercase;
}
/* ---------------------------------------------------------
STACK COPY
--------------------------------------------------------- */
.sph-tech-contact__stack-copy {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.sph-tech-contact__stack-copy p {
margin: 0 !important;
font-family:
"Overpass",
sans-serif !important;
font-size:
clamp(
.75rem,
.1vw + .72rem,
.875rem
) !important;
line-height:
1.4 !important;
font-weight:
400 !important;
letter-spacing:
.02em;
color:
rgba(255,255,255,.62) !important;
text-transform:
uppercase;
}
/* =========================================================
CONTACT AREA
========================================================= */
.sph-tech-contact__contact {
position: relative;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
min-width: 0;
margin: 0 !important;
padding:
clamp(56px, 5vw, 80px)
clamp(40px, 4vw, 64px) !important;
gap: 0 !important;
background-color:
var(--sph-grey-light);
}
/* ---------------------------------------------------------
RIGHT BACKGROUND EXTENSION
--------------------------------------------------------- */
.sph-tech-contact__contact::after {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 100%;
width: 100vw;
background-color:
var(--sph-grey-light);
pointer-events: none;
}
/* ---------------------------------------------------------
RIGHT EYEBROW
--------------------------------------------------------- */
.sph-tech-contact__contact-eyebrow {
width: 100%;
margin: 0 0 12px 0 !important;
padding: 0 !important;
}
/* ---------------------------------------------------------
RIGHT TITLE
--------------------------------------------------------- */
.sph-tech-contact__contact-title {
width: 100%;
margin: 0 0 28px 0 !important;
padding: 0 !important;
}
.sph-tech-contact__contact-title
.elementor-heading-title {
color:
var(--sph-blue) !important;
}
/* ---------------------------------------------------------
RIGHT COPY
--------------------------------------------------------- */
.sph-tech-contact__contact-copy {
width: 100%;
max-width: 440px;
margin: 0 0 36px 0 !important;
padding: 0 !important;
}
.sph-tech-contact__contact-copy,
.sph-tech-contact__contact-copy p {
color:
var(--sph-blue) !important;
}
.sph-tech-contact__contact-copy p {
margin: 0 !important;
}
/* ---------------------------------------------------------
CONTACT BUTTON
Nur Layout.
Typografie, Farbe, Pfeil, Padding und Hover kommen
vollständig aus dem globalen SPH-Button.
--------------------------------------------------------- */
.sph-tech-contact__button--contact {
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
LAPTOP
<= 1399px
========================================================= */
@media (max-width: 1399px) {
.sph-tech-contact__inner {
grid-template-columns:
minmax(0, 2.5fr)
minmax(320px, 1fr);
}
.sph-tech-contact__technology {
min-height: 580px;
padding:
64px 56px !important;
}
.sph-tech-contact__contact {
padding:
64px 48px !important;
}
.sph-tech-contact__stack-item {
padding:
0 18px !important;
}
}
/* =========================================================
TABLET LANDSCAPE
<= 1199px
========================================================= */
@media (max-width: 1199px) {
.sph-tech-contact__inner {
grid-template-columns:
minmax(0, 2fr)
minmax(300px, 1fr);
}
.sph-tech-contact__technology {
min-height: 560px;
padding:
56px 48px !important;
}
.sph-tech-contact__contact {
padding:
56px 40px !important;
}
.sph-tech-contact__stack {
grid-template-columns:
repeat(3, minmax(0, 1fr));
row-gap:
28px !important;
padding-top:
52px !important;
}
.sph-tech-contact__stack-item {
padding:
0 18px !important;
}
.sph-tech-contact__stack-item:nth-child(3) {
border-right: 0;
}
.sph-tech-contact__stack-item:nth-child(4) {
padding-left:
0 !important;
}
}
/* =========================================================
TABLET PORTRAIT
<= 991px
========================================================= */
@media (max-width: 991px) {
.sph-tech-contact {
background:
var(--sph-blue-dark);
}
.sph-tech-contact__inner {
grid-template-columns: 1fr;
}
.sph-tech-contact__technology {
min-height: 0;
padding:
56px 48px !important;
}
.sph-tech-contact__technology::before {
right: auto;
left: 50%;
width: 100vw;
transform:
translateX(-50%);
}
.sph-tech-contact__contact {
min-height: 0;
padding:
48px !important;
}
.sph-tech-contact__contact::after {
right: auto;
left: 50%;
width: 100vw;
transform:
translateX(-50%);
}
.sph-tech-contact__contact-copy {
max-width: 640px;
}
}
/* =========================================================
MOBILE LANDSCAPE
<= 767px
========================================================= */
@media (max-width: 767px) {
.sph-tech-contact__technology {
padding:
48px 32px !important;
}
.sph-tech-contact__title {
margin-bottom:
24px !important;
}
.sph-tech-contact__copy {
margin-bottom:
28px !important;
}
.sph-tech-contact__stack {
grid-template-columns:
repeat(2, minmax(0, 1fr));
padding-top:
48px !important;
row-gap:
28px !important;
}
.sph-tech-contact__stack-item {
padding:
0 16px !important;
}
.sph-tech-contact__stack-item:nth-child(odd) {
padding-left:
0 !important;
}
.sph-tech-contact__stack-item:nth-child(even) {
padding-right:
0 !important;
border-right: 0;
}
.sph-tech-contact__stack-item:nth-child(3) {
border-right:
1px solid rgba(255,255,255,.22);
}
.sph-tech-contact__contact {
padding:
48px 32px !important;
}
}
/* =========================================================
MOBILE PORTRAIT
<= 576px
========================================================= */
@media (max-width: 576px) {
.sph-tech-contact__technology {
padding:
40px 24px !important;
}
.sph-tech-contact__stack {
grid-template-columns:
1fr;
row-gap:
0 !important;
padding-top:
40px !important;
}
.sph-tech-contact__stack-item,
.sph-tech-contact__stack-item:first-child,
.sph-tech-contact__stack-item:nth-child(3),
.sph-tech-contact__stack-item:nth-child(4) {
padding:
18px 0 !important;
border-right: 0;
border-bottom:
1px solid rgba(255,255,255,.18);
}
.sph-tech-contact__stack-item:first-child {
padding-top:
0 !important;
}
.sph-tech-contact__stack-item:last-child {
padding-bottom:
0 !important;
border-bottom: 0;
}
.sph-tech-contact__contact {
padding:
40px 24px !important;
}
.sph-tech-contact__contact-title {
margin-bottom:
24px !important;
}
.sph-tech-contact__contact-copy {
margin-bottom:
28px !important;
}
}
/* =========================================================
COMPONENT: KONTAKTSEITE
========================================================= */
.sph-contact-page {
position: relative;
width: 100%;
margin: 0 !important;
padding: 0 !important;
background:
linear-gradient(
90deg,
var(--sph-white) 0%,
var(--sph-white) 65%,
var(--sph-blue-dark) 65%,
var(--sph-blue-dark) 100%
);
}
/* =========================================================
INNER
========================================================= */
.sph-contact-page__inner {
display: grid !important;
grid-template-columns:
minmax(0, 1.85fr)
minmax(360px, 1fr);
align-items: stretch !important;
width: 100%;
margin: 0 auto !important;
padding: 0 !important;
gap: 0 !important;
overflow: visible !important;
}
/* =========================================================
FORMULARBEREICH
========================================================= */
.sph-contact-page__main {
position: relative;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
min-width: 0;
margin: 0 !important;
padding:
clamp(72px, 6vw, 104px)
clamp(64px, 6vw, 96px)
clamp(80px, 7vw, 120px)
0 !important;
gap: 0 !important;
background-color:
var(--sph-white);
}
/* ---------------------------------------------------------
WEISSE FLÄCHE BIS ZUM LINKEN VIEWPORTRAND
--------------------------------------------------------- */
.sph-contact-page__main::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
right: 100%;
bottom: 0;
width: 100vw;
background-color:
var(--sph-white);
pointer-events: none;
}
/* =========================================================
INTRO
========================================================= */
.sph-contact-page__eyebrow {
width: 100%;
margin: 0 0 18px 0 !important;
padding: 0 !important;
}
.sph-contact-page__title {
width: 100%;
max-width: 820px;
margin: 0 0 28px 0 !important;
padding:
6px 0 0 0 !important;
}
.sph-contact-page__intro {
width: 100%;
max-width: 720px;
margin: 0 0 52px 0 !important;
padding: 0 !important;
}
.sph-contact-page__intro p {
margin: 0 !important;
}
/* =========================================================
QUICK FACTS
========================================================= */
.sph-contact-page__facts {
position: relative;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
min-width: 0;
margin: 0 !important;
padding:
clamp(72px, 6vw, 104px)
0
clamp(80px, 7vw, 120px)
clamp(56px, 5vw, 80px) !important;
gap: 0 !important;
background-color:
var(--sph-blue-dark);
color:
var(--sph-white);
}
/* ---------------------------------------------------------
DUNKELBLAUE FLÄCHE BIS ZUM RECHTEN VIEWPORTRAND
--------------------------------------------------------- */
.sph-contact-page__facts::after {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 100%;
width: 100vw;
background-color:
var(--sph-blue-dark);
pointer-events:
none;
}
/* =========================================================
FACTS HEADER
========================================================= */
.sph-contact-page__facts-eyebrow {
width: 100%;
margin:
0 0 18px 0 !important;
padding:
0 !important;
}
.sph-contact-page__facts-title {
width: 100%;
margin:
0 0 52px 0 !important;
padding:
6px 0 0 0 !important;
}
.sph-contact-page__facts-title
.elementor-heading-title {
color:
var(--sph-white) !important;
}
/* =========================================================
SINGLE FACT
========================================================= */
.sph-contact-page__fact {
display:
grid !important;
grid-template-columns:
64px minmax(0, 1fr);
align-items:
start !important;
width:
100%;
margin:
0 !important;
padding:
0 0 32px 0 !important;
column-gap:
28px !important;
row-gap:
0 !important;
border-bottom:
1px solid rgba(255, 255, 255, .42);
}
.sph-contact-page__fact
+
.sph-contact-page__fact {
padding-top:
32px !important;
}
/* ---------------------------------------------------------
FACT ICON
--------------------------------------------------------- */
.sph-contact-page__fact-icon-widget {
display:
flex !important;
align-items:
flex-start !important;
justify-content:
flex-start !important;
width:
64px !important;
margin:
0 !important;
padding:
2px 0 0 0 !important;
}
.sph-contact-page__fact-icon-widget
.elementor-widget-container {
display:
flex !important;
align-items:
flex-start !important;
justify-content:
flex-start !important;
width:
100%;
margin:
0 !important;
padding:
0 !important;
}
.sph-contact-page__fact-icon {
display:
block;
width:
48px;
height:
48px;
margin:
0;
padding:
0;
color:
var(--sph-white);
}
.sph-contact-page__fact-icon svg {
display:
block;
width:
100%;
height:
100%;
overflow:
visible;
}
/* ---------------------------------------------------------
FACT BODY
--------------------------------------------------------- */
.sph-contact-page__fact-body {
display:
flex !important;
flex-direction:
column !important;
align-items:
flex-start !important;
min-width:
0;
width:
100%;
margin:
0 !important;
padding:
0 !important;
gap:
12px !important;
}
/* ---------------------------------------------------------
FACT LABEL
--------------------------------------------------------- */
.sph-contact-page__fact-label {
width:
100%;
margin:
0 !important;
padding:
0 !important;
}
.sph-contact-page__fact-label
.elementor-heading-title {
margin:
0 !important;
font-family:
"Overpass",
sans-serif !important;
font-size:
.9375rem !important;
line-height:
1.4 !important;
font-weight:
600 !important;
letter-spacing:
.08em;
text-transform:
uppercase;
color:
var(--sph-white) !important;
}
/* ---------------------------------------------------------
FACT VALUE
--------------------------------------------------------- */
.sph-contact-page__fact-value {
width:
100%;
margin:
0 !important;
padding:
0 !important;
}
.sph-contact-page__fact-value,
.sph-contact-page__fact-value p,
.sph-contact-page__fact-value a {
font-family:
"Overpass",
sans-serif !important;
font-size:
clamp(
1rem,
.2vw + .95rem,
1.125rem
) !important;
line-height:
1.55 !important;
font-weight:
400 !important;
color:
var(--sph-white) !important;
}
.sph-contact-page__fact-value p {
margin:
0 !important;
}
.sph-contact-page__fact-value a {
text-decoration:
underline;
text-decoration-thickness:
1px;
text-underline-offset:
4px;
}
/* =========================================================
QUICK FACTS NOTE
========================================================= */
.sph-contact-page__note {
display:
flex !important;
flex-direction:
column !important;
align-items:
flex-start !important;
width:
100%;
margin:
44px 0 0 0 !important;
padding:
0 !important;
gap:
20px !important;
}
/* =========================================================
LAPTOP
<= 1399px
========================================================= */
@media (max-width: 1399px) {
.sph-contact-page__inner {
grid-template-columns:
minmax(0, 1.7fr)
minmax(340px, 1fr);
}
.sph-contact-page__main {
padding:
72px 64px 88px 0 !important;
}
.sph-contact-page__facts {
padding:
72px 0 88px 56px !important;
}
}
/* =========================================================
TABLET LANDSCAPE
<= 1199px
========================================================= */
@media (max-width: 1199px) {
.sph-contact-page__inner {
grid-template-columns:
minmax(0, 1.55fr)
minmax(320px, 1fr);
}
.sph-contact-page__main {
padding:
64px 48px 80px 0 !important;
}
.sph-contact-page__intro {
margin-bottom:
44px !important;
}
.sph-contact-page__facts {
padding:
64px 0 80px 44px !important;
}
.sph-contact-page__facts-title {
margin-bottom:
44px !important;
}
.sph-contact-page__fact {
grid-template-columns:
56px minmax(0, 1fr);
column-gap:
24px !important;
}
.sph-contact-page__fact-icon-widget {
width:
56px !important;
}
.sph-contact-page__fact-icon {
width:
44px;
height:
44px;
}
}
/* =========================================================
TABLET PORTRAIT
<= 991px
========================================================= */
@media (max-width: 991px) {
.sph-contact-page {
background:
var(--sph-white);
}
.sph-contact-page__inner {
grid-template-columns:
1fr;
}
.sph-contact-page__main {
padding:
64px 0 72px 0 !important;
}
.sph-contact-page__main::before {
display:
none;
}
.sph-contact-page__facts {
padding:
64px 0 72px 0 !important;
}
.sph-contact-page__facts::after {
left:
50%;
width:
100vw;
transform:
translateX(-50%);
}
.sph-contact-page__facts::before {
content: "";
position:
absolute;
z-index:
-1;
top:
0;
right:
50%;
bottom:
0;
width:
100vw;
background-color:
var(--sph-blue-dark);
transform:
translateX(50%);
pointer-events:
none;
}
.sph-contact-page__facts-title,
.sph-contact-page__fact,
.sph-contact-page__note {
max-width:
720px;
}
}
/* =========================================================
MOBILE LANDSCAPE
<= 767px
========================================================= */
@media (max-width: 767px) {
.sph-contact-page__main {
padding:
56px 0 64px 0 !important;
}
.sph-contact-page__title {
margin-bottom:
24px !important;
}
.sph-contact-page__intro {
margin-bottom:
40px !important;
}
.sph-contact-page__form
.elementor-form-fields-wrapper {
row-gap:
22px;
}
.sph-contact-page__facts {
padding:
56px 0 64px 0 !important;
}
.sph-contact-page__facts-title {
margin-bottom:
40px !important;
}
.sph-contact-page__fact {
grid-template-columns:
52px minmax(0, 1fr);
column-gap:
20px !important;
padding-bottom:
28px !important;
}
.sph-contact-page__fact
+
.sph-contact-page__fact {
padding-top:
28px !important;
}
.sph-contact-page__fact-icon-widget {
width:
52px !important;
}
.sph-contact-page__fact-icon {
width:
40px;
height:
40px;
}
.sph-contact-page__note {
margin-top:
36px !important;
}
}
/* =========================================================
MOBILE PORTRAIT
<= 576px
========================================================= */
@media (max-width: 576px) {
.sph-contact-page__main {
padding:
48px 0 56px 0 !important;
}
.sph-contact-page__intro {
margin-bottom:
36px !important;
}
.sph-contact-page__form
.elementor-field-group {
width:
100% !important;
}
.sph-contact-page__facts {
padding:
48px 0 56px 0 !important;
}
.sph-contact-page__facts-title {
margin-bottom:
36px !important;
}
.sph-contact-page__fact {
grid-template-columns:
44px minmax(0, 1fr);
column-gap:
16px !important;
}
.sph-contact-page__fact-icon-widget {
width:
44px !important;
}
.sph-contact-page__fact-icon {
width:
36px;
height:
36px;
}
.sph-contact-page__note {
gap:
16px !important;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.sph-contact-page__form
.elementor-field {
transition:
none !important;
}
}
/* =========================================================
COMPONENT: COMPANY COLLABORATION
Unternehmen & Management – Zusammenarbeit
Containerbreite und horizontale Gutters:
global über .sph-container
========================================================= */
.sph-company-collaboration {
position: relative;
overflow: hidden;
background-color:
var(--sph-blue-dark);
color:
var(--sph-white);
}
/* =========================================================
INNER
========================================================= */
.sph-company-collaboration__inner {
position: relative;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
}
/* =========================================================
INTRO
========================================================= */
.sph-company-collaboration__intro {
display: flex !important;
flex-direction: column !important;
width: 100%;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
}
.sph-company-collaboration__eyebrow {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.sph-company-collaboration__title {
width: 100%;
max-width: 980px;
margin: 0 !important;
padding: 18px 0 0 0 !important;
}
/* =========================================================
GRID
========================================================= */
.sph-company-collaboration__grid {
display: grid !important;
grid-template-columns:
repeat(5, minmax(0, 1fr));
align-items: stretch !important;
width: 100%;
margin:
64px 0 0 0 !important;
padding: 0 !important;
gap: 0 !important;
}
/* =========================================================
ITEM
========================================================= */
.sph-company-collaboration__item {
position: relative;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
min-width: 0;
margin: 0 !important;
padding:
0 32px !important;
gap: 0 !important;
}
.sph-company-collaboration__item:first-child {
padding-left: 0 !important;
}
.sph-company-collaboration__item:last-child {
padding-right: 0 !important;
}
/* =========================================================
TRENNLINIEN
========================================================= */
.sph-company-collaboration__item
+
.sph-company-collaboration__item {
border-left:
1px solid rgba(255, 255, 255, .18);
}
/* =========================================================
ICON
========================================================= */
.sph-company-collaboration__icon-widget {
width: 56px !important;
margin:
0 0 28px 0 !important;
padding: 0 !important;
}
.sph-company-collaboration__icon-widget
.elementor-widget-container {
display: block;
width: 100%;
margin: 0;
padding: 0;
}
.sph-company-collaboration__icon {
display: block;
width: 56px;
height: 56px;
color:
var(--sph-turquoise);
}
.sph-company-collaboration__icon svg {
display: block;
width: 100%;
height: 100%;
stroke:
currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect:
non-scaling-stroke;
}
/* =========================================================
ITEM TITLE
========================================================= */
.sph-company-collaboration__item-title {
width: 100%;
margin:
0 0 18px 0 !important;
padding: 0 !important;
}
.sph-company-collaboration__item-title
.elementor-heading-title {
color:
var(--sph-white) !important;
}
/* =========================================================
ITEM COPY
========================================================= */
.sph-company-collaboration__item-copy {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.sph-company-collaboration__item-copy,
.sph-company-collaboration__item-copy p {
color:
var(--sph-white) !important;
}
.sph-company-collaboration__item-copy p {
margin: 0 !important;
}
/* =========================================================
<= 1399px
========================================================= */
@media (max-width: 1399px) {
.sph-company-collaboration__grid {
margin-top:
56px !important;
}
.sph-company-collaboration__item {
padding-left:
24px !important;
padding-right:
24px !important;
}
.sph-company-collaboration__item:first-child {
padding-left:
0 !important;
}
.sph-company-collaboration__item:last-child {
padding-right:
0 !important;
}
}
/* =========================================================
<= 1199px
3 + 2 Raster
========================================================= */
@media (max-width: 1199px) {
.sph-company-collaboration__grid {
grid-template-columns:
repeat(3, minmax(0, 1fr));
row-gap:
48px !important;
}
.sph-company-collaboration__item {
padding:
0 28px !important;
}
.sph-company-collaboration__item:nth-child(3n + 1) {
padding-left:
0 !important;
border-left:
0 !important;
}
.sph-company-collaboration__item:nth-child(3n) {
padding-right:
0 !important;
}
.sph-company-collaboration__item:nth-child(n + 4) {
padding-top:
48px !important;
border-top:
1px solid rgba(255, 255, 255, .18);
}
}
/* =========================================================
<= 991px
2-spaltiges Raster
========================================================= */
@media (max-width: 991px) {
.sph-company-collaboration__title {
max-width:
760px;
}
.sph-company-collaboration__grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
margin-top:
48px !important;
row-gap:
0 !important;
}
.sph-company-collaboration__item {
padding:
40px 28px !important;
border-top:
1px solid rgba(255, 255, 255, .18);
}
.sph-company-collaboration__item:nth-child(odd) {
padding-left:
0 !important;
border-left:
0 !important;
}
.sph-company-collaboration__item:nth-child(even) {
padding-right:
0 !important;
border-left:
1px solid rgba(255, 255, 255, .18);
}
.sph-company-collaboration__item:nth-child(-n + 2) {
padding-top:
0 !important;
border-top:
0 !important;
}
.sph-company-collaboration__item:nth-child(5) {
grid-column:
1 / -1;
padding-right:
0 !important;
}
}
/* =========================================================
<= 767px
========================================================= */
@media (max-width: 767px) {
.sph-company-collaboration__grid {
grid-template-columns:
1fr;
margin-top:
40px !important;
}
.sph-company-collaboration__item,
.sph-company-collaboration__item:nth-child(odd),
.sph-company-collaboration__item:nth-child(even),
.sph-company-collaboration__item:nth-child(5) {
grid-column:
auto;
padding:
32px 0 !important;
border-left:
0 !important;
border-top:
1px solid rgba(255, 255, 255, .18);
}
.sph-company-collaboration__item:first-child {
padding-top:
0 !important;
border-top:
0 !important;
}
.sph-company-collaboration__item:last-child {
padding-bottom:
0 !important;
}
.sph-company-collaboration__icon-widget {
width:
48px !important;
margin-bottom:
24px !important;
}
.sph-company-collaboration__icon {
width: 48px;
height: 48px;
}
.sph-company-collaboration__item-title {
margin-bottom:
14px !important;
}
}
/* =========================================================
COMPONENT: COMPANY MANAGEMENT
Unternehmen & Management – Management
Containerbreite und horizontale Gutters:
global über .sph-container
========================================================= */
.sph-company-management {
position: relative;
overflow: hidden;
background:
var(--sph-white);
}
/* =========================================================
INNER
========================================================= */
.sph-company-management__inner {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
}
/* =========================================================
INTRO
========================================================= */
.sph-company-management__intro {
width: 100%;
max-width: 820px;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
}
.sph-company-management__eyebrow {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.sph-company-management__title {
width: 100%;
margin: 0 !important;
padding: 18px 0 0 0 !important;
}
.sph-company-management__intro-copy {
width: 100%;
max-width: 760px;
margin: 0 !important;
padding: 24px 0 0 0 !important;
}
/* =========================================================
MANAGEMENT IMAGE
========================================================= */
.sph-company-management__image {
width: 100%;
margin:
48px 0 0 0 !important;
padding: 0 !important;
overflow: hidden;
}
.sph-company-management__image
.elementor-widget-container {
width: 100%;
overflow: hidden;
}
.sph-company-management__image img {
display: block;
width: 100%;
height: auto;
margin: 0;
object-fit: cover;
}
/* =========================================================
PROFILES
========================================================= */
.sph-company-management__profiles {
display: grid !important;
grid-template-columns:
repeat(3, minmax(0, 1fr));
align-items: stretch !important;
width: 100%;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
}
/* =========================================================
PROFILE
========================================================= */
.sph-company-management__profile {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
min-width: 0;
margin: 0 !important;
padding:
40px 40px 0 40px !important;
gap: 0 !important;
}
.sph-company-management__profile:first-child {
padding-left:
0 !important;
}
.sph-company-management__profile:last-child {
padding-right:
0 !important;
}
.sph-company-management__profile
+
.sph-company-management__profile {
border-left:
1px solid rgba(14, 47, 74, .18);
}
/* =========================================================
NAME
========================================================= */
.sph-company-management__name {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
ROLE
========================================================= */
.sph-company-management__role {
width: 100%;
margin:
10px 0 0 0 !important;
padding: 0 !important;
}
/* =========================================================
EXCERPT
========================================================= */
.sph-company-management__excerpt {
width: 100%;
margin:
22px 0 0 0 !important;
padding: 0 !important;
}
.sph-company-management__excerpt p {
margin: 0 !important;
}
/* =========================================================
PROOF – JOACHIM ZÜRN
========================================================= */
.sph-company-management__proof {
width: 100%;
margin:
28px 0 0 0 !important;
padding: 0 !important;
}
.sph-company-management__proof-inner {
display: flex;
align-items: center;
width: 100%;
gap: 14px;
}
.sph-company-management__proof-inner strong {
flex:
0 0 auto;
font-family:
"Good-Times", sans-serif;
font-size:
clamp(1.65rem, 2vw, 2.25rem);
font-weight:
600;
line-height:
1;
color:
var(--sph-blue-dark);
}
.sph-company-management__proof-inner span {
max-width: 230px;
padding-left:
14px;
border-left:
1px solid var(--sph-turquoise);
font-family:
"Overpass", sans-serif;
font-size:
.875rem;
font-weight:
600;
line-height:
1.35;
text-transform:
uppercase;
color:
var(--sph-blue-dark);
}
/* =========================================================
DISCLOSURE
========================================================= */
.sph-company-management__disclosure {
width: 100%;
margin:
auto 0 0 0 !important;
padding:
30px 0 0 0 !important;
}
.sph-company-management__details {
width: 100%;
margin: 0;
padding: 0;
}
.sph-company-management__details summary {
display: inline-flex;
align-items: center;
position: relative;
margin: 0;
padding: 0;
gap: 12px;
list-style: none;
cursor: pointer;
font-family:
"Overpass", sans-serif;
font-size:
.875rem;
font-weight:
600;
line-height:
1.3;
text-transform:
uppercase;
color:
var(--sph-orange);
}
.sph-company-management__details summary::-webkit-details-marker {
display: none;
}
/* Fast-Forward-Pfeil NACH dem Text */
.sph-company-management__details summary::after {
content: "";
flex:
0 0 18px;
display: block;
width: 18px;
height: 18px;
background-color:
var(--sph-orange);
-webkit-mask:
url("https://sph-ag.com/wp-content/uploads/2024/05/fast-forward.svg")
center / contain
no-repeat;
mask:
url("https://sph-ag.com/wp-content/uploads/2024/05/fast-forward.svg")
center / contain
no-repeat;
transition:
transform .2s ease;
}
.sph-company-management__details summary:hover::after {
transform:
translateX(6px);
}
.sph-company-management__summary-less {
display: none;
}
.sph-company-management__details[open]
.sph-company-management__summary-more {
display: none;
}
.sph-company-management__details[open]
.sph-company-management__summary-less {
display: inline;
}
/* =========================================================
AUSGEKLAPPTER TEXT
Typografie kommt über die globale Klasse .sph-copy-lg.
Hier nur Layout.
========================================================= */
.sph-company-management__details-content {
width: 100%;
margin: 0;
padding:
22px 0 0 0;
}
.sph-company-management__details-content p {
margin: 0;
}
/* =========================================================
ACCESSIBILITY
========================================================= */
.sph-company-management__details summary:focus-visible {
outline:
2px solid var(--sph-orange);
outline-offset:
6px;
}
/* =========================================================
<= 1199px
========================================================= */
@media (max-width: 1199px) {
.sph-company-management__profile {
padding-left:
28px !important;
padding-right:
28px !important;
}
.sph-company-management__profile:first-child {
padding-left:
0 !important;
}
.sph-company-management__profile:last-child {
padding-right:
0 !important;
}
.sph-company-management__proof-inner {
align-items:
flex-start;
flex-direction:
column;
gap:
10px;
}
.sph-company-management__proof-inner span {
max-width:
none;
padding:
8px 0 0 0;
border-left:
0;
border-top:
1px solid var(--sph-turquoise);
}
}
/* =========================================================
<= 991px
========================================================= */
@media (max-width: 991px) {
.sph-company-management__image {
margin-top:
40px !important;
}
.sph-company-management__profiles {
grid-template-columns:
1fr;
}
.sph-company-management__profile,
.sph-company-management__profile:first-child,
.sph-company-management__profile:last-child {
padding:
36px 0 !important;
border-left:
0 !important;
border-top:
1px solid rgba(14, 47, 74, .18);
}
.sph-company-management__profile:first-child {
border-top:
0 !important;
}
.sph-company-management__profile:last-child {
padding-bottom:
0 !important;
}
.sph-company-management__disclosure {
margin:
0 !important;
}
.sph-company-management__proof-inner {
flex-direction:
row;
align-items:
center;
gap:
14px;
}
.sph-company-management__proof-inner span {
max-width:
260px;
padding:
0 0 0 14px;
border-top:
0;
border-left:
1px solid var(--sph-turquoise);
}
}
/* =========================================================
<= 767px
========================================================= */
@media (max-width: 767px) {
.sph-company-management__title {
padding-top:
16px !important;
}
.sph-company-management__intro-copy {
padding-top:
20px !important;
}
.sph-company-management__image {
margin-top:
32px !important;
}
.sph-company-management__profile,
.sph-company-management__profile:first-child,
.sph-company-management__profile:last-child {
padding:
32px 0 !important;
}
.sph-company-management__profile:last-child {
padding-bottom:
0 !important;
}
.sph-company-management__proof-inner {
align-items:
flex-start;
flex-direction:
column;
gap:
10px;
}
.sph-company-management__proof-inner span {
max-width:
none;
padding:
8px 0 0 0;
border-left:
0;
border-top:
1px solid var(--sph-turquoise);
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.sph-company-management__details summary::before {
transition:
none;
}
}/* =========================================================
COMPONENT: COMPANY REFERENCES
Unternehmen & Management – Referenzen
Containerbreite und horizontale Gutters:
global über .sph-container
========================================================= */
.sph-company-references {
position: relative;
overflow: hidden;
background:
var(--sph-white);
}
/* =========================================================
INNER
========================================================= */
.sph-company-references__inner {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
}
/* =========================================================
INTRO
========================================================= */
.sph-company-references__intro {
width: 100%;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
}
.sph-company-references__eyebrow {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.sph-company-references__title {
width: 100%;
max-width: 1050px;
margin: 0 !important;
padding: 18px 0 0 0 !important;
}
/* =========================================================
LOGO GRID
========================================================= */
.sph-company-references__grid {
display: grid !important;
grid-template-columns:
repeat(3, minmax(0, 1fr));
width: 100%;
margin:
56px 0 0 0 !important;
padding: 0 !important;
gap: 0 !important;
}
/* =========================================================
LOGO ITEM
========================================================= */
.sph-company-references__item {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 0;
min-height: 190px;
margin: 0 !important;
padding:
36px 48px !important;
border-right:
1px solid rgba(14, 47, 74, .16);
border-bottom:
1px solid rgba(14, 47, 74, .16);
}
/* letzte Spalte */
.sph-company-references__item:nth-child(3n) {
border-right:
0;
}
/* letzte Reihe */
.sph-company-references__item:nth-child(n + 7) {
border-bottom:
0;
}
/* =========================================================
LOGO
========================================================= */
.sph-company-references__logo {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.sph-company-references__logo
.elementor-widget-container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.sph-company-references__logo img {
display: block;
width: auto;
height: auto;
max-width: 250px;
max-height: 82px;
margin: 0 auto;
object-fit: contain;
}
/* =========================================================
<= 1199px
========================================================= */
@media (max-width: 1199px) {
.sph-company-references__grid {
margin-top:
48px !important;
}
.sph-company-references__item {
min-height:
170px;
padding:
32px 36px !important;
}
.sph-company-references__logo img {
max-width:
220px;
max-height:
74px;
}
}
/* =========================================================
<= 991px
2 SPALTEN
========================================================= */
@media (max-width: 991px) {
.sph-company-references__grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.sph-company-references__item {
min-height:
160px;
padding:
30px 32px !important;
border-right:
1px solid rgba(14, 47, 74, .16);
border-bottom:
1px solid rgba(14, 47, 74, .16);
}
.sph-company-references__item:nth-child(3n) {
border-right:
1px solid rgba(14, 47, 74, .16);
}
.sph-company-references__item:nth-child(2n) {
border-right:
0;
}
.sph-company-references__item:nth-child(n + 7) {
border-bottom:
1px solid rgba(14, 47, 74, .16);
}
.sph-company-references__item:last-child {
grid-column:
1 / -1;
border-right:
0;
border-bottom:
0;
}
.sph-company-references__logo img {
max-width:
210px;
max-height:
70px;
}
}
/* =========================================================
<= 767px
1 SPALTE
========================================================= */
@media (max-width: 767px) {
.sph-company-references__title {
padding-top:
16px !important;
}
.sph-company-references__grid {
grid-template-columns:
1fr;
margin-top:
40px !important;
}
.sph-company-references__item,
.sph-company-references__item:nth-child(2n),
.sph-company-references__item:nth-child(3n),
.sph-company-references__item:nth-child(n + 7),
.sph-company-references__item:last-child {
grid-column:
auto;
min-height:
140px;
padding:
28px 20px !important;
border-right:
0;
border-bottom:
1px solid rgba(14, 47, 74, .16);
}
.sph-company-references__item:last-child {
border-bottom:
0;
}
.sph-company-references__logo img {
max-width:
220px;
max-height:
68px;
}
}
/* =========================================================
COMPONENT: COMPANY SUPERVISORY BOARD
Unternehmen & Management – Aufsichtsrat
Containerbreite und horizontale Gutters:
global über .sph-container
========================================================= */
.sph-company-board {
position: relative;
overflow: hidden;
background-color:
var(--sph-blue-dark);
color:
var(--sph-white);
}
/* =========================================================
INNER
========================================================= */
.sph-company-board__inner {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
}
/* =========================================================
INTRO
========================================================= */
.sph-company-board__intro {
width: 100%;
max-width: 1050px;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
}
.sph-company-board__eyebrow {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.sph-company-board__title {
width: 100%;
margin: 0 !important;
padding: 18px 0 0 0 !important;
}
.sph-company-board__intro-copy {
width: 100%;
max-width: 900px;
margin: 0 !important;
padding: 28px 0 0 0 !important;
}
.sph-company-board__intro-copy p {
margin: 0 !important;
}
/* =========================================================
GRID
========================================================= */
.sph-company-board__grid {
display: grid !important;
grid-template-columns:
repeat(2, minmax(0, 1fr));
width: 100%;
margin:
56px 0 0 0 !important;
padding: 0 !important;
gap: 0 !important;
}
/* =========================================================
PROFILE
========================================================= */
.sph-company-board__profile {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
min-width: 0;
margin: 0 !important;
padding:
40px 48px !important;
gap: 0 !important;
}
/* linke Spalte */
.sph-company-board__profile:nth-child(odd) {
padding-left:
0 !important;
}
/* rechte Spalte */
.sph-company-board__profile:nth-child(even) {
padding-right:
0 !important;
border-left:
1px solid rgba(255, 255, 255, .22);
}
/* erste Reihe */
.sph-company-board__profile:nth-child(-n + 2) {
padding-top:
0 !important;
}
/* zweite Reihe */
.sph-company-board__profile:nth-child(n + 3) {
border-top:
1px solid rgba(255, 255, 255, .22);
}
/* letzte Reihe */
.sph-company-board__profile:nth-child(n + 3) {
padding-bottom:
0 !important;
padding-top:
40px !important;
}
/* =========================================================
NAME
========================================================= */
.sph-company-board__name {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
ROLE
========================================================= */
.sph-company-board__role {
width: 100%;
margin:
12px 0 0 0 !important;
padding: 0 !important;
}
/* =========================================================
COPY
========================================================= */
.sph-company-board__copy {
width: 100%;
max-width: 620px;
margin:
22px 0 0 0 !important;
padding: 0 !important;
}
.sph-company-board__copy p {
margin: 0 !important;
}
/* =========================================================
PROFILE OHNE ROLLE
Hansjörg Ruof und Dr. Thomas Frohnmayer haben in den
gelieferten Inhalten keine Rollenbezeichnung.
========================================================= */
.sph-company-board__profile:not(:has(.sph-company-board__role))
.sph-company-board__copy {
margin-top:
22px !important;
}
/* =========================================================
<= 1199px
========================================================= */
@media (max-width: 1199px) {
.sph-company-board__grid {
margin-top:
48px !important;
}
.sph-company-board__profile {
padding-left:
36px !important;
padding-right:
36px !important;
}
.sph-company-board__profile:nth-child(odd) {
padding-left:
0 !important;
}
.sph-company-board__profile:nth-child(even) {
padding-right:
0 !important;
}
}
/* =========================================================
<= 991px
========================================================= */
@media (max-width: 991px) {
.sph-company-board__intro {
max-width:
820px;
}
.sph-company-board__grid {
grid-template-columns:
1fr;
}
.sph-company-board__profile,
.sph-company-board__profile:nth-child(odd),
.sph-company-board__profile:nth-child(even),
.sph-company-board__profile:nth-child(-n + 2),
.sph-company-board__profile:nth-child(n + 3) {
padding:
36px 0 !important;
border-left:
0 !important;
border-top:
1px solid rgba(255, 255, 255, .22);
}
.sph-company-board__profile:first-child {
padding-top:
0 !important;
border-top:
0 !important;
}
.sph-company-board__profile:last-child {
padding-bottom:
0 !important;
}
.sph-company-board__copy {
max-width:
760px;
}
}
/* =========================================================
<= 767px
========================================================= */
@media (max-width: 767px) {
.sph-company-board__title {
padding-top:
16px !important;
}
.sph-company-board__intro-copy {
padding-top:
22px !important;
}
.sph-company-board__grid {
margin-top:
40px !important;
}
.sph-company-board__profile,
.sph-company-board__profile:nth-child(odd),
.sph-company-board__profile:nth-child(even),
.sph-company-board__profile:nth-child(-n + 2),
.sph-company-board__profile:nth-child(n + 3) {
padding:
32px 0 !important;
}
.sph-company-board__profile:first-child {
padding-top:
0 !important;
}
.sph-company-board__profile:last-child {
padding-bottom:
0 !important;
}
.sph-company-board__role {
margin-top:
10px !important;
}
.sph-company-board__copy,
.sph-company-board__profile:not(:has(.sph-company-board__role))
.sph-company-board__copy {
margin-top:
18px !important;
}
}
/* =========================================================
COMPONENT: PARTNER TECHNOLOGY
Partner – Technologiepartner
Containerbreite und horizontale Gutters:
global über .sph-container
========================================================= */
.sph-partner-tech {
position: relative;
overflow: hidden;
background-color:
var(--sph-grey-light);
}
/* =========================================================
INNER
========================================================= */
.sph-partner-tech__inner {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
}
/* =========================================================
INTRO
========================================================= */
.sph-partner-tech__intro {
width: 100%;
max-width: 900px;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
}
.sph-partner-tech__eyebrow {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.sph-partner-tech__title {
width: 100%;
margin: 0 !important;
padding: 18px 0 0 0 !important;
}
.sph-partner-tech__intro-copy {
width: 100%;
max-width: 760px;
margin: 0 !important;
padding: 24px 0 0 0 !important;
}
.sph-partner-tech__intro-copy p {
margin: 0 !important;
}
/* =========================================================
MICROSOFT – TECHNOLOGISCHE BASIS
========================================================= */
.sph-partner-tech__microsoft {
display: grid !important;
grid-template-columns:
minmax(280px, .85fr)
minmax(0, 1.55fr);
align-items: stretch !important;
width: 100%;
margin:
56px 0 0 0 !important;
padding: 0 !important;
gap: 0 !important;
background-color:
var(--sph-white);
border:
1px solid rgba(14, 47, 74, .16);
}
.sph-partner-tech__microsoft-logo-area {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 0;
min-height: 190px;
margin: 0 !important;
padding:
40px 56px !important;
border-right:
1px solid rgba(14, 47, 74, .16);
}
.sph-partner-tech__microsoft-content {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
min-width: 0;
margin: 0 !important;
padding:
40px 56px !important;
gap: 0 !important;
}
/* =========================================================
LOGOS
========================================================= */
.sph-partner-tech__logo {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.sph-partner-tech__logo
.elementor-widget-container {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
}
.sph-partner-tech__logo img {
display: block;
width: auto;
height: auto;
max-width: 220px;
max-height: 64px;
margin: 0;
object-fit: contain;
}
.sph-partner-tech__microsoft-logo-area
.sph-partner-tech__logo
.elementor-widget-container {
justify-content: center;
}
.sph-partner-tech__microsoft-logo-area
.sph-partner-tech__logo img {
max-width: 300px;
max-height: 82px;
}
/* =========================================================
COMPETENCE
========================================================= */
.sph-partner-tech__competence {
width: 100%;
margin:
24px 0 0 0 !important;
padding: 0 !important;
}
.sph-partner-tech__microsoft-content
.sph-partner-tech__competence {
margin:
0 !important;
}
/* =========================================================
COPY
Typografie global über .sph-copy-lg
========================================================= */
.sph-partner-tech__copy {
width: 100%;
margin:
16px 0 0 0 !important;
padding: 0 !important;
}
.sph-partner-tech__copy p {
margin: 0 !important;
}
/* =========================================================
MEHR ERFAHREN
========================================================= */
.sph-partner-tech__link {
width: 100%;
margin:
auto 0 0 0 !important;
padding:
28px 0 0 0 !important;
}
.sph-partner-tech__link-anchor {
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
gap: 10px;
text-decoration: none !important;
color:
var(--sph-orange) !important;
transition:
color .2s ease;
}
.sph-partner-tech__link-anchor span {
font-family:
"Overpass", sans-serif;
font-size:
.8125rem;
font-weight:
600;
line-height:
1.2;
letter-spacing:
.04em;
text-transform:
uppercase;
color:
currentColor !important;
}
.sph-partner-tech__link-anchor::after {
content: "";
display: block;
flex:
0 0 18px;
width: 18px;
height: 18px;
background-color:
currentColor;
-webkit-mask:
url("https://sph-ag.com/wp-content/uploads/2024/05/fast-forward.svg")
center / contain
no-repeat;
mask:
url("https://sph-ag.com/wp-content/uploads/2024/05/fast-forward.svg")
center / contain
no-repeat;
transition:
transform .2s ease,
background-color .2s ease;
}
.sph-partner-tech__link-anchor:hover {
color:
var(--sph-black) !important;
}
.sph-partner-tech__link-anchor:hover::after {
transform:
translateX(6px);
}
.sph-partner-tech__link-anchor:focus-visible {
outline:
2px solid var(--sph-orange);
outline-offset:
6px;
}
/* Microsoft-Link */
.sph-partner-tech__microsoft-content
.sph-partner-tech__link {
padding-top:
22px !important;
}
/* =========================================================
PARTNER GRID
========================================================= */
.sph-partner-tech__grid {
display: grid !important;
grid-template-columns:
repeat(3, minmax(0, 1fr));
align-items: stretch !important;
width: 100%;
margin:
36px 0 0 0 !important;
padding: 0 !important;
gap: 0 !important;
}
/* =========================================================
PARTNER ITEM
========================================================= */
.sph-partner-tech__item {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
min-width: 0;
min-height: 350px;
margin: 0 !important;
padding:
40px !important;
gap: 0 !important;
border-right:
1px solid rgba(14, 47, 74, .16);
border-bottom:
1px solid rgba(14, 47, 74, .16);
}
.sph-partner-tech__item:nth-child(3n + 1) {
padding-left:
0 !important;
}
.sph-partner-tech__item:nth-child(3n) {
padding-right:
0 !important;
border-right:
0;
}
.sph-partner-tech__item:nth-child(-n + 3) {
padding-top:
20px !important;
}
.sph-partner-tech__item:nth-child(n + 10) {
padding-bottom:
0 !important;
border-bottom:
0;
}
/* =========================================================
<= 1399px
========================================================= */
@media (max-width: 1399px) {
.sph-partner-tech__item {
padding-left:
32px !important;
padding-right:
32px !important;
}
.sph-partner-tech__item:nth-child(3n + 1) {
padding-left:
0 !important;
}
.sph-partner-tech__item:nth-child(3n) {
padding-right:
0 !important;
}
}
/* =========================================================
<= 1199px
========================================================= */
@media (max-width: 1199px) {
.sph-partner-tech__microsoft {
grid-template-columns:
minmax(240px, .8fr)
minmax(0, 1.4fr);
}
.sph-partner-tech__microsoft-logo-area {
padding:
36px 40px !important;
}
.sph-partner-tech__microsoft-content {
padding:
36px 40px !important;
}
.sph-partner-tech__item {
padding-left:
28px !important;
padding-right:
28px !important;
}
.sph-partner-tech__item:nth-child(3n + 1) {
padding-left:
0 !important;
}
.sph-partner-tech__item:nth-child(3n) {
padding-right:
0 !important;
}
.sph-partner-tech__logo img {
max-width:
190px;
max-height:
58px;
}
}
/* =========================================================
<= 991px
========================================================= */
@media (max-width: 991px) {
.sph-partner-tech__microsoft {
grid-template-columns:
1fr;
}
.sph-partner-tech__microsoft-logo-area {
min-height:
150px;
justify-content:
flex-start !important;
padding:
36px 40px !important;
border-right:
0;
border-bottom:
1px solid rgba(14, 47, 74, .16);
}
.sph-partner-tech__microsoft-logo-area
.sph-partner-tech__logo
.elementor-widget-container {
justify-content:
flex-start;
}
.sph-partner-tech__microsoft-content {
padding:
32px 40px 40px 40px !important;
}
.sph-partner-tech__grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.sph-partner-tech__item,
.sph-partner-tech__item:nth-child(3n + 1),
.sph-partner-tech__item:nth-child(3n),
.sph-partner-tech__item:nth-child(-n + 3),
.sph-partner-tech__item:nth-child(n + 10) {
min-height:
340px;
padding:
36px 32px !important;
border-right:
1px solid rgba(14, 47, 74, .16);
border-bottom:
1px solid rgba(14, 47, 74, .16);
}
.sph-partner-tech__item:nth-child(odd) {
padding-left:
0 !important;
}
.sph-partner-tech__item:nth-child(even) {
padding-right:
0 !important;
border-right:
0;
}
.sph-partner-tech__item:nth-child(-n + 2) {
padding-top:
20px !important;
}
.sph-partner-tech__item:last-child {
grid-column:
1 / -1;
padding-left:
0 !important;
padding-right:
0 !important;
border-right:
0;
border-bottom:
0;
}
}
/* =========================================================
<= 767px
========================================================= */
@media (max-width: 767px) {
.sph-partner-tech__title {
padding-top:
16px !important;
}
.sph-partner-tech__intro-copy {
padding-top:
20px !important;
}
.sph-partner-tech__microsoft {
margin-top:
40px !important;
}
.sph-partner-tech__microsoft-logo-area {
min-height:
130px;
padding:
28px 24px !important;
}
.sph-partner-tech__microsoft-content {
padding:
28px 24px 32px 24px !important;
}
.sph-partner-tech__microsoft-logo-area
.sph-partner-tech__logo img {
max-width:
240px;
max-height:
70px;
}
.sph-partner-tech__grid {
grid-template-columns:
1fr;
margin-top:
24px !important;
}
.sph-partner-tech__item,
.sph-partner-tech__item:nth-child(odd),
.sph-partner-tech__item:nth-child(even),
.sph-partner-tech__item:nth-child(3n + 1),
.sph-partner-tech__item:nth-child(3n),
.sph-partner-tech__item:nth-child(-n + 3),
.sph-partner-tech__item:nth-child(n + 10),
.sph-partner-tech__item:last-child {
grid-column:
auto;
min-height:
0;
padding:
32px 0 !important;
border-right:
0;
border-bottom:
1px solid rgba(14, 47, 74, .16);
}
.sph-partner-tech__item:first-child {
padding-top:
16px !important;
}
.sph-partner-tech__item:last-child {
padding-bottom:
0 !important;
border-bottom:
0;
}
.sph-partner-tech__logo img {
max-width:
210px;
max-height:
60px;
}
.sph-partner-tech__competence {
margin-top:
22px !important;
}
.sph-partner-tech__link {
padding-top:
24px !important;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.sph-partner-tech__link-anchor::after {
transition:
none;
}
}
/* =========================================================
COMPONENT: PARTNER CONSULTING
Partner – Beratungspartner
Containerbreite und horizontale Gutters:
global über .sph-container
========================================================= */
.sph-partner-consulting {
position: relative;
overflow: hidden;
background-color:
var(--sph-white);
}
/* =========================================================
INNER
========================================================= */
.sph-partner-consulting__inner {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
}
/* =========================================================
INTRO
========================================================= */
.sph-partner-consulting__intro {
width: 100%;
max-width: 900px;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
}
.sph-partner-consulting__eyebrow {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.sph-partner-consulting__title {
width: 100%;
margin: 0 !important;
padding: 18px 0 0 0 !important;
}
.sph-partner-consulting__intro-copy {
width: 100%;
max-width: 760px;
margin: 0 !important;
padding: 24px 0 0 0 !important;
}
.sph-partner-consulting__intro-copy p {
margin: 0 !important;
}
/* =========================================================
GRID
========================================================= */
.sph-partner-consulting__grid {
display: grid !important;
grid-template-columns:
repeat(2, minmax(0, 1fr));
align-items: stretch !important;
width: 100%;
margin:
56px 0 0 0 !important;
padding: 0 !important;
gap: 0 !important;
border-top:
1px solid rgba(14, 47, 74, .16);
}
/* =========================================================
ITEM
========================================================= */
.sph-partner-consulting__item {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
min-width: 0;
min-height: 360px;
margin: 0 !important;
padding:
44px 48px !important;
gap: 0 !important;
border-bottom:
1px solid rgba(14, 47, 74, .16);
}
/* rechte Spalte */
.sph-partner-consulting__item:nth-child(even) {
border-left:
1px solid rgba(14, 47, 74, .16);
padding-right:
0 !important;
}
/* linke Spalte */
.sph-partner-consulting__item:nth-child(odd) {
padding-left:
0 !important;
}
/* letzte Reihe */
.sph-partner-consulting__item:nth-child(n + 3) {
border-bottom:
0;
}
/* =========================================================
LOGO
========================================================= */
.sph-partner-consulting__logo {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.sph-partner-consulting__logo
.elementor-widget-container {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
min-height: 80px;
}
.sph-partner-consulting__logo img {
display: block;
width: auto;
height: auto;
max-width: 280px;
max-height: 76px;
margin: 0;
object-fit: contain;
}
/* =========================================================
COMPETENCE
========================================================= */
.sph-partner-consulting__competence {
width: 100%;
margin:
28px 0 0 0 !important;
padding: 0 !important;
}
/* =========================================================
COPY
Typografie global über .sph-copy-lg
========================================================= */
.sph-partner-consulting__copy {
width: 100%;
max-width: 620px;
margin:
16px 0 0 0 !important;
padding: 0 !important;
}
.sph-partner-consulting__copy p {
margin: 0 !important;
}
/* =========================================================
MEHR ERFAHREN
========================================================= */
.sph-partner-consulting__link {
width: 100%;
margin:
auto 0 0 0 !important;
padding:
30px 0 0 0 !important;
}
.sph-partner-consulting__link-anchor {
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
gap: 10px;
text-decoration: none !important;
color:
var(--sph-orange) !important;
transition:
color .2s ease;
}
.sph-partner-consulting__link-anchor span {
font-family:
"Overpass", sans-serif;
font-size:
.8125rem;
font-weight:
600;
line-height:
1.2;
letter-spacing:
.04em;
text-transform:
uppercase;
color:
currentColor !important;
}
.sph-partner-consulting__link-anchor::after {
content: "";
display: block;
flex:
0 0 18px;
width: 18px;
height: 18px;
background-color:
currentColor;
-webkit-mask:
url("https://sph-ag.com/wp-content/uploads/2024/05/fast-forward.svg")
center / contain
no-repeat;
mask:
url("https://sph-ag.com/wp-content/uploads/2024/05/fast-forward.svg")
center / contain
no-repeat;
transition:
transform .2s ease,
background-color .2s ease;
}
.sph-partner-consulting__link-anchor:hover {
color:
var(--sph-black) !important;
}
.sph-partner-consulting__link-anchor:hover::after {
transform:
translateX(6px);
}
.sph-partner-consulting__link-anchor:focus-visible {
outline:
2px solid var(--sph-orange);
outline-offset:
6px;
}
/* =========================================================
<= 1199px
========================================================= */
@media (max-width: 1199px) {
.sph-partner-consulting__item {
min-height:
350px;
padding-left:
36px !important;
padding-right:
36px !important;
}
.sph-partner-consulting__item:nth-child(odd) {
padding-left:
0 !important;
}
.sph-partner-consulting__item:nth-child(even) {
padding-right:
0 !important;
}
.sph-partner-consulting__logo img {
max-width:
240px;
max-height:
70px;
}
}
/* =========================================================
<= 991px
========================================================= */
@media (max-width: 991px) {
.sph-partner-consulting__grid {
grid-template-columns:
1fr;
margin-top:
48px !important;
}
.sph-partner-consulting__item,
.sph-partner-consulting__item:nth-child(odd),
.sph-partner-consulting__item:nth-child(even),
.sph-partner-consulting__item:nth-child(n + 3) {
min-height:
0;
padding:
36px 0 !important;
border-left:
0;
border-bottom:
1px solid rgba(14, 47, 74, .16);
}
.sph-partner-consulting__item:last-child {
padding-bottom:
0 !important;
border-bottom:
0;
}
.sph-partner-consulting__copy {
max-width:
760px;
}
}
/* =========================================================
<= 767px
========================================================= */
@media (max-width: 767px) {
.sph-partner-consulting__title {
padding-top:
16px !important;
}
.sph-partner-consulting__intro-copy {
padding-top:
20px !important;
}
.sph-partner-consulting__grid {
margin-top:
40px !important;
}
.sph-partner-consulting__item,
.sph-partner-consulting__item:nth-child(odd),
.sph-partner-consulting__item:nth-child(even),
.sph-partner-consulting__item:nth-child(n + 3) {
padding:
32px 0 !important;
}
.sph-partner-consulting__item:last-child {
padding-bottom:
0 !important;
}
.sph-partner-consulting__logo
.elementor-widget-container {
min-height:
64px;
}
.sph-partner-consulting__logo img {
max-width:
220px;
max-height:
64px;
}
.sph-partner-consulting__competence {
margin-top:
22px !important;
}
.sph-partner-consulting__link {
padding-top:
24px !important;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.sph-partner-consulting__link-anchor::after {
transition:
none;
}
}
/* =========================================================
COMPONENT: PARTNER NETWORK
Partner – Netzwerk & Wissenschaft
Containerbreite und horizontale Gutters:
global über .sph-container
========================================================= */
.sph-partner-network {
position: relative;
overflow: hidden;
background-color:
var(--sph-grey-light);
}
/* =========================================================
INNER
========================================================= */
.sph-partner-network__inner {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
}
/* =========================================================
INTRO
========================================================= */
.sph-partner-network__intro {
width: 100%;
max-width: 950px;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
}
.sph-partner-network__eyebrow {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.sph-partner-network__title {
width: 100%;
margin: 0 !important;
padding: 18px 0 0 0 !important;
}
.sph-partner-network__intro-copy {
width: 100%;
max-width: 820px;
margin: 0 !important;
padding: 24px 0 0 0 !important;
}
.sph-partner-network__intro-copy p {
margin: 0 !important;
}
/* =========================================================
LIST
========================================================= */
.sph-partner-network__list {
display: flex !important;
flex-direction: column !important;
width: 100%;
margin:
56px 0 0 0 !important;
padding: 0 !important;
gap: 0 !important;
border-top:
1px solid rgba(14, 47, 74, .16);
}
/* =========================================================
ITEM
========================================================= */
.sph-partner-network__item {
display: grid !important;
grid-template-columns:
minmax(260px, .8fr)
minmax(0, 1.6fr)
minmax(190px, .55fr);
align-items: center !important;
width: 100%;
min-width: 0;
min-height: 132px;
margin: 0 !important;
padding:
22px 0 !important;
gap: 0 !important;
border-bottom:
1px solid rgba(14, 47, 74, .16);
}
/* =========================================================
LOGO AREA
========================================================= */
.sph-partner-network__logo-area {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
min-width: 0;
min-height: 86px;
margin: 0 !important;
padding:
0 40px 0 0 !important;
border-right:
1px solid rgba(14, 47, 74, .16);
}
.sph-partner-network__logo {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.sph-partner-network__logo
.elementor-widget-container {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
}
.sph-partner-network__logo img {
display: block;
width: auto;
height: auto;
max-width: 270px;
max-height: 72px;
margin: 0;
object-fit: contain;
}
/* =========================================================
CONTENT
========================================================= */
.sph-partner-network__content {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
min-width: 0;
margin: 0 !important;
padding:
0 48px !important;
gap: 0 !important;
}
.sph-partner-network__name {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.sph-partner-network__copy {
width: 100%;
max-width: 720px;
margin:
8px 0 0 0 !important;
padding: 0 !important;
}
.sph-partner-network__copy p {
margin: 0 !important;
}
/* =========================================================
ACTION
========================================================= */
.sph-partner-network__action {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
}
.sph-partner-network__link {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.sph-partner-network__link-anchor {
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
gap: 10px;
text-decoration: none !important;
color:
var(--sph-orange) !important;
transition:
color .2s ease;
}
.sph-partner-network__link-anchor span {
font-family:
"Overpass", sans-serif;
font-size:
.8125rem;
font-weight:
600;
line-height:
1.2;
letter-spacing:
.04em;
text-transform:
uppercase;
white-space: nowrap;
color:
currentColor !important;
}
.sph-partner-network__link-anchor::after {
content: "";
display: block;
flex:
0 0 18px;
width: 18px;
height: 18px;
background-color:
currentColor;
-webkit-mask:
url("https://sph-ag.com/wp-content/uploads/2024/05/fast-forward.svg")
center / contain
no-repeat;
mask:
url("https://sph-ag.com/wp-content/uploads/2024/05/fast-forward.svg")
center / contain
no-repeat;
transition:
transform .2s ease,
background-color .2s ease;
}
.sph-partner-network__link-anchor:hover {
color:
var(--sph-black) !important;
}
.sph-partner-network__link-anchor:hover::after {
transform:
translateX(6px);
}
.sph-partner-network__link-anchor:focus-visible {
outline:
2px solid var(--sph-orange);
outline-offset:
6px;
}
/* =========================================================
<= 1199px
========================================================= */
@media (max-width: 1199px) {
.sph-partner-network__item {
grid-template-columns:
minmax(220px, .75fr)
minmax(0, 1.45fr)
minmax(170px, .5fr);
}
.sph-partner-network__logo-area {
padding-right:
32px !important;
}
.sph-partner-network__content {
padding-left:
36px !important;
padding-right:
36px !important;
}
.sph-partner-network__logo img {
max-width:
230px;
max-height:
66px;
}
}
/* =========================================================
<= 991px
========================================================= */
@media (max-width: 991px) {
.sph-partner-network__list {
margin-top:
48px !important;
}
.sph-partner-network__item {
grid-template-columns:
minmax(190px, .7fr)
minmax(0, 1.3fr);
min-height:
0;
padding:
28px 0 !important;
}
.sph-partner-network__logo-area {
grid-row:
1 / 3;
min-height:
100%;
padding-right:
28px !important;
}
.sph-partner-network__content {
padding:
0 0 0 32px !important;
}
.sph-partner-network__action {
grid-column:
2;
padding:
20px 0 0 32px !important;
justify-content:
flex-start !important;
}
.sph-partner-network__link-anchor {
justify-content:
flex-start;
}
.sph-partner-network__logo img {
max-width:
190px;
max-height:
62px;
}
}
/* =========================================================
<= 767px
========================================================= */
@media (max-width: 767px) {
.sph-partner-network__title {
padding-top:
16px !important;
}
.sph-partner-network__intro-copy {
padding-top:
20px !important;
}
.sph-partner-network__list {
margin-top:
40px !important;
}
.sph-partner-network__item {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
padding:
32px 0 !important;
}
.sph-partner-network__logo-area {
width: 100%;
min-height: 0;
margin: 0 !important;
padding:
0 0 24px 0 !important;
border-right:
0;
}
.sph-partner-network__logo img {
max-width:
220px;
max-height:
64px;
}
.sph-partner-network__content {
width: 100%;
padding:
0 !important;
}
.sph-partner-network__copy {
margin-top:
10px !important;
}
.sph-partner-network__action {
width: 100%;
padding:
24px 0 0 0 !important;
}
.sph-partner-network__link-anchor {
justify-content:
flex-end;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.sph-partner-network__link-anchor::after {
transition:
none;
}
}
/* =========================================================
COMPONENT: PARTNER CTA
Partner – Partner werden / Kontakt
Containerbreite und horizontale Gutters:
global über .sph-container
Formular-Grunddesign:
global über .sph-form
========================================================= */
.sph-partner-cta {
position: relative;
overflow: hidden;
background-color:
var(--sph-blue-dark);
color:
var(--sph-white);
}
/* =========================================================
INNER
========================================================= */
.sph-partner-cta__inner {
display: grid !important;
grid-template-columns:
minmax(0, 1.1fr)
minmax(480px, .9fr);
align-items: stretch !important;
width: 100%;
margin: 0 auto !important;
padding: 0 !important;
gap:
80px !important;
}
/* =========================================================
LEFT
========================================================= */
.sph-partner-cta__left {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
min-width: 0;
margin: 0 !important;
padding: 8px 0 !important;
gap: 0 !important;
}
.sph-partner-cta__eyebrow {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.sph-partner-cta__title {
width: 100%;
max-width: 760px;
margin: 0 !important;
padding:
18px 0 0 0 !important;
}
.sph-partner-cta__intro-copy {
width: 100%;
max-width: 720px;
margin: 0 !important;
padding:
28px 0 0 0 !important;
}
.sph-partner-cta__intro-copy p {
margin: 0 !important;
}
/* =========================================================
BENEFITS
========================================================= */
.sph-partner-cta__benefits {
display: flex !important;
flex-direction: column !important;
width: 100%;
max-width: 720px;
margin:
56px 0 0 0 !important;
padding: 0 !important;
gap:
30px !important;
}
.sph-partner-cta__benefit {
display: grid !important;
grid-template-columns:
104px minmax(0, 1fr);
align-items: center !important;
width: 100%;
margin: 0 !important;
padding: 0 !important;
gap:
32px !important;
}
/* =========================================================
BENEFIT ICON
========================================================= */
.sph-partner-cta__benefit-icon {
width: 104px !important;
margin: 0 !important;
padding: 0 !important;
}
.sph-partner-cta__icon {
display: flex;
align-items: center;
justify-content: center;
width: 94px;
height: 94px;
border:
1px solid rgba(255, 255, 255, .8);
border-radius:
50%;
}
.sph-partner-cta__icon svg {
display: block;
width: 48px;
height: 48px;
fill: none;
stroke:
var(--sph-turquoise);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect:
non-scaling-stroke;
}
/* =========================================================
BENEFIT CONTENT
========================================================= */
.sph-partner-cta__benefit-content {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
}
.sph-partner-cta__benefit-title {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.sph-partner-cta__benefit-copy {
width: 100%;
margin:
8px 0 0 0 !important;
padding: 0 !important;
}
.sph-partner-cta__benefit-copy p {
margin: 0 !important;
}
/* =========================================================
FORM PANEL
========================================================= */
.sph-partner-cta__form-panel {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
min-width: 0;
margin: 0 !important;
padding:
48px 52px 52px 52px !important;
gap: 0 !important;
background-color:
var(--sph-white);
}
.sph-partner-cta__form-eyebrow {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.sph-partner-cta__form-title {
width: 100%;
max-width: 500px;
margin: 0 !important;
padding:
12px 0 0 0 !important;
}
/* =========================================================
FORM
Feldtypografie, Labels, Checkbox, Fokus und Meldungen
kommen global über .sph-form.
========================================================= */
.sph-partner-cta__form {
width: 100%;
margin:
36px 0 0 0 !important;
padding: 0 !important;
}
/* etwas großzügigerer vertikaler Rhythmus */
.sph-partner-cta__form
.elementor-form-fields-wrapper {
row-gap:
20px;
}
/* Textarea wie im Screendesign */
.sph-partner-cta__form
textarea.elementor-field {
min-height:
128px;
}
/* =========================================================
SUBMIT BUTTON POSITION
Button-Design bleibt global.
Keine lokale Typografie, Farbe oder Pfeildefinition.
========================================================= */
.sph-partner-cta__form
.elementor-field-type-submit {
margin-top:
8px;
}
.sph-partner-cta__form
.elementor-button {
width: 100%;
}
/* =========================================================
<= 1399px
========================================================= */
@media (max-width: 1399px) {
.sph-partner-cta__inner {
grid-template-columns:
minmax(0, 1fr)
minmax(460px, .9fr);
gap:
64px !important;
}
.sph-partner-cta__form-panel {
padding:
44px 46px 48px 46px !important;
}
.sph-partner-cta__benefit {
grid-template-columns:
92px minmax(0, 1fr);
gap:
28px !important;
}
.sph-partner-cta__benefit-icon {
width:
92px !important;
}
.sph-partner-cta__icon {
width: 84px;
height: 84px;
}
.sph-partner-cta__icon svg {
width: 42px;
height: 42px;
}
}
/* =========================================================
<= 1199px
========================================================= */
@media (max-width: 1199px) {
.sph-partner-cta__inner {
grid-template-columns:
minmax(0, 1fr)
minmax(420px, .9fr);
gap:
48px !important;
}
.sph-partner-cta__benefits {
margin-top:
48px !important;
gap:
26px !important;
}
.sph-partner-cta__form-panel {
padding:
40px !important;
}
}
/* =========================================================
<= 991px
========================================================= */
@media (max-width: 991px) {
.sph-partner-cta__inner {
grid-template-columns:
1fr;
gap:
56px !important;
}
.sph-partner-cta__left {
padding:
0 !important;
}
.sph-partner-cta__title {
max-width:
720px;
}
.sph-partner-cta__intro-copy {
max-width:
680px;
}
.sph-partner-cta__benefits {
display: grid !important;
grid-template-columns:
repeat(3, minmax(0, 1fr));
max-width:
none;
gap:
28px !important;
}
.sph-partner-cta__benefit {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap:
22px !important;
}
.sph-partner-cta__form-panel {
padding:
44px !important;
}
}
/* =========================================================
<= 767px
========================================================= */
@media (max-width: 767px) {
.sph-partner-cta__inner {
gap:
40px !important;
}
.sph-partner-cta__title {
padding-top:
16px !important;
}
.sph-partner-cta__intro-copy {
padding-top:
22px !important;
}
.sph-partner-cta__benefits {
display: flex !important;
flex-direction: column !important;
margin-top:
40px !important;
gap:
28px !important;
}
.sph-partner-cta__benefit {
display: grid !important;
grid-template-columns:
72px minmax(0, 1fr);
align-items: center !important;
gap:
22px !important;
}
.sph-partner-cta__benefit-icon {
width:
72px !important;
}
.sph-partner-cta__icon {
width: 68px;
height: 68px;
}
.sph-partner-cta__icon svg {
width: 34px;
height: 34px;
}
.sph-partner-cta__form-panel {
padding:
32px 24px 36px 24px !important;
}
.sph-partner-cta__form-title {
padding-top:
10px !important;
}
.sph-partner-cta__form {
margin-top:
28px !important;
}
}
/* =========================================================
COMPONENT: CUSTOMER CTA
Landingpages – Kunden CTA / Kontakt
Containerbreite und horizontale Gutters:
global über .sph-container
Formular-Grunddesign:
global über .sph-form
========================================================= */
.sph-customer-cta {
position: relative;
overflow: hidden;
background-color:
var(--sph-blue-dark);
color:
var(--sph-white);
}
/* =========================================================
INNER
========================================================= */
.sph-customer-cta__inner {
display: grid !important;
grid-template-columns:
minmax(0, 1.1fr)
minmax(480px, .9fr);
align-items: stretch !important;
width: 100%;
margin: 0 auto !important;
padding: 0 !important;
gap:
80px !important;
}
/* =========================================================
LEFT
========================================================= */
.sph-customer-cta__left {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
min-width: 0;
margin: 0 !important;
padding: 8px 0 !important;
gap: 0 !important;
}
.sph-customer-cta__eyebrow {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.sph-customer-cta__title {
width: 100%;
max-width: 760px;
margin: 0 !important;
padding:
18px 0 0 0 !important;
}
.sph-customer-cta__intro-copy {
width: 100%;
max-width: 720px;
margin: 0 !important;
padding:
28px 0 0 0 !important;
}
.sph-customer-cta__intro-copy p {
margin: 0 !important;
}
/* =========================================================
BENEFITS
========================================================= */
.sph-customer-cta__benefits {
display: flex !important;
flex-direction: column !important;
width: 100%;
max-width: 720px;
margin:
56px 0 0 0 !important;
padding: 0 !important;
gap:
30px !important;
}
.sph-customer-cta__benefit {
display: grid !important;
grid-template-columns:
104px minmax(0, 1fr);
align-items: center !important;
width: 100%;
margin: 0 !important;
padding: 0 !important;
gap:
32px !important;
}
/* =========================================================
BENEFIT ICON
========================================================= */
.sph-customer-cta__benefit-icon {
width: 104px !important;
margin: 0 !important;
padding: 0 !important;
}
.sph-customer-cta__icon {
display: flex;
align-items: center;
justify-content: center;
width: 94px;
height: 94px;
border:
1px solid rgba(255, 255, 255, .8);
border-radius:
50%;
}
.sph-customer-cta__icon svg {
display: block;
width: 48px;
height: 48px;
fill: none;
stroke:
var(--sph-turquoise);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect:
non-scaling-stroke;
}
/* =========================================================
BENEFIT CONTENT
========================================================= */
.sph-customer-cta__benefit-content {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
}
.sph-customer-cta__benefit-title {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.sph-customer-cta__benefit-copy {
width: 100%;
margin:
8px 0 0 0 !important;
padding: 0 !important;
}
.sph-customer-cta__benefit-copy p {
margin: 0 !important;
}
/* =========================================================
FORM PANEL
========================================================= */
.sph-customer-cta__form-panel {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
min-width: 0;
margin: 0 !important;
padding:
48px 52px 52px 52px !important;
gap: 0 !important;
background-color:
var(--sph-white);
}
.sph-customer-cta__form-eyebrow {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.sph-customer-cta__form-title {
width: 100%;
max-width: 500px;
margin: 0 !important;
padding:
12px 0 0 0 !important;
}
/* =========================================================
FORM
Typografie, Labels, Checkbox, Felder, Fokus und Meldungen
global über .sph-form.
========================================================= */
.sph-customer-cta__form {
width: 100%;
margin:
36px 0 0 0 !important;
padding: 0 !important;
}
.sph-customer-cta__form
.elementor-form-fields-wrapper {
row-gap:
20px;
}
.sph-customer-cta__form
textarea.elementor-field {
min-height:
128px;
}
/* =========================================================
SUBMIT BUTTON
Globales SPH-Buttondesign.
========================================================= */
.sph-customer-cta__form
.elementor-field-type-submit {
margin-top:
8px;
}
.sph-customer-cta__form
.elementor-button {
width: 100%;
}
/* =========================================================
<= 1399px
========================================================= */
@media (max-width: 1399px) {
.sph-customer-cta__inner {
grid-template-columns:
minmax(0, 1fr)
minmax(460px, .9fr);
gap:
64px !important;
}
.sph-customer-cta__form-panel {
padding:
44px 46px 48px 46px !important;
}
.sph-customer-cta__benefit {
grid-template-columns:
92px minmax(0, 1fr);
gap:
28px !important;
}
.sph-customer-cta__benefit-icon {
width:
92px !important;
}
.sph-customer-cta__icon {
width: 84px;
height: 84px;
}
.sph-customer-cta__icon svg {
width: 42px;
height: 42px;
}
}
/* =========================================================
<= 1199px
========================================================= */
@media (max-width: 1199px) {
.sph-customer-cta__inner {
grid-template-columns:
minmax(0, 1fr)
minmax(420px, .9fr);
gap:
48px !important;
}
.sph-customer-cta__benefits {
margin-top:
48px !important;
gap:
26px !important;
}
.sph-customer-cta__form-panel {
padding:
40px !important;
}
}
/* =========================================================
<= 991px
========================================================= */
@media (max-width: 991px) {
.sph-customer-cta__inner {
grid-template-columns:
1fr;
gap:
56px !important;
}
.sph-customer-cta__left {
padding:
0 !important;
}
.sph-customer-cta__title {
max-width:
720px;
}
.sph-customer-cta__intro-copy {
max-width:
680px;
}
.sph-customer-cta__benefits {
display: grid !important;
grid-template-columns:
repeat(3, minmax(0, 1fr));
max-width:
none;
gap:
28px !important;
}
.sph-customer-cta__benefit {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap:
22px !important;
}
.sph-customer-cta__form-panel {
padding:
44px !important;
}
}
/* =========================================================
<= 767px
========================================================= */
@media (max-width: 767px) {
.sph-customer-cta__inner {
gap:
40px !important;
}
.sph-customer-cta__title {
padding-top:
16px !important;
}
.sph-customer-cta__intro-copy {
padding-top:
22px !important;
}
.sph-customer-cta__benefits {
display: flex !important;
flex-direction: column !important;
margin-top:
40px !important;
gap:
28px !important;
}
.sph-customer-cta__benefit {
display: grid !important;
grid-template-columns:
72px minmax(0, 1fr);
align-items: center !important;
gap:
22px !important;
}
.sph-customer-cta__benefit-icon {
width:
72px !important;
}
.sph-customer-cta__icon {
width: 68px;
height: 68px;
}
.sph-customer-cta__icon svg {
width: 34px;
height: 34px;
}
.sph-customer-cta__form-panel {
padding:
32px 24px 36px 24px !important;
}
.sph-customer-cta__form-title {
padding-top:
10px !important;
}
.sph-customer-cta__form {
margin-top:
28px !important;
}
}
/* =========================================================
COMPONENT: TECHNOLOGY ARCHITECTURE
Technologies Overview – Microsoft Platform
========================================================= */
.sph-tech-arch {
background:
var(--sph-white);
}
/* =========================================================
INNER
========================================================= */
.sph-tech-arch__inner {
display: flex !important;
flex-direction: column !important;
width: 100%;
margin: 0 auto !important;
padding: 0 !important;
gap: 0 !important;
}
/* =========================================================
INTRO
========================================================= */
.sph-tech-arch__intro {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
width: 100%;
max-width: 900px;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
}
.sph-tech-arch__headline {
width: 100%;
margin: 0 !important;
padding:
14px 0 0 0 !important;
}
.sph-tech-arch__intro-copy {
width: 100%;
max-width: 800px;
margin: 0 !important;
padding:
24px 0 0 0 !important;
}
.sph-tech-arch__intro-copy p {
margin: 0 !important;
}
/* =========================================================
LAYER LABELS
========================================================= */
.sph-tech-arch__layer-label {
position: relative;
display: flex;
align-items: center;
width: 100%;
margin:
64px 0 0 0 !important;
padding: 0 !important;
gap: 20px;
white-space: nowrap;
}
.sph-tech-arch__layer-label::before,
.sph-tech-arch__layer-label::after {
content: "";
display: block;
width: 100%;
height: 1px;
background:
rgba(24, 56, 88, .18);
}
/* =========================================================
BUSINESS PROCESSES
One shared process layer for all ERP systems
========================================================= */
.sph-tech-arch__processes {
display: grid !important;
grid-template-columns:
repeat(12, minmax(0, 1fr));
width: 100%;
margin:
32px 0 0 0 !important;
padding: 0 !important;
gap:
18px !important;
}
.sph-tech-arch__process {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
gap:
12px !important;
}
/* =========================================================
PROCESS MARKER
========================================================= */
.sph-tech-arch__process-marker {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.sph-tech-arch__process-dot {
display: block;
width: 42px;
height: 42px;
border:
1px solid rgba(254, 105, 1, .25);
border-radius:
50%;
background:
rgba(254, 105, 1, .06);
position: relative;
}
.sph-tech-arch__process-dot::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
border-radius:
50%;
background:
var(--sph-orange);
transform:
translate(-50%, -50%);
}
.sph-tech-arch__process-label {
width: 100%;
margin: 0 !important;
padding: 0 !important;
text-align: center;
}
.sph-tech-arch__process-label :is(h4, p) {
margin: 0 !important;
font-family:
"Overpass", sans-serif;
font-size:
.875rem;
font-weight:
600;
line-height:
1.25;
}
/* =========================================================
DYNAMICS 365 GRID
========================================================= */
.sph-tech-arch__erp-grid {
display: grid !important;
grid-template-columns:
repeat(3, minmax(0, 1fr));
width: 100%;
margin:
30px 0 0 0 !important;
padding: 0 !important;
gap:
20px !important;
}
/* =========================================================
ERP CARD
========================================================= */
.sph-tech-arch__erp-card {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
min-width: 0;
min-height: 310px;
margin: 0 !important;
padding:
34px 36px !important;
gap: 0 !important;
border:
1px solid rgba(24, 56, 88, .10);
border-radius:
4px;
background:
var(--sph-grey-light);
}
.sph-tech-arch__erp-card:first-child {
border-top:
3px solid var(--sph-orange);
}
.sph-tech-arch__erp-card:nth-child(2),
.sph-tech-arch__erp-card:nth-child(3) {
border-top:
3px solid var(--sph-turquoise);
}
.sph-tech-arch__erp-kicker {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.sph-tech-arch__erp-title {
width: 100%;
margin: 0 !important;
padding:
12px 0 0 0 !important;
}
.sph-tech-arch__erp-copy {
width: 100%;
margin: 0 !important;
padding:
14px 0 0 0 !important;
}
.sph-tech-arch__erp-copy p {
margin: 0 !important;
}
/* =========================================================
ERP SOLUTION LOGOS
========================================================= */
.sph-tech-arch__solution-logos {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: wrap !important;
width: 100%;
margin:
auto 0 0 0 !important;
padding:
30px 0 0 0 !important;
gap:
16px !important;
}
.sph-tech-arch__solution-logo {
flex:
0 0 auto !important;
width:
auto !important;
margin: 0 !important;
padding: 0 !important;
}
.sph-tech-arch__solution-logo img {
display: block;
width: auto;
height: 34px;
max-width: 80px;
object-fit: contain;
}
/* =========================================================
PLATFORM & SERVICES
========================================================= */
.sph-tech-arch__services {
display: grid !important;
grid-template-columns:
repeat(4, minmax(0, 1fr));
width: 100%;
margin:
30px 0 0 0 !important;
padding:
0 !important;
border:
1px solid rgba(24, 56, 88, .12);
background:
var(--sph-white);
}
.sph-tech-arch__service {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
min-width: 0;
margin: 0 !important;
padding:
26px 28px !important;
gap:
18px !important;
border-right:
1px solid rgba(24, 56, 88, .12);
}
.sph-tech-arch__service:last-child {
border-right: 0;
}
.sph-tech-arch__service-logo {
flex:
0 0 46px !important;
width:
46px !important;
margin: 0 !important;
padding: 0 !important;
}
.sph-tech-arch__service-logo img {
display: block;
width: 46px;
height: 46px;
object-fit: contain;
}
.sph-tech-arch__service-text {
display: flex !important;
flex-direction: column !important;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
gap:
5px !important;
}
.sph-tech-arch__service-title {
margin: 0 !important;
padding: 0 !important;
}
.sph-tech-arch__service-title h4 {
margin: 0 !important;
font-family:
"Overpass", sans-serif;
font-size:
1.125rem;
font-weight:
700;
line-height:
1.2;
}
.sph-tech-arch__service-subtitle {
margin: 0 !important;
padding: 0 !important;
}
.sph-tech-arch__service-subtitle p {
margin: 0 !important;
font-family:
"Overpass", sans-serif;
font-size:
.6875rem;
font-weight:
600;
line-height:
1.3;
letter-spacing:
.08em;
color:
var(--sph-turquoise);
text-transform:
uppercase;
}
/* =========================================================
FOUNDATION
========================================================= */
.sph-tech-arch__foundation {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
width: 100%;
margin:
10px 0 0 0 !important;
padding:
22px 32px !important;
gap:
20px !important;
}
.sph-tech-arch__foundation--dataverse {
background:
var(--sph-grey-light);
color:
var(--sph-blue-dark);
}
.sph-tech-arch__foundation--azure {
background:
var(--sph-blue);
color:
var(--sph-white);
}
.sph-tech-arch__foundation-logo {
flex:
0 0 48px !important;
width:
48px !important;
margin: 0 !important;
padding: 0 !important;
}
.sph-tech-arch__foundation-logo img {
display: block;
width: 48px;
height: 48px;
object-fit: contain;
}
.sph-tech-arch__foundation-text {
display: flex !important;
flex-direction: column !important;
width:
auto !important;
margin: 0 !important;
padding: 0 !important;
gap:
3px !important;
}
.sph-tech-arch__foundation-title {
margin: 0 !important;
padding: 0 !important;
}
.sph-tech-arch__foundation-title h3 {
margin: 0 !important;
font-family:
"Overpass", sans-serif;
font-size:
1.25rem;
font-weight:
700;
line-height:
1.2;
color:
inherit;
}
.sph-tech-arch__foundation-subtitle {
margin: 0 !important;
padding: 0 !important;
}
.sph-tech-arch__foundation-subtitle p {
margin: 0 !important;
font-family:
"Overpass", sans-serif;
font-size:
.6875rem;
font-weight:
600;
line-height:
1.3;
letter-spacing:
.08em;
color:
inherit;
text-transform:
uppercase;
opacity:
.75;
}
/* =========================================================
<= 1399px
========================================================= */
@media (max-width: 1399px) {
.sph-tech-arch__processes {
gap:
12px !important;
}
.sph-tech-arch__process-label :is(h4, p) {
font-size:
.8125rem;
}
.sph-tech-arch__erp-card {
padding:
30px !important;
}
.sph-tech-arch__service {
padding:
24px 20px !important;
gap:
14px !important;
}
}
/* =========================================================
<= 1199px
========================================================= */
@media (max-width: 1199px) {
.sph-tech-arch__processes {
grid-template-columns:
repeat(6, minmax(0, 1fr));
row-gap:
28px !important;
}
.sph-tech-arch__erp-card {
min-height:
330px;
padding:
26px !important;
}
.sph-tech-arch__services {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.sph-tech-arch__service:nth-child(2) {
border-right: 0;
}
.sph-tech-arch__service:nth-child(-n+2) {
border-bottom:
1px solid rgba(24, 56, 88, .12);
}
}
/* =========================================================
<= 991px
========================================================= */
@media (max-width: 991px) {
.sph-tech-arch__layer-label {
margin-top:
56px !important;
}
.sph-tech-arch__erp-grid {
grid-template-columns:
1fr;
gap:
16px !important;
}
.sph-tech-arch__erp-card {
min-height: 0;
padding:
32px !important;
}
.sph-tech-arch__solution-logos {
margin:
28px 0 0 0 !important;
padding: 0 !important;
}
}
/* =========================================================
<= 767px
Mobile becomes a vertical architecture
========================================================= */
@media (max-width: 767px) {
.sph-tech-arch__intro {
max-width: none;
}
.sph-tech-arch__intro-copy {
padding-top:
20px !important;
}
.sph-tech-arch__layer-label {
justify-content:
center;
margin-top:
48px !important;
gap:
14px;
}
.sph-tech-arch__layer-label::before,
.sph-tech-arch__layer-label::after {
flex:
1 1 auto;
}
/* Business processes */
.sph-tech-arch__processes {
grid-template-columns:
repeat(2, minmax(0, 1fr));
margin-top:
28px !important;
gap:
0 !important;
border-top:
1px solid rgba(24, 56, 88, .12);
}
.sph-tech-arch__process {
display: grid !important;
grid-template-columns:
12px minmax(0, 1fr);
align-items:
center !important;
padding:
14px 10px !important;
gap:
10px !important;
border-bottom:
1px solid rgba(24, 56, 88, .12);
}
.sph-tech-arch__process:nth-child(odd) {
border-right:
1px solid rgba(24, 56, 88, .12);
}
.sph-tech-arch__process-marker {
width:
12px !important;
}
.sph-tech-arch__process-dot {
width: 8px;
height: 8px;
border: 0;
background:
var(--sph-orange);
}
.sph-tech-arch__process-dot::after {
display: none;
}
.sph-tech-arch__process-label {
text-align:
left;
}
.sph-tech-arch__process-label :is(h4, p) {
font-size:
.8125rem;
}
/* ERP */
.sph-tech-arch__erp-grid {
margin-top:
26px !important;
}
.sph-tech-arch__erp-card {
padding:
26px 24px !important;
}
.sph-tech-arch__solution-logo img {
height:
30px;
max-width:
70px;
}
/* Services */
.sph-tech-arch__services {
grid-template-columns:
1fr;
margin-top:
26px !important;
}
.sph-tech-arch__service {
border-right: 0;
border-bottom:
1px solid rgba(24, 56, 88, .12);
padding:
20px 22px !important;
}
.sph-tech-arch__service:nth-child(2) {
border-right: 0;
}
.sph-tech-arch__service:last-child {
border-bottom: 0;
}
/* Foundation */
.sph-tech-arch__foundation {
justify-content:
flex-start !important;
padding:
20px 22px !important;
}
.sph-tech-arch__foundation-logo {
flex-basis:
42px !important;
width:
42px !important;
}
.sph-tech-arch__foundation-logo img {
width: 42px;
height: 42px;
}
}
/* =========================================================
COMPONENT: TECHNOLOGY DIRECTORY
Technologies Overview
========================================================= */
.sph-tech-directory {
background:
var(--sph-grey-light);
}
/* =========================================================
INNER
========================================================= */
.sph-tech-directory__inner {
display: grid !important;
grid-template-columns:
minmax(0, .9fr)
minmax(0, 1.1fr);
align-items:
start !important;
width: 100%;
margin: 0 auto !important;
padding: 0 !important;
gap:
80px !important;
}
/* =========================================================
INTRO
========================================================= */
.sph-tech-directory__intro {
display: flex !important;
flex-direction: column !important;
align-items:
flex-start !important;
width: 100%;
max-width: 620px;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
}
.sph-tech-directory__headline {
width: 100%;
margin: 0 !important;
padding:
14px 0 0 0 !important;
}
.sph-tech-directory__intro-copy {
width: 100%;
max-width: 580px;
margin: 0 !important;
padding:
28px 0 0 0 !important;
}
.sph-tech-directory__intro-copy p {
margin: 0 !important;
}
/* =========================================================
LIST
No gap:
hover surfaces must meet exactly
========================================================= */
.sph-tech-directory__list {
display: flex !important;
flex-direction: column !important;
width: 100%;
margin: 0 !important;
padding: 0 !important;
gap:
0 !important;
border-top:
1px solid rgba(24, 56, 88, .20);
}
/* =========================================================
ITEM
Complete container is clickable
========================================================= */
.sph-tech-directory__item {
position: relative;
display: grid !important;
grid-template-columns:
84px
minmax(0, 1fr)
32px;
align-items:
center !important;
width: 100%;
margin: 0 !important;
padding:
32px 24px !important;
gap:
28px !important;
border-bottom:
1px solid rgba(24, 56, 88, .20);
background:
transparent;
cursor:
pointer;
transition:
background-color .22s ease;
}
/* =========================================================
MEDIA
Elementor image widget remains editable
========================================================= */
.sph-tech-directory__media {
display: flex !important;
align-items:
center !important;
justify-content:
center !important;
width: 84px;
min-width: 84px;
margin: 0 !important;
padding: 0 !important;
}
.sph-tech-directory__image {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.sph-tech-directory__image .elementor-widget-container {
display: flex;
align-items: center;
justify-content: center;
}
.sph-tech-directory__image img {
display: block;
width: 56px;
height: 56px;
object-fit:
contain;
transition:
filter .22s ease;
}
/* =========================================================
ITEM CONTENT
========================================================= */
.sph-tech-directory__item-content {
display: flex !important;
flex-direction: column !important;
align-items:
flex-start !important;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
gap:
0 !important;
}
.sph-tech-directory__item-kicker {
width: 100%;
margin: 0 !important;
padding: 0 !important;
transition:
color .22s ease;
}
.sph-tech-directory__item-title {
width: 100%;
margin: 0 !important;
padding:
8px 0 0 0 !important;
transition:
color .22s ease;
}
.sph-tech-directory__item-copy {
width: 100%;
margin: 0 !important;
padding:
10px 0 0 0 !important;
color:
var(--sph-blue-dark);
transition:
color .22s ease;
}
.sph-tech-directory__item-copy p {
margin: 0 !important;
color:
inherit;
}
/* =========================================================
ARROW
========================================================= */
.sph-tech-directory__arrow {
display: flex;
align-items:
center;
justify-content:
flex-end;
width: 32px;
margin: 0 !important;
padding: 0 !important;
}
.sph-tech-directory__arrow-icon {
display: block;
width: 24px;
height: 24px;
background:
var(--sph-orange);
-webkit-mask:
url("https://sph-ag.com/wp-content/uploads/2024/05/fast-forward.svg")
center / contain no-repeat;
mask:
url("https://sph-ag.com/wp-content/uploads/2024/05/fast-forward.svg")
center / contain no-repeat;
transition:
transform .22s ease;
}
/* =========================================================
HOVER
Whole row becomes blue
========================================================= */
.sph-tech-directory__item:hover,
.sph-tech-directory__item:focus-within {
background:
var(--sph-blue);
}
.sph-tech-directory__item:hover
.sph-tech-directory__item-kicker,
.sph-tech-directory__item:hover
.sph-tech-directory__item-title,
.sph-tech-directory__item:hover
.sph-tech-directory__item-copy,
.sph-tech-directory__item:focus-within
.sph-tech-directory__item-kicker,
.sph-tech-directory__item:focus-within
.sph-tech-directory__item-title,
.sph-tech-directory__item:focus-within
.sph-tech-directory__item-copy {
color:
var(--sph-white) !important;
}
.sph-tech-directory__item:hover
.sph-tech-directory__item-kicker :is(p, span),
.sph-tech-directory__item:hover
.sph-tech-directory__item-title :is(h2, h3, h4, span),
.sph-tech-directory__item:focus-within
.sph-tech-directory__item-kicker :is(p, span),
.sph-tech-directory__item:focus-within
.sph-tech-directory__item-title :is(h2, h3, h4, span) {
color:
var(--sph-white) !important;
}
.sph-tech-directory__item:hover
.sph-tech-directory__arrow-icon,
.sph-tech-directory__item:focus-within
.sph-tech-directory__arrow-icon {
transform:
translateX(6px);
}
/* =========================================================
<= 1199px
========================================================= */
@media (max-width: 1199px) {
.sph-tech-directory__inner {
grid-template-columns:
minmax(0, .8fr)
minmax(0, 1.2fr);
gap:
56px !important;
}
.sph-tech-directory__item {
grid-template-columns:
68px
minmax(0, 1fr)
28px;
padding:
28px 20px !important;
gap:
22px !important;
}
.sph-tech-directory__media {
width: 68px;
min-width: 68px;
}
.sph-tech-directory__image img {
width: 48px;
height: 48px;
}
}
/* =========================================================
<= 991px
========================================================= */
@media (max-width: 991px) {
.sph-tech-directory__inner {
grid-template-columns:
1fr;
gap:
56px !important;
}
.sph-tech-directory__intro {
max-width:
720px;
}
.sph-tech-directory__intro-copy {
max-width:
680px;
}
}
/* =========================================================
<= 767px
========================================================= */
@media (max-width: 767px) {
.sph-tech-directory__inner {
gap:
44px !important;
}
.sph-tech-directory__intro-copy {
padding-top:
20px !important;
}
.sph-tech-directory__item {
grid-template-columns:
52px
minmax(0, 1fr)
24px;
padding:
24px 14px !important;
gap:
16px !important;
}
.sph-tech-directory__media {
width: 52px;
min-width: 52px;
}
.sph-tech-directory__image img {
width: 40px;
height: 40px;
}
.sph-tech-directory__item-title {
padding-top:
6px !important;
}
.sph-tech-directory__item-copy {
padding-top:
8px !important;
}
.sph-tech-directory__arrow {
width:
24px;
}
.sph-tech-directory__arrow-icon {
width: 20px;
height: 20px;
}
}
/* =========================================================
<= 479px
========================================================= */
@media (max-width: 479px) {
.sph-tech-directory__item {
grid-template-columns:
40px
minmax(0, 1fr)
20px;
padding:
22px 10px !important;
gap:
12px !important;
}
.sph-tech-directory__media {
width: 40px;
min-width: 40px;
}
.sph-tech-directory__image img {
width: 34px;
height: 34px;
}
.sph-tech-directory__arrow {
width:
20px;
}
.sph-tech-directory__arrow-icon {
width: 18px;
height: 18px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.sph-tech-directory__item,
.sph-tech-directory__item-kicker,
.sph-tech-directory__item-title,
.sph-tech-directory__item-copy,
.sph-tech-directory__image img,
.sph-tech-directory__arrow-icon {
transition:
none;
}
.sph-tech-directory__item:hover
.sph-tech-directory__arrow-icon,
.sph-tech-directory__item:focus-within
.sph-tech-directory__arrow-icon {
transform:
none;
}
}
/* =========================================================
COMPONENT: SOLUTIONS BRIDGE
Technologies Overview
========================================================= */
.sph-solutions-bridge {
background:
var(--sph-blue);
}
/* =========================================================
INNER
========================================================= */
.sph-solutions-bridge__inner {
display: flex !important;
flex-direction: column !important;
width: 100%;
margin: 0 auto !important;
padding: 0 !important;
gap: 0 !important;
}
/* =========================================================
INTRO
========================================================= */
.sph-solutions-bridge__intro {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
width: 100%;
max-width: 900px;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
}
.sph-solutions-bridge__headline {
width: 100%;
margin: 0 !important;
padding:
14px 0 0 0 !important;
}
.sph-solutions-bridge__intro-copy {
width: 100%;
max-width: 800px;
margin: 0 !important;
padding:
24px 0 0 0 !important;
}
.sph-solutions-bridge__intro-copy p {
margin: 0 !important;
color:
var(--sph-white);
}
/* =========================================================
GRID
No gap so all tile edges meet exactly
========================================================= */
.sph-solutions-bridge__grid {
display: grid !important;
grid-template-columns:
repeat(2, minmax(0, 1fr));
width: 100%;
margin:
64px 0 0 0 !important;
padding: 0 !important;
gap:
0 !important;
border-top:
1px solid rgba(255, 255, 255, .18);
border-left:
1px solid rgba(255, 255, 255, .18);
}
/* =========================================================
TILE
Complete tile is clickable
========================================================= */
.sph-solutions-bridge__tile {
position: relative;
display: grid !important;
grid-template-columns:
120px minmax(0, 1fr);
align-items:
start !important;
min-width: 0;
margin: 0 !important;
padding:
44px 48px !important;
gap:
34px !important;
border-right:
1px solid rgba(255, 255, 255, .18);
border-bottom:
1px solid rgba(255, 255, 255, .18);
background:
transparent;
cursor:
pointer;
transition:
background-color .22s ease;
}
/* =========================================================
ICON
Editable Elementor image widget
========================================================= */
.sph-solutions-bridge__icon {
position: relative;
z-index: 1;
width: 120px;
margin: 0 !important;
padding: 0 !important;
opacity:
.48;
transition:
opacity .22s ease;
}
.sph-solutions-bridge__icon .elementor-widget-container {
display: flex;
align-items:
flex-start;
justify-content:
center;
}
.sph-solutions-bridge__icon img {
display: block;
width: 100px;
height: 100px;
object-fit:
contain;
/*
* Converts the supplied black SVG assets
* into the turquoise SPH icon treatment.
*/
filter:
invert(68%)
sepia(87%)
saturate(1087%)
hue-rotate(119deg)
brightness(91%)
contrast(102%);
}
/* =========================================================
BODY
========================================================= */
.sph-solutions-bridge__body {
position: relative;
z-index: 1;
display: flex !important;
flex-direction: column !important;
align-items:
flex-start !important;
min-width: 0;
min-height: 100%;
margin: 0 !important;
padding: 0 !important;
gap:
0 !important;
}
/* =========================================================
SOLUTION NAME
========================================================= */
.sph-solutions-bridge__name {
width: 100%;
margin: 0 !important;
padding: 0 !important;
color:
var(--sph-white);
transition:
color .22s ease;
}
.sph-solutions-bridge__name h3 {
margin: 0 !important;
color:
inherit !important;
}
/* =========================================================
SUBTITLE
========================================================= */
.sph-solutions-bridge__subtitle {
width: 100%;
margin: 0 !important;
padding:
12px 0 0 0 !important;
color:
var(--sph-white);
transition:
color .22s ease;
}
.sph-solutions-bridge__subtitle h4 {
margin: 0 !important;
font-family:
"Overpass", sans-serif;
font-size:
1.125rem;
font-weight:
700;
line-height:
1.35;
color:
inherit;
}
/* =========================================================
COPY
Typography size comes from global sph-copy-lg
========================================================= */
.sph-solutions-bridge__copy {
width: 100%;
margin: 0 !important;
padding:
14px 0 0 0 !important;
color:
var(--sph-white);
transition:
color .22s ease;
}
.sph-solutions-bridge__copy p {
margin: 0 !important;
color:
inherit;
}
/* =========================================================
CTA
========================================================= */
.sph-solutions-bridge__cta {
display: flex;
align-items: center;
width: 100%;
margin:
auto 0 0 0 !important;
padding:
26px 0 0 0 !important;
gap:
10px;
color:
var(--sph-white);
transition:
color .22s ease;
}
.sph-solutions-bridge__cta-text {
font-family:
"Overpass", sans-serif;
font-size:
.8125rem;
font-weight:
600;
line-height:
1.2;
letter-spacing:
.04em;
color:
inherit;
text-transform:
uppercase;
}
.sph-solutions-bridge__arrow-icon {
display: block;
flex:
0 0 18px;
width: 18px;
height: 18px;
background:
var(--sph-orange);
-webkit-mask:
url("https://sph-ag.com/wp-content/uploads/2024/05/fast-forward.svg")
center / contain no-repeat;
mask:
url("https://sph-ag.com/wp-content/uploads/2024/05/fast-forward.svg")
center / contain no-repeat;
transition:
transform .22s ease;
}
/* =========================================================
HOVER
Icon remains turquoise
========================================================= */
.sph-solutions-bridge__tile:hover,
.sph-solutions-bridge__tile:focus-within {
background:
var(--sph-blue-light);
}
.sph-solutions-bridge__tile:hover
.sph-solutions-bridge__icon,
.sph-solutions-bridge__tile:focus-within
.sph-solutions-bridge__icon {
opacity:
1;
}
.sph-solutions-bridge__tile:hover
.sph-solutions-bridge__name,
.sph-solutions-bridge__tile:hover
.sph-solutions-bridge__subtitle,
.sph-solutions-bridge__tile:hover
.sph-solutions-bridge__copy,
.sph-solutions-bridge__tile:hover
.sph-solutions-bridge__cta,
.sph-solutions-bridge__tile:focus-within
.sph-solutions-bridge__name,
.sph-solutions-bridge__tile:focus-within
.sph-solutions-bridge__subtitle,
.sph-solutions-bridge__tile:focus-within
.sph-solutions-bridge__copy,
.sph-solutions-bridge__tile:focus-within
.sph-solutions-bridge__cta {
color:
var(--sph-white) !important;
}
.sph-solutions-bridge__tile:hover
.sph-solutions-bridge__arrow-icon,
.sph-solutions-bridge__tile:focus-within
.sph-solutions-bridge__arrow-icon {
transform:
translateX(6px);
}
/* =========================================================
<= 1199px
========================================================= */
@media (max-width: 1199px) {
.sph-solutions-bridge__tile {
grid-template-columns:
90px minmax(0, 1fr);
padding:
38px 34px !important;
gap:
28px !important;
}
.sph-solutions-bridge__icon {
width:
90px;
}
.sph-solutions-bridge__icon img {
width: 76px;
height: 76px;
}
}
/* =========================================================
<= 991px
========================================================= */
@media (max-width: 991px) {
.sph-solutions-bridge__grid {
margin-top:
56px !important;
}
.sph-solutions-bridge__tile {
grid-template-columns:
70px minmax(0, 1fr);
padding:
32px 28px !important;
gap:
22px !important;
}
.sph-solutions-bridge__icon {
width:
70px;
}
.sph-solutions-bridge__icon img {
width: 60px;
height: 60px;
}
}
/* =========================================================
<= 767px
========================================================= */
@media (max-width: 767px) {
.sph-solutions-bridge__intro-copy {
padding-top:
20px !important;
}
.sph-solutions-bridge__grid {
grid-template-columns:
1fr;
margin-top:
44px !important;
}
.sph-solutions-bridge__tile {
grid-template-columns:
64px minmax(0, 1fr);
padding:
30px 24px !important;
gap:
20px !important;
}
.sph-solutions-bridge__icon {
width:
64px;
}
.sph-solutions-bridge__icon img {
width: 54px;
height: 54px;
}
}
/* =========================================================
<= 479px
========================================================= */
@media (max-width: 479px) {
.sph-solutions-bridge__tile {
grid-template-columns:
48px minmax(0, 1fr);
padding:
26px 18px !important;
gap:
16px !important;
}
.sph-solutions-bridge__icon {
width:
48px;
}
.sph-solutions-bridge__icon img {
width: 42px;
height: 42px;
}
.sph-solutions-bridge__subtitle {
padding-top:
9px !important;
}
.sph-solutions-bridge__copy {
padding-top:
10px !important;
}
.sph-solutions-bridge__cta {
padding-top:
20px !important;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.sph-solutions-bridge__tile,
.sph-solutions-bridge__icon,
.sph-solutions-bridge__name,
.sph-solutions-bridge__subtitle,
.sph-solutions-bridge__copy,
.sph-solutions-bridge__cta,
.sph-solutions-bridge__arrow-icon {
transition:
none;
}
.sph-solutions-bridge__tile:hover
.sph-solutions-bridge__arrow-icon,
.sph-solutions-bridge__tile:focus-within
.sph-solutions-bridge__arrow-icon {
transform:
none;
}
}
/* =========================================================
COMPONENT: TECHNOLOGY FIT
FSCM / Business Central Detail Pages
========================================================= */
.sph-tech-fit {
background:
var(--sph-white);
}
/* =========================================================
INNER
========================================================= */
.sph-tech-fit__inner {
display: flex !important;
flex-direction: column !important;
width: 100%;
margin: 0 auto !important;
padding: 0 !important;
gap: 0 !important;
}
/* =========================================================
INTRO
========================================================= */
.sph-tech-fit__intro {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
width: 100%;
max-width: 900px;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
}
.sph-tech-fit__headline {
width: 100%;
margin: 0 !important;
padding:
14px 0 0 0 !important;
}
/* =========================================================
GRID
========================================================= */
.sph-tech-fit__grid {
display: grid !important;
grid-template-columns:
repeat(4, minmax(0, 1fr));
width: 100%;
margin:
64px 0 0 0 !important;
padding: 0 !important;
gap: 0 !important;
border-top:
1px solid rgba(24, 56, 88, .18);
border-left:
1px solid rgba(24, 56, 88, .18);
}
/* =========================================================
ITEM
========================================================= */
.sph-tech-fit__item {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
min-width: 0;
margin: 0 !important;
padding:
38px 32px 42px !important;
gap: 0 !important;
border-right:
1px solid rgba(24, 56, 88, .18);
border-bottom:
1px solid rgba(24, 56, 88, .18);
background:
transparent;
}
/* =========================================================
NATIVE ELEMENTOR ICON
Always turquoise
========================================================= */
.sph-tech-fit__icon {
width:
auto;
margin:
0 0 34px 0 !important;
padding:
0 !important;
color:
var(--sph-turquoise) !important;
}
.sph-tech-fit__icon .elementor-icon-wrapper {
display:
flex;
align-items:
center;
justify-content:
flex-start;
line-height:
1;
}
.sph-tech-fit__icon .elementor-icon {
display:
inline-flex;
align-items:
center;
justify-content:
center;
padding:
0;
border:
0;
color:
var(--sph-turquoise) !important;
background:
transparent !important;
}
.sph-tech-fit__icon .elementor-icon i {
font-size:
58px;
color:
var(--sph-turquoise) !important;
}
.sph-tech-fit__icon .elementor-icon svg {
width:
58px;
height:
58px;
fill:
currentColor !important;
color:
var(--sph-turquoise) !important;
}
.sph-tech-fit__icon .elementor-icon svg * {
fill:
currentColor !important;
stroke:
currentColor;
}
/* =========================================================
TITLE
Typography comes from global classes
========================================================= */
.sph-tech-fit__item-title {
width: 100%;
margin: 0 !important;
padding: 0 !important;
color:
var(--sph-blue);
}
.sph-tech-fit__item-title h3 {
margin:
0 !important;
color:
inherit !important;
}
/* =========================================================
COPY
Typography comes from sph-copy-lg
========================================================= */
.sph-tech-fit__item-copy {
width: 100%;
margin: 0 !important;
padding:
18px 0 0 0 !important;
color:
var(--sph-blue);
}
.sph-tech-fit__item-copy p {
margin:
0 !important;
color:
inherit;
}
/* =========================================================
<= 1199px
2 × 2
========================================================= */
@media (max-width: 1199px) {
.sph-tech-fit__grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.sph-tech-fit__item {
padding:
36px 32px 40px !important;
}
}
/* =========================================================
<= 767px
1 COLUMN
========================================================= */
@media (max-width: 767px) {
.sph-tech-fit__grid {
grid-template-columns:
1fr;
margin-top:
44px !important;
}
.sph-tech-fit__item {
padding:
30px 24px 34px !important;
}
.sph-tech-fit__icon {
margin-bottom:
26px !important;
}
.sph-tech-fit__icon .elementor-icon i {
font-size:
50px;
}
.sph-tech-fit__icon .elementor-icon svg {
width:
50px;
height:
50px;
}
.sph-tech-fit__item-copy {
padding-top:
14px !important;
}
}
/* =========================================================
<= 479px
========================================================= */
@media (max-width: 479px) {
.sph-tech-fit__item {
padding:
28px 20px 32px !important;
}
.sph-tech-fit__icon .elementor-icon i {
font-size:
46px;
}
.sph-tech-fit__icon .elementor-icon svg {
width:
46px;
height:
46px;
}
}
/* =========================================================
COMPONENT: CUSTOMER STORY
Technology Detail Pages
========================================================= */
.sph-customer-story {
background:
var(--sph-blue);
}
/* =========================================================
INNER
========================================================= */
.sph-customer-story__inner {
width: 100%;
margin:
0 auto !important;
padding:
0 !important;
}
/* =========================================================
LAYOUT
========================================================= */
.sph-customer-story__layout {
display: grid !important;
grid-template-columns:
minmax(0, 1fr)
minmax(420px, .9fr);
align-items:
center !important;
width: 100%;
margin:
0 !important;
padding:
0 !important;
gap:
80px !important;
}
/* =========================================================
CONTENT
========================================================= */
.sph-customer-story__content {
display: flex !important;
flex-direction:
column !important;
align-items:
flex-start !important;
width: 100%;
max-width: 720px;
margin:
0 !important;
padding:
0 !important;
gap:
0 !important;
}
.sph-customer-story__headline {
width: 100%;
margin:
0 !important;
padding:
14px 0 0 0 !important;
}
/* =========================================================
COPY
Typography comes from sph-copy-lg
========================================================= */
.sph-customer-story__copy {
width: 100%;
margin:
0 !important;
padding:
32px 0 0 0 !important;
color:
var(--sph-white);
}
.sph-customer-story__copy p {
margin:
0 0 20px 0 !important;
color:
inherit;
}
.sph-customer-story__copy p:last-child {
margin-bottom:
0 !important;
}
/* =========================================================
BUTTON
Global Elementor button styling remains untouched
========================================================= */
.sph-customer-story__button {
margin:
36px 0 0 0 !important;
padding:
0 !important;
}
/* =========================================================
VISUAL
Native Elementor image
No overlay / filter / mask / crop shape
========================================================= */
.sph-customer-story__visual {
display: flex !important;
align-items:
center !important;
justify-content:
flex-end !important;
width: 100%;
margin:
0 !important;
padding:
0 !important;
}
.sph-customer-story__image {
width: 100%;
margin:
0 !important;
padding:
0 !important;
}
.sph-customer-story__image .elementor-widget-container {
width:
100%;
}
.sph-customer-story__image img {
display:
block;
width:
100%;
height:
auto;
margin:
0;
padding:
0;
border:
0;
border-radius:
0;
filter:
none;
}
/* =========================================================
<= 1199px
========================================================= */
@media (max-width: 1199px) {
.sph-customer-story__layout {
grid-template-columns:
minmax(0, 1fr)
minmax(360px, .85fr);
gap:
56px !important;
}
}
/* =========================================================
<= 991px
========================================================= */
@media (max-width: 991px) {
.sph-customer-story__layout {
grid-template-columns:
1fr;
gap:
48px !important;
}
.sph-customer-story__content {
max-width:
760px;
}
.sph-customer-story__visual {
justify-content:
flex-start !important;
}
.sph-customer-story__image {
max-width:
760px;
}
}
/* =========================================================
<= 767px
========================================================= */
@media (max-width: 767px) {
.sph-customer-story__layout {
gap:
40px !important;
}
.sph-customer-story__copy {
padding-top:
24px !important;
}
.sph-customer-story__button {
margin-top:
30px !important;
}
}
/* =========================================================
COMPONENT: FUNCTIONAL AREAS
Technology Detail Pages
========================================================= */
.sph-functional-areas {
background:
var(--sph-white);
}
/* =========================================================
INNER
========================================================= */
.sph-functional-areas__inner {
width: 100%;
margin:
0 auto !important;
padding:
0 !important;
}
/* =========================================================
MAIN LAYOUT
========================================================= */
.sph-functional-areas__layout {
display: grid !important;
grid-template-columns:
minmax(300px, .72fr)
minmax(0, 1.28fr);
align-items:
start !important;
width: 100%;
margin:
0 !important;
padding:
0 !important;
gap:
96px !important;
}
/* =========================================================
INTRO
========================================================= */
.sph-functional-areas__intro {
display: flex !important;
flex-direction: column !important;
align-items:
flex-start !important;
width: 100%;
margin:
0 !important;
padding:
0 !important;
gap:
0 !important;
}
.sph-functional-areas__headline {
width: 100%;
margin:
0 !important;
padding:
14px 0 0 0 !important;
color:
var(--sph-blue);
}
.sph-functional-areas__headline h2 {
margin:
0 !important;
color:
inherit !important;
}
/* =========================================================
LIST
========================================================= */
.sph-functional-areas__list {
display: flex !important;
flex-direction: column !important;
width: 100%;
margin:
0 !important;
padding:
0 !important;
gap:
0 !important;
border-top:
1px solid rgba(24, 56, 88, .18);
}
/* =========================================================
ROW
========================================================= */
.sph-functional-areas__row {
position:
relative;
display:
block !important;
width: 100%;
min-width: 0;
margin:
0 !important;
padding:
40px 32px 42px 118px !important;
overflow:
hidden;
border-bottom:
1px solid rgba(24, 56, 88, .18);
}
/* =========================================================
LARGE BACKGROUND NUMBER
Native Elementor heading widget
========================================================= */
.sph-functional-areas__number {
position:
absolute !important;
z-index:
0;
top:
28px;
left:
0;
width:
auto !important;
margin:
0 !important;
padding:
0 !important;
pointer-events:
none;
user-select:
none;
}
.sph-functional-areas__number .elementor-heading-title {
margin:
0 !important;
font-family:
"Good-Times", sans-serif !important;
font-size:
clamp(4.75rem, 6vw, 7rem) !important;
font-weight:
600 !important;
line-height:
.85 !important;
letter-spacing:
-.04em;
color:
rgba(0, 207, 180, .12) !important;
}
/* =========================================================
ROW CONTENT
========================================================= */
.sph-functional-areas__row-content {
position:
relative;
z-index:
1;
display: flex !important;
flex-direction: column !important;
align-items:
flex-start !important;
width: 100%;
margin:
0 !important;
padding:
0 !important;
gap:
0 !important;
}
/* =========================================================
LABEL
========================================================= */
.sph-functional-areas__label {
width: 100%;
margin:
0 !important;
padding:
0 !important;
}
/* =========================================================
TITLE
Global sph-heading-3 typography
========================================================= */
.sph-functional-areas__title {
width: 100%;
margin:
0 !important;
padding:
10px 0 0 0 !important;
color:
var(--sph-blue);
}
.sph-functional-areas__title h3 {
margin:
0 !important;
color:
inherit !important;
}
/* =========================================================
COPY
Global sph-copy-lg typography
========================================================= */
.sph-functional-areas__copy {
width: 100%;
max-width: 760px;
margin:
0 !important;
padding:
18px 0 0 0 !important;
color:
var(--sph-blue);
}
.sph-functional-areas__copy p {
margin:
0 !important;
color:
inherit;
}
/* =========================================================
<= 1199px
========================================================= */
@media (max-width: 1199px) {
.sph-functional-areas__layout {
grid-template-columns:
minmax(260px, .7fr)
minmax(0, 1.3fr);
gap:
64px !important;
}
.sph-functional-areas__row {
padding:
36px 24px 38px 100px !important;
}
.sph-functional-areas__number .elementor-heading-title {
font-size:
clamp(4.25rem, 7vw, 6rem) !important;
}
}
/* =========================================================
<= 991px
Intro moves above list
========================================================= */
@media (max-width: 991px) {
.sph-functional-areas__layout {
grid-template-columns:
1fr;
gap:
52px !important;
}
.sph-functional-areas__intro {
max-width:
760px;
}
.sph-functional-areas__row {
padding:
36px 32px 38px 112px !important;
}
}
/* =========================================================
<= 767px
========================================================= */
@media (max-width: 767px) {
.sph-functional-areas__layout {
gap:
42px !important;
}
.sph-functional-areas__row {
padding:
32px 0 34px 82px !important;
}
.sph-functional-areas__number {
top:
26px;
left:
0;
}
.sph-functional-areas__number .elementor-heading-title {
font-size:
4.25rem !important;
}
.sph-functional-areas__title {
padding-top:
8px !important;
}
.sph-functional-areas__copy {
padding-top:
14px !important;
}
}
/* =========================================================
<= 479px
========================================================= */
@media (max-width: 479px) {
.sph-functional-areas__row {
padding:
30px 0 32px 64px !important;
}
.sph-functional-areas__number {
top:
27px;
}
.sph-functional-areas__number .elementor-heading-title {
font-size:
3.25rem !important;
}
}
/* =========================================================
COMPONENT: MICROSOFT ECOSYSTEM
F&SCM
========================================================= */
.sph-ecosystem-bridge__inner {
display: grid !important;
grid-template-columns:
minmax(0, 0.9fr)
minmax(0, 1.1fr);
align-items: center;
gap: var(--sph-layout-gap-desktop);
}
.sph-ecosystem-bridge__content {
max-width: 720px;
}
.sph-ecosystem-bridge__button {
align-self: flex-start;
}
/* ---------------------------------------------------------
ECOSYSTEM TYPOGRAPHY
--------------------------------------------------------- */
.sph-ecosystem-bridge__terms {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 12px !important;
}
.sph-ecosystem-bridge__term {
width: 100%;
}
.sph-ecosystem-bridge__term .elementor-heading-title {
margin: 0 !important;
font-family:
"Good-Times",
sans-serif !important;
font-size:
clamp(1.75rem, 2.5vw, 3.5rem) !important;
font-weight:
500 !important;
line-height:
1.05 !important;
color:
var(--sph-white) !important;
text-align: center;
}
/* ---------------------------------------------------------
RESPONSIVE
--------------------------------------------------------- */
@media (max-width: 991px) {
.sph-ecosystem-bridge__inner {
grid-template-columns: 1fr;
gap: var(--sph-layout-gap-tablet);
}
.sph-ecosystem-bridge__terms {
margin-top: 16px !important;
}
}
/* =========================================================
FSCM 07 – KI & COPILOT
========================================================= */
.sph-ai-focus {
background-color: #f0f0f0;
}
.sph-ai-focus__intro {
max-width: 1050px;
}
/* ---------------------------------------------------------
COPILOT / KI-AGENTEN
--------------------------------------------------------- */
.sph-ai-focus__grid {
display: grid !important;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 0 !important;
width: 100%;
margin-top:
64px !important;
}
.sph-ai-focus__item {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap:
var(--sph-content-gap) !important;
padding:
32px 64px 32px 0 !important;
}
.sph-ai-focus__item + .sph-ai-focus__item {
padding:
32px 0 32px 64px !important;
border-left:
1px solid rgba(24, 56, 88, 0.22);
}
.sph-ai-focus__button {
margin-top:
12px;
}
/* ---------------------------------------------------------
SCHLUSSAUSSAGE
--------------------------------------------------------- */
.sph-ai-focus__statement {
max-width:
1200px;
margin-top:
72px !important;
padding-top:
24px !important;
}
/* ---------------------------------------------------------
TABLET / MOBILE
--------------------------------------------------------- */
@media (max-width: 991px) {
.sph-ai-focus__grid {
grid-template-columns:
1fr;
margin-top:
48px !important;
}
.sph-ai-focus__item {
padding:
32px 0 48px 0 !important;
}
.sph-ai-focus__item + .sph-ai-focus__item {
padding:
48px 0 32px 0 !important;
border-left:
0;
border-top:
1px solid rgba(24, 56, 88, 0.22);
}
.sph-ai-focus__statement {
margin-top:
56px !important;
}
}
/*Homepage*/
.home_new h1 {
font-size: clamp(2.5rem, 2.5vw + 1rem, 4rem);
line-height: 1;
color: #ffffff !important;
font-family: Good-Times;
font-weight: 700;
hyphens: none;
}
.home_new h2 {
font-size: clamp(1rem, 0.755vw + 1.367rem, 1.5rem);
line-height: 1.4;
color: #183858 !important;
font-family: Good-Times;
font-weight: 700;
hyphens: auto;
}
.home_new h3 {
font-size: clamp(1.5rem, 2.5vw + 1rem, 2.8125rem);
line-height: 1.1;
color: #183858 !important;
font-family: Overpass;
font-weight: 900;
text-transform: uppercase;
hyphens: auto;
}
.home_new_turquoise h2 {
font-size: clamp(1rem, 0.755vw + 1.367rem, 1.5rem);
line-height: 1.4;
color: #00cfb4 !important;
font-family: Good-Times;
font-weight: 700;
hyphens: auto;
}
.home_new_banner h3 {
font-size: clamp(2.5rem, 3vw + 1rem, 5rem);
line-height: 1.1;
color: #ffffff !important;
font-family: Good-Times;
font-weight: 700;
hyphens: auto;
}
.topline_new p {
font-size: clamp(0.875rem, 0.9vw + 0.4rem, 1.375rem);
line-height: 1.2;
color: #00cfb4 !important;
font-family: Overpass;
font-weight: 400;
hyphens: auto;
}
.topline_new_white p {
font-size: clamp(0.875rem, 0.9vw + 0.4rem, 1.375rem);
line-height: 1.2;
color: #ffffff !important;
font-family: Overpass;
font-weight: 400;
hyphens: auto;
}
.home_new h4 {
font-size: clamp(1rem, 1vw + 0.3rem, 1.5rem);
line-height: 1.2;
color: #ffffff !important;
font-family: Overpass;
font-weight: 900;
hyphens: auto;
}
/*DFRD*/
.turquoise-black-box h2{
font-size: clamp(1rem, 0.755vw + 1.367rem, 1.5rem);
line-height: 1.4;
color: #d71158 !important;
font-family: Good-Times;
font-weight: 600;
hyphens: auto;
background-color: black;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
width: fit-content;
}
.dfrd-speaker h2 {
font-family: Good-Times;
font-weight: 500;
font-size: clamp(1.125rem, 0vw + 1.125rem, 1.125rem);
line-height: clamp(1.238rem, 0vw + 1.238rem, 1.238rem);
color: #fff;
line-height: 1.1;
margin-left: -36px;
width: fit-content;
padding: .7em;
background: #000;
}
.speaker h2 {
font-family: Good-Times;
font-weight: 500;
font-size: clamp(1.25rem, 0.457vw + 1.132rem, 1.875rem);
line-height: clamp(1.875rem, 0.412vw + 1.768rem, 2.438rem);
color: #ff8b47;
}
.dfrd-speaker h5 {
font-size: clamp(1rem, 0vw + 1rem, 1rem);
line-height: clamp(1.3rem, 0vw + 1.3rem, 1.3rem);
color: #000;
font-family: Montserrat;
font-weight: 200;
margin-left: -36px;
padding: .7em;
background: #000;
max-width: 100%;
margin-top: -10px;
}
.dfrd h2 {
font-size: clamp(2.5rem, 1.372vw + 2.145rem, 4.375rem);
line-height: clamp(2.75rem, 1.51vw + 2.359rem, 4.813rem);
color: #7dcfb6;
font-family: Good-Times;
font-weight: 500;
hyphens: auto;
}
.dfrd p {
font-size: clamp(1.25rem, 0.201vw + 1.198rem, 1.5rem);
line-height: clamp(1.875rem, 0.302vw + 1.797rem, 2.25rem);
color: white;
font-family: Montserrat;
font-weight: 400;
hyphens: auto;
}
.dfrd-black p {
font-size: clamp(1.25rem, 0.201vw + 1.198rem, 1.5rem);
line-height: clamp(1.875rem, 0.302vw + 1.797rem, 2.25rem);
color: black;
font-family: Montserrat;
font-weight: 400;
hyphens: auto;
}
.dfrd h1 {
font-size: clamp(3.125rem, 3.202vw + 2.296rem, 7.5rem);
line-height: clamp(3.125rem, 3.202vw + 2.296rem, 7.5rem);
color: #7dcfb6;
font-family: Good-Times;
font-weight: 500;
text-transform: none;
letter-spacing: -2px;
hyphens: auto;
text-transform: uppercase;
}
.dfrd-homepage h2 {
font-size: clamp(3.125rem, 3.202vw + 2.296rem, 7.5rem);
line-height: clamp(3.125rem, 3.202vw + 2.296rem, 7.5rem);
color: #d71158;
font-family: Good-Times;
font-weight: 500;
text-transform: none;
letter-spacing: -2px;
hyphens: auto;
text-transform: uppercase;
}
.dfrd h5 {
font-size: clamp(1.25rem, 0.201vw + 1.198rem, 1.5rem);
line-height: clamp(1.875rem, 0.302vw + 1.797rem, 2.25rem);
color: #ffffff;
font-family: Montserrat;
font-weight: 700;
hyphens: auto;
}
.hero-image {
max-width: 2600px !important;
background-size: cover;
}
.plus-list {
list-style: none;
padding-left: 0;
margin-left: 0;
}
.plus-list li {
position: relative;
padding-left: 40px;
margin-bottom: 8px;
}
.plus-list li::before {
content: "";
position: absolute;
left: 0px;
top: 4px;
width: 22px;
height: 22px;
background-image: url('https://sph-ag.com/wp-content/uploads/unlimited_elements/readmore.svg');
background-size: contain;
background-repeat: no-repeat;
}
.text-white {
color: #f6f1eb;
}
.plus-list-white {
list-style: none;
padding-left: 0;
margin-left: 0;
}
.plus-list-white li {
position: relative;
padding-left: 40px;
margin-bottom: 8px;
color: #f6f1eb; /* Weiße Schrift */
}
.plus-list-white li::before {
content: "";
position: absolute;
left: 0;
top: 4px;
width: 22px;
height: 22px;
background-image: url('https://sph-ag.com/wp-content/uploads/unlimited_elements/readmore.svg');
filter: invert(1); /* macht das Plus weiß */
background-size: contain;
background-repeat: no-repeat;
}
.elementor-widget-n-accordion .e-n-accordion-item-title-icon {
min-height: 45px;
max-height: 40px;
}
/*Teaserboxen Lösungen Overlay Gradient*/
selector .elementor-cta__bg-overlay {
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.6) 0%,
rgba(0, 0, 0, 0.6) 30%,
rgba(0, 0, 0, 0) 60%
);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
selector .elementor-cta__description {
color: white !important;
font-weight: 400;
}
p {
font-size: clamp(1.25rem, 0.201vw + 1.198rem, 1.5rem);
line-height: clamp(1.875rem, 0.302vw + 1.797rem, 2.25rem);
color: #000;
font-family: Overpass;
font-weight: 200;
hyphens: auto;
}
.beige p {
font-size: clamp(1.25rem, 0.201vw + 1.198rem, 1.5rem);
line-height: clamp(1.875rem, 0.302vw + 1.797rem, 2.25rem);
color: #f6f1eb;
font-family: Overpass;
font-weight: 200;
hyphens: auto;
}
.landing-events p {
font-size: clamp(1.25rem, 0.201vw + 1.198rem, 1.5rem);
line-height: clamp(1.875rem, 0.302vw + 1.797rem, 2.25rem);
color: #ffff;
font-family: Overpass;
font-weight: 700;
hyphens: auto;
}
.boxes div {
font-size: clamp(1.25rem, 0.201vw + 1.198rem, 1.5rem);
line-height: clamp(1.719rem, 0.526vw + 1.583rem, 2.438rem);
color: #000;
font-family: Overpass;
font-weight: 200;
hyphens: auto;
}
#akkordeon p {
font-size: clamp(1.25rem, 0.201vw + 1.198rem, 1.5rem);
line-height: clamp(1.875rem, 0.302vw + 1.797rem, 2.25rem);
color: #000;
font-family: Overpass;
font-weight: 200;
hyphens: auto;
}
.turquoise-black p {
font-size: clamp(0.875rem, 0.15vw + 0.84rem, 1rem);
line-height: 1.3;
color: #00cfb4;
font-family: Good-Times;
font-weight: 600;
hyphens: auto;
background-color: black;
padding-right: 15px;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 15px;
width: fit-content;
}
.turquoise-black-box h2 {
font-size: clamp(1rem, 0.6vw + 0.7rem, 1.4rem);
line-height: 1.4;
color: #00cfb4 !important;
font-family: Good-Times;
font-weight: 600;
hyphens: auto;
padding-right: 10px;
padding-left: 20px;
padding-top: 10px;
padding-bottom: 10px;
width: fit-content;
}
.hero p {
font-size: clamp(1.875rem, 1.259vw + 1.549rem, 3.438rem);
line-height: clamp(2.25rem, 1.511vw + 1.859rem, 4.125rem);
color: #f6f1eb;
font-family: Overpass;
font-weight: 800;
text-transform: uppercase;
hyphens: auto;
}
.orange-black p {
font-size: clamp(1.563rem, 0.755vw + 1.367rem, 2.5rem);
line-height: clamp(2.031rem, 0.982vw + 1.777rem, 3.25rem);
color: #fe6901;
font-family: Good-Times;
font-weight: 600;
hyphens: auto;
background-color: black;
padding-right: 15px;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 15px;
width: fit-content;
}
.white p {
font-size: clamp(1.25rem, 0.201vw + 1.198rem, 1.5rem);
line-height: clamp(1.875rem, 0.302vw + 1.797rem, 2.25rem);
color: #fff;
font-family: Overpass;
font-weight: 400;
hyphens: none;
}
.topline-news p {
font-size: clamp(1rem, 0.201vw + 0.948rem, 1.25rem);
line-height: clamp(1.3rem, 0.262vw + 1.232rem, 1.625rem);
color: #00cfb4;
font-family: Good-Times;
font-weight: 600;
hyphens: none;
background-color: #000;
padding-right: 15px;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 15px;
width: fit-content;
}
.homepage p {
font-size: clamp(1.875rem, 1.259vw + 1.549rem, 3.438rem);
line-height: clamp(2.25rem, 1.511vw + 1.859rem, 4.125rem);
color: white;
font-family: Overpass;
font-weight: 900;
hyphens: none;
}
.turquoise-black-home h1 {
font-size: clamp(1.875rem, 1.259vw + 1.549rem, 3.438rem);
line-height: clamp(2.25rem, 1.511vw + 1.859rem, 4.125rem);
color: #00cfb4;
font-family: Overpass;
font-weight: 700;
hyphens: auto;
}
.turquoise-nohyphens h1 {
font-size: clamp(1.875rem, 1.259vw + 1.549rem, 3.438rem);
line-height: clamp(2.25rem, 1.511vw + 1.859rem, 4.125rem);
color: #00cfb4;
font-family: Overpass;
font-weight: 700;
text-transform: none;
letter-spacing: -2px;
hyphens: none;
word-break: normal;
overflow-wrap: normal;
}
.orange h1 {
font-size: clamp(1.875rem, 1.259vw + 1.549rem, 3.438rem);
line-height: clamp(2.25rem, 1.511vw + 1.859rem, 4.125rem);
color: #fe6901;
font-family: Overpass;
font-weight: 700;
hyphens: auto;
}
.hero-news h1 {
font-size: clamp(1.875rem, 1.259vw + 1.549rem, 3.438rem);
line-height: clamp(2.25rem, 1.511vw + 1.859rem, 4.125rem);
color: #fff;
font-family: Overpass;
font-weight: 700;
text-transform: none;
letter-spacing: -2px;
hyphens: none;
}
.turquoise-black h1 {
font-size: clamp(1.875rem, 1.259vw + 1.549rem, 3.438rem);
line-height: clamp(2.25rem, 1.511vw + 1.859rem, 4.125rem);
color: #00cfb4;
font-family: Overpass;
font-weight: 700;
text-transform: none;
letter-spacing: -2px;
hyphens: auto;
}
.turquoise-black-2 h2 {
font-size: clamp(1.875rem, 1.259vw + 1.549rem, 3.438rem);
line-height: clamp(2.25rem, 1.511vw + 1.859rem, 4.125rem);
color: #00cfb4;
font-family: Overpass;
font-weight: 700;
text-transform: none;
hyphens: auto;
}
.events h1 {
font-size: clamp(1.875rem, 1.259vw + 1.549rem, 3.438rem);
line-height: clamp(2.25rem, 1.511vw + 1.859rem, 4.125rem);
color: #fffff;
font-family: Overpass;
font-weight: 700;
text-transform: none;
letter-spacing: -2px;
hyphens: auto;
}
.landingpage h1 {
font-size: clamp(1.875rem, 1.217rem + 2.105vw, 4.375rem);
line-height: clamp(2.625rem, 1.704rem + 2.947vw, 4.125rem);
color: #00000;
font-family: Overpass;
font-weight: 700;
text-transform: none;
letter-spacing: -2px;
hyphens: auto;
text-transform: uppercase;
}
.landingpage h2 {
font-size: clamp(1.5rem, 1rem + 1.5vw, 3rem);
line-height: clamp(2rem, 1.2rem + 2vw, 3.5rem);
font-family: Overpass;
font-weight: 700;
text-transform: none;
hyphens: auto;
}
.jobtitle h1 {
font-size: clamp(1.875rem, 1.259vw + 1.549rem, 3.438rem);
line-height: clamp(2.25rem, 1.511vw + 1.859rem, 4.125rem);
color: #00cfb4;
font-family: Overpass;
font-weight: 700;
hyphens: none;
text-transform: none;
}
.black-events h1 {
font-size: clamp(3.125rem, 3.202vw + 2.296rem, 7.5rem);
line-height: clamp(3.125rem, 3.202vw + 2.296rem, 7.5rem);
color: #00000;
font-family: Overpass;
font-weight: 700;
text-transform: none;
letter-spacing: -2px;
hyphens: auto;
text-transform: uppercase;
}
.orange-black h1 {
font-size: clamp(1.875rem, 1.259vw + 1.549rem, 3.438rem);
line-height: clamp(2.25rem, 1.511vw + 1.859rem, 4.125rem);
color: #fe6901;
font-family: Overpass;
font-weight: 700;
hyphens: none;
background-color: black;
padding-right: 30px;
padding-left: 15px;
padding-top: 18px;
padding-bottom: 6px;
width: fit-content;
text-transform: uppercase;
}
.landingpage p {
font-size: clamp(1.875rem, 1.217rem + 2.105vw, 4.375rem);
line-height: clamp(2.625rem, 1.704rem + 2.947vw, 3.125rem);
color: #ffffff;
font-family: Overpass;
font-weight: 400;
text-transform: none;
letter-spacing: -2px;
hyphens: auto;
text-transform: uppercase;
}
.landing-events h2 {
font-size: clamp(1.875rem, 2.287vw + 1.283rem, 5rem);
line-height: clamp(1.875rem, 2.287vw + 1.283rem, 5rem);
color: #00cfb4;
font-family: Good-Times;
font-weight: 500;
hyphens: none;
}
.orange h2 {
font-size: clamp(1.563rem, 0.755vw + 1.367rem, 2.5rem);
line-height: clamp(2.031rem, 0.982vw + 1.777rem, 3.25rem);
color: #fe6901;
font-family: Overpass;
font-weight: 700;
hyphens: none;
}
.turquoise-black h2 {
font-size: clamp(1.563rem, 0.755vw + 1.367rem, 2.5rem);
line-height: clamp(2.031rem, 0.982vw + 1.777rem, 3.25rem);
color: #00cfb4;
font-family: Good-Times;
font-weight: 600;
hyphens: auto;
background-color: black;
padding-right: 15px;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 15px;
width: fit-content;
}
.turquoise-black h1 {
font-size: clamp(1.563rem, 0.755vw + 1.367rem, 2.5rem);
line-height: clamp(2.031rem, 0.982vw + 1.777rem, 3.25rem);
color: #00cfb4;
font-family: Good-Times;
font-weight: 600;
hyphens: auto;
background-color: black;
padding-right: 15px;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 15px;
letter-spacing: 0.5px;
width: fit-content;
}
.turquoise-black-invert h1 {
font-size: clamp(1.563rem, 0.755vw + 1.367rem, 2.5rem);
line-height: clamp(2.031rem, 0.982vw + 1.777rem, 3.25rem);
color: black;
font-family: Good-Times;
font-weight: 600;
hyphens: auto;
background-color: #00cfb4;
padding-right: 15px;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 15px;
letter-spacing: 0.5px;
width: fit-content;
}
.turquoise-black-invert h3 {
font-size: clamp(1.6rem, 2.5vw + 1rem, 4.5rem);
line-height: clamp(1.9rem, 2.2vw + 1.5rem, 5.2rem);
color: black;
font-family: Good-Times;
font-weight: 800;
hyphens: auto;
background-color:#00cfb4;
padding-right: 15px;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 15px;
letter-spacing: 0.5px;
width: fit-content;
}
.turquoise h2 {
font-size: clamp(1.875rem, 1.259vw + 1.549rem, 3.438rem);
line-height: clamp(2.25rem, 1.511vw + 1.859rem, 4.125rem);
color: #183858 !important;
font-family: Overpass;
font-weight: 900;
text-transform: none;
letter-spacing: -2px;
hyphens: auto;
}
.turquoise h1 {
font-size: clamp(1.875rem, 1.259vw + 1.549rem, 3.438rem);
line-height: clamp(2.25rem, 1.511vw + 1.859rem, 4.125rem);
color: #183858 !important;
font-family: Overpass;
font-weight: 900;
text-transform: none;
letter-spacing: -2px;
hyphens: auto;
}
.homepage h1 {
font-size: clamp(3.5em, 6vw + 1em, 10em);
line-height: 1 !important;
color: #00cfb4;
font-family: Overpass;
font-weight: 900;
text-transform: uppercase;
hyphens: auto;
}
.homepage h2 {
font-size: clamp(3.5em, 6vw + 1em, 10em);
line-height: 1 !important;
color: #00cfb4;
font-family: Overpass;
font-weight: 900;
text-transform: uppercase;
hyphens: auto;
}
.divider h2 {
font-size: clamp(1.875rem, 1.259vw + 1.549rem, 3.438rem);
line-height: clamp(2.25rem, 1.511vw + 1.859rem, 4.125rem);
color: #00cfb4;
font-family: Overpass;
font-weight: 900;
text-transform: none;
letter-spacing: -2px;
hyphens: auto;
}
.news h2 {
font-size: clamp(1.563rem, 0.229vw + 1.503rem, 1.875rem);
line-height: clamp(1.719rem, 0.526vw + 1.583rem, 2.438rem);
color: #ff;
font-family: Overpass;
font-weight: 700;
text-transform: none;
letter-spacing: -2px;
hyphens: auto;
}
.seperator h2 {
font-size: clamp(1.875rem, 1.259vw + 1.549rem, 3.438rem);
line-height: clamp(2.25rem, 1.511vw + 1.859rem, 4.125rem);
font-family: Overpass;
font-weight: 700;
text-transform: uppercase;
letter-spacing: -2px;
hyphens: auto;
}
.orange-black h2 {
font-size: clamp(1.563rem, 0.755vw + 1.367rem, 2.5rem);
line-height: clamp(2.031rem, 0.982vw + 1.777rem, 3.25rem);
color: #fe6901;
font-family: Overpass;
font-weight: 700;
hyphens: none;
background-color: black;
padding-right: 30px;
padding-left: 15px;
padding-top: 18px;
padding-bottom: 6px;
width: fit-content;
}
.events h2 {
font-size: clamp(1.875rem, 1.259vw + 1.549rem, 3.438rem);
line-height: clamp(2.25rem, 1.511vw + 1.859rem, 4.125rem);
color: #00cfb4;
font-family: Overpass;
font-weight: 700;
text-transform: none;
letter-spacing: -2px;
hyphens: auto;
}
.events-overview h2 {
font-size: clamp(2.5rem, 1.83vw + 2.027rem, 5rem);
line-height: clamp(3rem, 1.464vw + 2.621rem, 5rem);
color: #000;
font-family: Overpass;
font-weight: 700;
text-transform: none;
letter-spacing: -2px;
hyphens: auto;
}
.values h3 {
font-size: clamp(2.188rem, 1.661rem + 1.684vw, 3.5rem);
line-height: clamp(2rem, 1.474rem + 1.684vw, 3rem);
color: #000;
font-family: Overpass;
font-weight: 700;
hyphens: none;
}
.seperator h3 {
font-size: clamp(1.25rem, 0.201vw + 1.198rem, 1.5rem);
line-height: clamp(1.875rem, 0.302vw + 1.797rem, 2.25rem);
hyphens: auto;
color: #000;
font-family: Overpass;
font-weight: 900;
}
.black h3 {
font-size: clamp(1.563rem, 0.755vw + 1.367rem, 2.5rem);
line-height: clamp(2.031rem, 0.982vw + 1.777rem, 3.25rem);
color: #fffff;
font-family: Good-Times;
font-weight: 600;
hyphens: none;
}
.black-career h3 {
font-size: clamp(1.563rem, 0.755vw + 1.367rem, 2.5rem);
line-height: clamp(2.031rem, 0.982vw + 1.777rem, 3.25rem);
color: #fffff;
font-family: Good-Times;
font-weight: 600;
hyphens: auto;
}
.black-normal h3 {
font-size: font-size: clamp(1.25rem, 0.915vw + 1.013rem, 2.5rem);
line-height: clamp(1.875rem, 1.006vw + 1.615rem, 3.25rem);
color: #fffff;
font-family: Overpass;
font-weight: 900;
hyphens: none;
}
.orange h3 {
font-size: clamp(1.563rem, 0.755vw + 1.367rem, 2.5rem);
line-height: clamp(2.031rem, 0.982vw + 1.777rem, 3.25rem);
color: #fe6901;
font-family: Good-Times;
font-weight: 400;
hyphens: none;
}
.orange-black h3 {
font-size: clamp(1.875rem, 1.696rem + 0.893vw, 3.125rem);
line-height: clamp(2rem, 1.474rem + 1.684vw, 4rem);
color: #FE6901;
font-family: Overpass;
font-weight: 700;
hyphens: none;
background-color: black;
padding-right:2vw;
padding-top: 3px;
width: fit-content;
}
.turquoise-akkordeon h3 {
font-size: clamp(1.25rem, 0.229vw + 1.191rem, 1.563rem) !important;
line-height: clamp(1.25rem, 0.229vw + 1.191rem, 1.563rem);
color: #00cfb4;
font-family: Good-Times;
font-weight: 600;
text-transform: none;
hyphens: auto;
}
.turquoise-black h3 {
font-size: clamp(1.563rem, 0.755vw + 1.367rem, 2.5rem);
line-height: clamp(2.031rem, 0.982vw + 1.777rem, 3.25rem);
color: #00cfb4;
font-family: Good-Times;
font-weight: 600;
hyphens: auto;
background-color: black;
padding-right: 15px;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 15px;
width: fit-content;
}
.turquoise h3 {
font-size: clamp(1.875rem, 1.259vw + 1.549rem, 3.438rem);
line-height: clamp(2.25rem, 1.511vw + 1.859rem, 4.125rem);
color: #00cfb4;
font-family: Overpass;
font-weight: 700;
text-transform: none;
letter-spacing: -2px;
hyphens: auto;
}
.boxes h3 {
font-size: clamp(1.438rem, 1.322rem + 0.368vw, 1.875rem);
line-height: clamp(2.3rem, 1.76rem + 0.368vw, 2.8rem);
color: #00cfb4;
font-family: Overpass;
font-weight: 900;
text-transform: uppercase;
hyphens: auto;
letter-spacing: 0px
}
.orange-form h3 {
font-size: clamp(1.875rem, 1.259vw + 1.549rem, 3.438rem);
line-height: clamp(2.25rem, 1.511vw + 1.859rem, 4.125rem);
color: #FE6901;
font-family: Overpass;
font-weight: 700;
text-transform: none;
letter-spacing: -2px;
hyphens: auto;
}
.landing-events h4 {
font-size: clamp(1.25rem, 0.201vw + 1.198rem, 1.5rem);
line-height: clamp(1.875rem, 0.302vw + 1.797rem, 2.25rem);
color: #00000;
font-family: Good-Times;
font-weight: 600;
hyphens: auto;
letter-spacing: 0px
}
.headline-pages p {
font-size: clamp(1.188rem, 1.661rem + 1.684vw, 3.188rem);
line-height: clamp(2rem, 1.474rem + 1.684vw, 4rem);
letter-spacing: 2px;
color: #fff;
font-family: Good-Times;
font-weight: 500;
text-align: left;
hyphens: auto;
}
.benefits h6 {
font-size: clamp(1.25rem, 0.201vw + 1.198rem, 1.5rem);
line-height: clamp(1.875rem, 0.302vw + 1.797rem, 2.25rem);
color: #fff;
font-family: Overpass;
font-weight: 400;
text-transform: none;
hyphens: none;
}
.highlight {
font-size: clamp(1.563rem, 0.755vw + 1.367rem, 2.5rem);
line-height: clamp(2.031rem, 0.982vw + 1.777rem, 3.25rem);
color: #00cfb4;
font-family: Good-Times;
font-weight: 600;
hyphens: auto;
background-color: black;
padding-right: 15px;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 15px;
width: fit-content;
}
/*HOMEPAGE*/
.topline-homepage p {
font-size: 30px;
}
.headline-homepage p {
color: #FE6901;
font-family: Overpass;
font-weight: 800;
}
.headline-tiles-homepage p {
font-size: clamp(1.438rem, 1.322rem + 0.368vw, 1.875rem);
line-height: clamp(2.3rem, 1.76rem + 0.368vw, 2.8rem);
font-family: Overpass;
font-weight: 800;
}
.l-no-horizontal-scroll {overflow-x: hidden}
/*MENÜ*/
li.menu-item ul.sub-menu {
padding-left: 35px;
}
a.elementor-sub-item {
line-height: 1.5em;
font-size: 1em;
}