/* ======================================================================
   CUSTOM OVERRIDES (FINAL)
   - Simplified header as overlay (logo + CTA)
   - Shared edge padding for Header & Hero text
   - Hero Split (desktop) + stacked (mobile)
   - Smartphone-only bottom nav
   ====================================================================== */

/* =========================================================
   LAYOUT
   ========================================================= */

.hero-lead {
    font-size: 1.5rem;
}

@media (max-width: 575.98px) {
    .hero-lead {
        font-size: 1.15rem;
    }
}

.lead {
    font-size: 1.4rem;
    color:#000;
}

section {
    padding: 100px 0
}

h1, h2, h3, h4, h5, h6 {
    color: #000;
}

.heartbeat {
    transform-origin: center;
    -webkit-animation: heartbeat 1.4s ease-in-out infinite;
    animation: heartbeat 1.4s ease-in-out infinite;
    will-change: transform;
}

.svg-info-color {
    color: var(--theme-color, #ff495a) !important;
}

.svg-info-color path {
    fill: currentColor;
}

@-webkit-keyframes heartbeat {
    0% { transform: scale(1); }
    10% { transform: scale(1.12); }
    20% { transform: scale(1); }
    30% { transform: scale(1.08); }
    40% { transform: scale(1); }
    100% { transform: scale(1); }
}

@keyframes heartbeat {
    0% { transform: scale(1); }
    10% { transform: scale(1.12); }
    20% { transform: scale(1); }
    30% { transform: scale(1.08); }
    40% { transform: scale(1); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .heartbeat {
        -webkit-animation: none;
        animation: none;
    }
}

/* Smartphone Feintuning */
@media (max-width: 575.98px) {
    .container {
        padding-left: 25px;
        padding-right: 25px;
    }
}

/* =========================================================
   EDGE PADDING (shared)
   -> exakt gleicher Mindest-/Fließabstand für Header & Hero
   ========================================================= */

:root {
    --edge-pad: clamp(1rem, 6vw, 8rem);
}


/* Smooth scroll für Anchor-Navigation */
html {
    scroll-behavior: smooth;
}


/* =========================================================
   SIMPLIFIED HEADER (OVERLAY)
   -> liegt über dem Hero
   -> sorgt dafür, dass das Bild rechts ganz oben startet
   ========================================================= */

.simple-header {
    position: absolute;     /* wichtig: aus dem Flow raus */
    top: 0;
    left: 0;
    right: 0;
    width: 100%;

    background: transparent;
    box-shadow: none;

    z-index: 1000;          /* über Hero & Bild */
}

.simple-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-inline: var(--edge-pad);

    min-height: 110px;       /* Desktop/Tablet */
}

.simple-header__brand img {
    width: auto;
    height: auto;
    max-width: 220px;
    max-height: 48px;
    object-fit: contain;
    display: block;
}

.simple-header__cta {
    white-space: nowrap;
}

#page.theme-primary .simple-header__cta:hover,
#page.theme-primary .simple-header__cta:focus {
    background-color: #fff !important;
    color: var(--theme-color, #ff495a) !important;
    border-color: #fff !important;
}

/* Smartphone Feintuning */
@media (max-width: 575.98px) {
    .simple-header__inner {
        min-height: 72px;
    }

    .simple-header__brand img {
        max-width: 170px;
        max-height: 42px;
    }
}


/* =========================================================
   HERO
   ========================================================= */

#hero-5.hero-5-split {
    position: relative;
    overflow: hidden;
    padding: 150px 0;
    background-color: #ffffff;
}

/* Campaign styling (scoped to demo hero variant) */
#hero-5.hero-5--campaign {
    background-color: var(--theme-color, #e31c15);
    color: #fff;
}

@supports (color: color-mix(in srgb, #000 10%, #fff)) {
    #hero-5.hero-5--campaign {
        background-image: radial-gradient(
            1400px 680px at 0% -10%,
            color-mix(in srgb, var(--theme-color, #e31c15) 65%, #fff) 0%,
            var(--theme-color, #e31c15) 38%,
            color-mix(in srgb, var(--theme-color, #e31c15) 70%, #000) 100%
        );
    }
}

#hero-5.hero-5--campaign h1,
#hero-5.hero-5--campaign h2,
#hero-5.hero-5--campaign h3,
#hero-5.hero-5--campaign h4,
#hero-5.hero-5--campaign h5,
#hero-5.hero-5--campaign h6 {
    color: #fff;
}

#hero-5.hero-5--campaign p {
    color: #fff;
}

#hero-5.hero-5--campaign .hero-5__eyebrow {
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
}

#hero-5.hero-5--campaign .hero-5__title {
    margin-bottom: 16px;
    font-size: 2.45rem;
    line-height: 1.15;
}

#hero-5.hero-5--campaign .hero-5__cta {
    color: #000;
    background-color: #fff;
    border: 2px solid #fff;
    transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
}

#hero-5.hero-5--campaign .hero-5__cta:hover,
#hero-5.hero-5--campaign .hero-5__cta:focus-visible {
    color: #fff;
    background-color: transparent;
    border-color: #fff;
}

/* List reset with CSS-driven icons */
.simple-list {
    --list-icon-size: 22px;
    --list-icon-color: #000;
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

.rose-color {
    font-weight: 500;
}

.content-section h3 .rose-color {
    font-weight: inherit;
}

#job-info h3.h3-md,
#profile h3.h3-md,
#good-to-know h3.h3-md {
    font-weight: 500 !important;
}

.simple-list .list-item {
    list-style: none;
    position: relative;
    padding-left: calc(var(--list-icon-size) + 12px);
}

.simple-list .list-item + .list-item {
    margin-top: 20px;
}

.simple-list .list-item::marker {
    content: none;
}

.simple-list .list-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.3em;
    width: var(--list-icon-size);
    height: var(--list-icon-size);
    background-color: var(--list-icon-color);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0'/><path d='M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0z'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0'/><path d='M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0z'/></svg>") no-repeat center / contain;
}

.simple-list .lead {
    margin-bottom: 0;
    color: #000;
}

#tasks h3.h3-md,
#profile h3.h3-md,
#good-to-know h3.h3-md {
    color: #000;
    font-weight: 500 !important;
}

/* Features: consistent corners and equal-height cards */
#features-3 .fbox-3-wrapper .row {
    align-items: stretch;
}

#features-3 .fbox-3-wrapper .row > [class*="col-"] {
    display: flex;
}

#features-3 .fbox-3 {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
}

#features-3 .fbox-3.bg_white {
    border: 1px solid #e4e5e9;
    box-shadow: none;
    transition: none;
}

#features-3 .fbox-3.bg_white:hover {
    border-color: #e4e5e9;
    box-shadow: none;
}

#features-3 .fbox-3-ico svg {
    width: 65px;
    height: 65px;
}

#features-3 .fbox-3-ico {
    flex: 0 0 auto;
}

#features-3 .fbox-3-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#features-3 .fbox-3-content .h5-sm {
    margin-top: 0;
    margin-bottom: 0;
}

#features-3 .fbox-3-content .p-md {
    margin-bottom: 0;
    color: #000;
}

@media (min-width: 992px) {
    #location .row {
        align-items: stretch;
    }

    #location .row > [class*="col-"] {
        display: flex;
    }

    #location .fbox-3 {
        width: 100%;
        height: 100%;
    }
}

/* Job template: disable hover effect for the 3 location cards */
#location .fbox-3.bg_white {
    border: 1px solid #e4e5e9;
    box-shadow: none;
    transition: none;
}

#location .fbox-3.bg_white:hover,
#location .fbox-3.bg_white:focus,
#location .fbox-3.bg_white:active {
    border-color: #e4e5e9;
    box-shadow: none;
    transform: none;
}

@media (max-width: 575.98px) {
    #features-3 .fbox-3,
    #features-3 .fbox-3-content {
        text-align: left;
    }
}

/* Theme Overrides (Demo) */
#page.theme-primary {
    --theme-color-contrast: #fff;
    --theme-color-dark: var(--theme-color, #ff495a);
    --theme-color-soft: var(--theme-color, #ff495a);
}

@supports (color: color-mix(in srgb, #000 10%, #fff)) {
    #page.theme-primary {
        --theme-color-dark: color-mix(in srgb, var(--theme-color) 85%, #000);
        --theme-color-soft: color-mix(in srgb, var(--theme-color) 15%, #fff);
    }
}

#page.theme-primary .btn-rose,
#page.theme-primary .scroll .btn-rose,
#page.theme-primary .white-color .btn-rose,
#page.theme-primary .rose-hover:hover,
#page.theme-primary .scroll .rose-hover:hover,
#page.theme-primary .white-color .rose-hover:hover {
    color: var(--theme-color-contrast, #fff) !important;
    background-color: var(--theme-color, #ff495a);
    border-color: var(--theme-color, #ff495a) !important;
}

#page.theme-primary .btn-tra-rose,
#page.theme-primary .scroll .btn-tra-rose,
#page.theme-primary .white-color .btn-tra-rose,
#page.theme-primary .tra-rose-hover:hover,
#page.theme-primary .scroll .tra-rose-hover:hover,
#page.theme-primary .white-color .tra-rose-hover:hover {
    color: var(--theme-color, #ff495a) !important;
    background-color: transparent;
    border-color: var(--theme-color, #ff495a) !important;
}

#page.theme-primary .rose-color,
#page.theme-primary .rose-color h2,
#page.theme-primary .rose-color h3,
#page.theme-primary .rose-color h4,
#page.theme-primary .rose-color h5,
#page.theme-primary .rose-color h6,
#page.theme-primary .rose-color p,
#page.theme-primary .rose-color a,
#page.theme-primary .rose-color li,
#page.theme-primary .rose-color i,
#page.theme-primary .rose-color span,
#page.theme-primary .white-color .rose-color {
    color: var(--theme-color, #ff495a);
}

#page.theme-primary .bg_rose {
    background-color: var(--theme-color, #ff495a);
}

#page.theme-primary .bg_sblue_img {
    background-image: none;
    background-color: var(--theme-color, #ff495a);
}

.btn-white {
    color: #000;
    background-color: #fff;
    border: 2px solid #fff;
    transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
}

.btn-white:hover,
.btn-white:focus-visible {
    color: #fff;
    background-color: transparent;
    border-color: #fff;
}

/* Footer alignment to current template */
.footer--campaign {
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: #fff;
    border-top: 1px solid #f1edf3;
}

.footer--campaign .footer__headline {
    margin-bottom: 0;
    color: #000;
}

.footer--campaign .footer__label {
    margin-bottom: 8px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #463853;
}

.footer--campaign .footer__text {
    margin-bottom: 0;
    color: #463853;
}

.footer--campaign .footer__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 12px;
}

.footer--campaign .footer__link {
    color: #463853;
    text-decoration: none;
}

.footer--campaign .footer__link:hover,
.footer--campaign .footer__link:focus-visible {
    color: #000;
    text-decoration: none;
}

.footer--campaign .footer__button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.footer--campaign .footer__sep {
    color: #c9c0cf;
}

.footer--campaign .footer__divider {
    border-color: #ece8ef;
    margin: 0 0 20px;
}

.footer--campaign .footer__meta {
    font-size: 0.95rem;
    margin-bottom: 0;
    color: #8e8296;
}

@media (max-width: 575.98px) {
    .footer--campaign {
        padding-top: 60px;
        padding-bottom: 30px;
    }

    .footer--campaign .footer__sep {
        display: none;
    }

    .footer--campaign .footer__meta {
        font-size: 0.66rem;
        line-height: 1.35;
    }
}

@media (max-width: 575.98px) {
    #s2 .split-scroller__content .btn {
        width: 100%;
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    #s2 .split-scroller__title,
    #download-5 .download-5-txt .h2-md {
        font-size: 2.15rem;
    }
}

#benefits .split-scroller--compact {
	min-height: auto;
	height: auto;
}

#benefits .split-scroller--compact .split-scroller__inner,
#benefits .split-scroller--compact .split-scroller__content,
#benefits .split-scroller--compact .split-scroller__media {
	height: auto;
}

#benefits .split-scroller--compact .tile-scroller {
	overflow: visible;
}

#benefits .split-scroller--compact .tile-scroller__wrapper {
	min-height: auto;
	height: auto;
}

#benefits .tile-scroller__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(var(--benefits-grid, 2), 0.5fr);
}

@media screen and (max-width: 991.98px) {
    #benefits .split-scroller__media {
        height: max(408px, 50vh);
    }

    #benefits .tile-scroller__grid {
        grid-template-rows: repeat(2, minmax(188px, auto));
        grid-template-columns: repeat(var(--benefits-grid, 3), max(104px, 14vh));
        align-items: stretch;
    }

    #benefits .tile-scroller__item--text {
        height: 100%;
        min-height: 188px;
        justify-content: center;
        padding: 16px 14px;
        gap: 8px;
    }

    #benefits .tile-scroller__item--text h5 {
        font-size: 1.05rem;
        line-height: 1.25;
        font-weight: 600;
    }

    #benefits .tile-scroller__item--text p {
        font-size: 0.96rem;
        line-height: 1.5;
    }

    #benefits .tile-scroller__item--text h5,
    #benefits .tile-scroller__item--text p,
    #benefits .split-scroller__title {
        overflow-wrap: normal;
        word-break: normal;
        hyphens: auto;
        text-wrap: pretty;
    }
}

@media screen and (max-width: 575.98px) {
    #benefits .split-scroller__media {
        height: max(432px, 52vh);
    }

    #benefits .tile-scroller__grid {
        grid-template-rows: repeat(2, minmax(196px, auto));
        grid-template-columns: repeat(var(--benefits-grid, 3), max(128px, 16vh));
    }

    #benefits .tile-scroller__item--text {
        min-height: 196px;
        padding: 18px 16px;
        justify-content: center;
    }

    #benefits .tile-scroller__item--text h5 {
        font-size: 1rem;
        line-height: 1.25;
        font-weight: 600;
    }

    #benefits .tile-scroller__item--text p {
        font-size: 0.92rem;
        line-height: 1.45;
    }
}

/* Rechte Bildhälfte (Desktop) */
.hero-5-image-side {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;

    width: 50vw;
    overflow: hidden;

    z-index: 1;
}

.hero-5-image-side__inner {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    will-change: transform;
}

/* Inhalt über dem Bild */
#hero-5 .container,
#hero-5 .container-fluid {
    position: relative;
    z-index: 2;
}

/* Hero-Text-Section (shared edge padding) */
#hero-text-section {
    position: relative;
    z-index: 2;
    padding-inline: var(--edge-pad);
}

/* Desktop Mindesthöhe */
#hero-5 .row {
    min-height: 460px;
}


/* =========================================================
   HERO RESPONSIVE
   ========================================================= */

/* Tablet & kleiner (Stack) */
@media (max-width: 991.98px) {

    #hero-5.hero-5-split {
        padding: 0 0 40px;
    }

    .hero-5-image-side {
        position: relative;
        width: 100%;
        height: 260px;
    }

    #hero-text-section {
        padding-inline: clamp(1rem, 6vw, 2rem);
        padding-top: 1.5rem;
    }

    #hero-5 .row {
        min-height: auto;
    }
}

/* Smartphones */
@media (max-width: 575.98px) {

    .hero-5-image-side {
        height: 220px;
    }

    #hero-5.hero-5--campaign .hero-5__title,
    #hero-5.hero-5--campaign .hero-5__title * {
        font-size: clamp(2rem, 6.3vw, 2.18rem);
        line-height: 1.12;
        overflow-wrap: normal;
        word-break: keep-all;
        hyphens: none;
        text-wrap: balance;
    }

    #hero-5.hero-5--campaign .hero-5__title.hero-5__title--compact,
    #hero-5.hero-5--campaign .hero-5__title.hero-5__title--compact * {
        font-size: 2rem !important;
        line-height: 1.1;
    }

    #hero-5.hero-5--campaign .hero-5__title.hero-5__title--wrap,
    #hero-5.hero-5--campaign .hero-5__title.hero-5__title--wrap * {
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
        text-wrap: balance;
    }

    #hero-5.hero-5--campaign h2,
    #hero-5.hero-5--campaign h3,
    #hero-5.hero-5--campaign p,
    #benefits .split-scroller__title,
    #benefits .tile-scroller__item--text h5,
    #benefits .tile-scroller__item--text p {
        overflow-wrap: normal;
        word-break: normal;
        hyphens: auto;
        text-wrap: pretty;
    }

    #hero-text-section {
        padding-inline: clamp(1rem, 6vw, 1.5rem);
        padding-top: 1.75rem;
    }

    #hero-5.hero-5--campaign {
        padding: 0;
        background-color: transparent;
        min-height: clamp(300px, 55vh, 420px);
    }

    #hero-5.hero-5--campaign .hero-5-image-side {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    #hero-5.hero-5--campaign .hero-5-image-side::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
    }

    #hero-5.hero-5--campaign .container-fluid {
        position: relative;
        inset: auto;
        display: block;
    }

    #hero-5.hero-5--campaign .row {
        width: 100%;
        margin: 0;
        align-items: flex-start;
    }

    #hero-5.hero-5--campaign #hero-text-section {
        padding: 1.75rem clamp(1rem, 6vw, 1.5rem) 2.5rem;
    }

    #hero-5.hero-5--campaign .hero-5__title {
        font-size: clamp(2.35rem, 7vw, 2.6rem);
        line-height: 1.2;
    }

    #hero-5.hero-5--campaign .hero-5__eyebrow {
        font-size: 0.95rem;
    }
}

@media (min-width: 768px) {
    #hero-5.hero-5--campaign .hero-5__title {
        font-size: 2.9rem;
    }
}

@media (min-width: 992px) {
    #hero-5.hero-5--campaign .hero-5__title {
        font-size: 3.4rem;
    }
}

@media (min-width: 1200px) {
    #hero-5.hero-5--campaign .hero-5__title {
        font-size: 3.2rem;
    }
}


/* =========================================================
   MOBILE BOTTOM NAV (SMARTPHONE-ONLY)
   HTML:
   <nav class="mobile-bottom-nav d-flex d-sm-none" ...>
   ========================================================= */

/* Platz schaffen, damit nichts überdeckt wird */
@media (max-width: 575.98px) {
    body {
        padding-bottom: 90px; /* 80px Bar + Puffer */
    }

    #scrollUp {
        bottom: 100px;
    }
}

/* Bar selbst */
.mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    height: 80px;
    background: var(--mobile-nav-bg, #ffffff);

    /* NUR oben abgerundet */
    border-radius: 20px 20px 0 0;

    box-shadow: 0 -6px 24px rgba(0,0,0,0.10);
    z-index: 9999;

    display: flex;
    align-items: center;

    /* innen ok, außen dockt es an */
    padding: 0 12px;
    gap: 10px;
}


/* Icons teilen sich den Restplatz */
.mobile-bottom-nav__icons {
    flex: 1;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

/* Icon-Buttons */
.mobile-bottom-nav__icon {
    width: 64px;
    height: 56px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;

    color: var(--mobile-nav-fg, #333);
    text-decoration: none;

    border-radius: 10px; /* nur fürs Icon selbst */
}

.mobile-bottom-nav__icon svg {
    width: 22px;
    height: 22px;
}

.mobile-bottom-nav__label {
    font-size: 10px;
    line-height: 1;
    color: var(--mobile-nav-fg-muted, #666);
    white-space: nowrap;
}

.mobile-bottom-nav__icon:active,
.mobile-bottom-nav__icon:focus {
    background: var(--mobile-nav-active-bg, #f3f3f3);
    outline: none;
}

/* Bewerben-Button: Höhe 40px + Radius raus */
.mobile-bottom-nav__btn {
    height: 40px;
    display: inline-flex;
    align-items: center;

    padding: 0 20px;
    white-space: nowrap;
}

/* Safety: ab Tablet aus (falls HTML-Klassen mal geändert werden) */
@media (min-width: 576px) {
    .mobile-bottom-nav {
        display: none !important;
    }

    body {
        padding-bottom: 0 !important;
    }
}

/* =========================================================
   BREAKPOINT-FIX: Wenn Hero stacked wird (<= 991.98px),
   soll die Navigation ein "echter Block" sein
   - weißer Hintergrund
   - Content startet darunter
   ========================================================= */

@media (max-width: 991.98px) {
    .simple-header {
        position: relative;         /* statt overlay */
        background: var(--mobile-nav-bg, #ffffff);        /* echter Header-Block */
        box-shadow: 0 2px 10px rgba(0,0,0,0.06);
        z-index: 1000;
    }

    /* Optional: etwas kompaktere Höhe auf Tablet */
    .simple-header__inner {
        min-height: 76px;
    }
}

/*------------------------------------------*/
/*   FEATURES
/*------------------------------------------*/

.fbox-7-wrapper {
    padding: 0 5%;
}

@media (min-width: 321px) and (max-width: 413.95px) {
    #features-7 h5.h5-xs {
        font-size: 1rem;
    }
}

/* =========================================================
   MODAL: BEWERBUNG (DEMO)
   ========================================================= */

.bewerbung-modal .modal-content {
    border-radius: 24px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.2);
    background: #ffffff;
    overflow: hidden;
}

.bewerbung-modal .modal-header {
    background: linear-gradient(
        135deg,
        rgba(255, 73, 90, 0.12) 0%,
        rgba(255, 73, 90, 0.04) 55%,
        rgba(255, 255, 255, 0) 100%
    );
    padding: 1.75rem 2.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #111827;
}

.bewerbung-modal .modal-title {
    font-weight: 600;
    font-size: 1.65rem;
    letter-spacing: 0.01em;
    color: inherit;
    margin-bottom: 0;
}

.bewerbung-modal .modal-body {
    padding: 2.25rem;
}

.bewerbung-modal .close {
    font-size: 1.6rem;
    line-height: 1;
    opacity: 0.6;
    text-shadow: none;
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}

.bewerbung-modal .close svg {
    width: 22px;
    height: 22px;
}

.bewerbung-modal .close:hover {
    opacity: 0.9;
}

.bewerbung-modal .form-label,
.bewerbung-modal label {
    font-weight: 500;
    font-size: 1.15rem;
    color: #111827;
}

.bewerbung-modal .form-control,
.bewerbung-modal .input-group-text {
    border-radius: 18px;
    border: 1px solid #cbd5f0;
    background-color: #ffffff;
}

.bewerbung-modal .form-float {
    --pad: 0.75rem;
    --field-bg: #ffffff;
    position: relative;
}

.bewerbung-modal .form-float .form-control {
    padding: 0.65rem 1.25rem;
    background-color: var(--field-bg);
}

.bewerbung-modal .form-float label {
    position: absolute;
    left: var(--pad);
    top: -0.95rem;
    pointer-events: none;
    margin: 0;
    padding: 0 0.75rem;
    background: transparent;
    color: #6b7280;
    transform-origin: left top;
    transform: scale(0.85);
    transition: transform 0.15s ease, color 0.15s ease;
    z-index: 2;
}

.bewerbung-modal .form-float label::before {
    content: '';
    position: absolute;
    left: -0.5rem;
    right: -0.5rem;
    top: 50%;
    height: 1.2em;
    transform: translateY(-50%);
    background: var(--field-bg);
    z-index: -1;
}

.bewerbung-modal .form-float input::placeholder,
.bewerbung-modal .form-float textarea::placeholder {
    opacity: 0;
}

.bewerbung-modal .form-float input:focus + label,
.bewerbung-modal .form-float input:not(:placeholder-shown) + label,
.bewerbung-modal .form-float textarea:focus + label,
.bewerbung-modal .form-float textarea:not(:placeholder-shown) + label {
    transform: scale(0.85);
    color: var(--theme-color, #ff495a);
}

.bewerbung-modal .input-group-text {
    border-right: 0;
    color: #64748b;
    padding: 0 14px;
    border-radius: 18px 0 0 18px;
}

.bewerbung-modal .input-group .form-control {
    border-left: 0;
    border-radius: 0 18px 18px 0;
}

.bewerbung-modal .form-control:focus {
    background-color: #ffffff;
    border-color: #e2e8f0;
    box-shadow: none;
    outline: none;
}

.bewerbung-modal input:-webkit-autofill,
.bewerbung-modal textarea:-webkit-autofill,
.bewerbung-modal select:-webkit-autofill {
    -webkit-text-fill-color: #111827;
    box-shadow: 0 0 0 1000px var(--field-bg) inset;
    transition: background-color 9999s ease-in-out 0s;
}

.bewerbung-modal textarea.form-control {
    min-height: 90px;
    padding-top: var(--pad);
}

.cookie-consent {
    pointer-events: none;
    background: transparent;
}

.cookie-consent .cct-dialog {
    pointer-events: auto;
}

body.cct-locked {
    overflow: auto;
}

.bewerbung-modal .btn-submit {
    border-radius: 18px;
    padding: 14px 24px;
    box-shadow: none;
}

.bewerbung-modal .btn-submit:hover,
.bewerbung-modal .btn-submit:focus {
    color: var(--theme-color, #ff495a) !important;
    background-color: transparent !important;
    border-color: var(--theme-color, #ff495a) !important;
    box-shadow: none;
}

#page.theme-primary .bewerbung-modal .btn-submit:hover,
#page.theme-primary .bewerbung-modal .btn-submit:focus {
    color: var(--theme-color, #ff495a) !important;
    background-color: transparent !important;
    border-color: var(--theme-color, #ff495a) !important;
}

.bewerbung-modal.modal {
    z-index: 10050;
}

.modal-backdrop {
    z-index: 10040;
}

@media (max-width: 575.98px) {
    .bewerbung-modal.modal.show {
        display: flex !important;
        align-items: stretch;
        justify-content: stretch;
    }

    .bewerbung-modal .modal-dialog {
        margin: 0;
        width: 100%;
        max-width: 100%;
        height: 100%;
        padding: 0;
    }

    .bewerbung-modal .modal-header {
        padding: 1rem 1.25rem;
        background: #ffffff;
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .bewerbung-modal .modal-content {
        border-radius: 0;
        min-height: 100vh;
        height: 100%;
    }

    .bewerbung-modal .modal-body {
        padding: 1.25rem;
        overflow-y: auto;
    }

    .bewerbung-modal .mb-4 {
        margin-bottom: 0.75rem !important;
    }

    .bewerbung-modal .form-row > [class*="col-"] {
        margin-bottom: 0.75rem;
    }

    .bewerbung-modal .text-muted.small {
        font-size: 0.8rem;
    }
}

/* =========================================================
   CUSTOMER JOB HUB
   ========================================================= */

.customer-jobs-page .simple-header__cta {
    border-color: #ffffff;
}

.customer-jobs-page .simple-header__cta:hover,
.customer-jobs-page .simple-header__cta:focus-visible {
    background: #ffffff !important;
    color: var(--theme-color, #6f4dcd) !important;
}

.customer-jobs-hero {
    position: relative;
    overflow: hidden;
    padding: 180px 0 80px;
    background-color: var(--theme-color, #6f4dcd);
    color: #ffffff;
}

.customer-jobs-hero .container {
    position: relative;
    z-index: 1;
}

@supports (color: color-mix(in srgb, #000 10%, #fff)) {
    .customer-jobs-hero {
        background-image: radial-gradient(
            1200px 560px at 6% -8%,
            color-mix(in srgb, var(--theme-color, #6f4dcd) 65%, #fff) 0%,
            var(--theme-color, #6f4dcd) 42%,
            color-mix(in srgb, var(--theme-color, #6f4dcd) 72%, #000) 100%
        );
    }
}

.customer-jobs-hero__kicker {
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.86);
}

.customer-jobs-hero__content {
    height: 100%;
}

.customer-jobs-hero__check-panel {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
}

.customer-jobs-hero__check {
    height: 100%;
    min-height: 210px;
    max-height: 340px;
    aspect-ratio: 1 / 1;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: clamp(16.8rem, 24vw, 27.2rem);
    line-height: 1;
    opacity: 0.1;
    pointer-events: none;
}

.customer-jobs-hero__check--mobile {
    position: absolute;
    right: -18vw;
    top: 52%;
    transform: translateY(-50%);
    width: 88vw;
    height: 88vw;
    max-width: 520px;
    max-height: 520px;
    min-width: 320px;
    min-height: 320px;
    border: 0;
    background: transparent;
    z-index: 0;
    opacity: 0.05;
}

.customer-jobs-hero__title {
    margin: 0 0 16px;
    font-size: clamp(2rem, 3.6vw, 3.4rem);
    line-height: 1.1;
    color: #ffffff;
}

.customer-jobs-hero__lead {
    margin: 0;
    max-width: 760px;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.92);
}

.customer-jobs-hero #error-back-link:hover,
.customer-jobs-hero #error-back-link:focus-visible,
.customer-jobs-hero #thankyou-back-link:hover,
.customer-jobs-hero #thankyou-back-link:focus-visible {
    color: #fff !important;
    border: 2px solid #fff !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

#page.theme-primary .customer-jobs-hero .btn.btn-rose.tra-rose-hover:hover,
#page.theme-primary .customer-jobs-hero .btn.btn-rose.tra-rose-hover:focus-visible,
#page.theme-primary .customer-jobs-hero .btn.btn-rose.tra-rose-hover:active {
    color: #fff !important;
    border: 2px solid #fff !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

.customer-jobs-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.customer-jobs-count,
.customer-jobs-fallback {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.85rem;
    line-height: 1;
}

.customer-jobs-count {
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.38);
    color: #ffffff;
}

.customer-jobs-fallback {
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.94);
}

.customer-jobs-section {
    padding: 56px 0;
    background: #f6f7fb;
}

.customer-job-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 12px 26px rgba(2, 6, 23, 0.06);
}

.customer-job-card__title {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.3;
    color: #0f172a;
}

.customer-job-card__meta {
    margin: 0;
    color: #64748b;
    font-size: 0.95rem;
}

.customer-job-card .btn {
    margin-top: auto;
    align-self: flex-start;
}

.customer-jobs-empty {
    max-width: 760px;
    margin: 0 auto;
    padding: 44px 30px;
    text-align: center;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.06);
}

.process-theme.processbar li:after,
.process-theme.processbar li:before {
    background-color: var(--theme-color, #6f4dcd);
}

#process-2.whitesmoke_shape {
    background-color: #f7f7f7;
}

.process-theme.processbar li:nth-child(n + 2):before {
    background-color: #f7f7f7;
    border: 2px solid var(--theme-color, #6f4dcd);
    color: var(--theme-color, #6f4dcd);
}

/* Keep connector lines behind circles/numbers */
.process-theme.processbar li {
    z-index: auto;
}

.process-theme.processbar li:before {
    position: relative;
    z-index: 3;
}

.process-theme.processbar li:after {
    z-index: 1;
}

@media (max-width: 991.98px) {
    .customer-jobs-hero {
        padding-top: 150px;
    }

    .customer-jobs-hero__check-panel {
        justify-content: flex-start;
        margin-bottom: 12px;
    }

    .customer-jobs-hero__check-panel .customer-jobs-hero__check {
        width: 70px;
        height: 70px;
        font-size: 1.9rem;
        opacity: 0.2;
    }
}

@media (max-width: 575.98px) {
    .customer-jobs-hero {
        padding: 118px 0 60px;
    }

    .customer-jobs-hero__lead {
        font-size: 1rem;
    }

    .customer-jobs-section {
        padding: 38px 0;
    }

    .customer-job-card {
        padding: 22px;
    }

    .customer-job-card .btn {
        width: 100%;
        text-align: center;
    }
}