/* ==========================================================
   PUSHFIRE MEDIA – Jobs-Seite im Look des Showrooms
   Alle Werte (Farben, Größen, Abstände) stammen aus dem Showroom-style.css.
   ========================================================== */

/* ---------- 1. SCHALTZENTRALE (identisch zum Showroom) ---------- */
:root {
    --schriftart-seite: "usual", sans-serif;
    --hauptfarbe-akzent: #7f2738;
    --hintergrund-seite: #1e1e1e;
    --hintergrund-showroom: #f9f9f9;
    --text-farbe: #ffffff;
    --ueberschrift-farbe: #ffffff;
    --linien-farbe: #dddddd;
    --footer-bg: #1e1e1e;
    --footer-text-white: #ffffff;
    --footer-text-grey: #888888;

    /* abgeleitet (nur Weiß-Transparenzen, wie im Showroom) */
    --linie-fein: rgba(255, 255, 255, 0.1);
    --flaeche-fein: rgba(255, 255, 255, 0.05);

    /* Einheitlicher Seitenrand für ALLE Bereiche (Header, Inhalt, Bewerbung, Footer).
       Inhalt wächst dynamisch bis 1.800 px, der Rand bleibt schmal. */
    --rand: clamp(20px, 3vw, 56px);
    --inhalt-max: 1800px;
    --pad-x: max(var(--rand), calc((100% - var(--inhalt-max)) / 2 + var(--rand)));
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 140px; }

body {
    background-color: var(--hintergrund-seite);
    color: var(--text-farbe);
    font-family: var(--schriftart-seite);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

img { max-width: 100%; height: auto; display: block; }   /* height:auto, sonst überschreiben die HTML-Attribute das Seitenverhältnis */
a { color: inherit; }
:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.sr-only {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}
.sr-only:focus {
    position: fixed; left: 1rem; top: 1rem; width: auto; height: auto; clip: auto;
    background: #fff; color: #1e1e1e; padding: .6em 1em; z-index: 2000;
}

/* ---------- 2. PREMIUM-HINTERGRUND (Verlauf + Grain) ---------- */
.premium-bg {
    background: linear-gradient(-45deg, #002736, #110815, #3a1019, #003066);
    background-size: 400% 400%;
    background-attachment: fixed;
    animation: smoothGradient 18s ease infinite;
    position: relative;
}

.premium-bg::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 150px 150px;
    background-attachment: fixed;
    opacity: 0.2;
    pointer-events: none;
    z-index: 0;
}

.premium-bg > * { position: relative; z-index: 1; }

/* Header bleibt beim Scrollen sichtbar */
header.premium-bg { position: sticky; top: 0; z-index: 1000; }

@keyframes smoothGradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ---------- 3. HEADER ---------- */
header {
    padding: 1.5rem var(--pad-x);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    top: 0;
    z-index: 1000;
}

.logo-container a { display: block; text-decoration: none; cursor: pointer; }
.logo-container img { width: max(120px, 10vw); height: auto; display: block; }   /* wie Original */

.header-actions { display: flex; align-items: center; gap: 2.5rem; }

.nav-link {
    color: #fff;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 300;
    transition: opacity 0.3s ease;
}
.nav-link:hover { opacity: 0.6; }

/* „Let's talk“-Link-Stil des Showrooms */
.lets-talk-link {
    position: relative;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    font-size: max(1rem, 1.555vw);   /* wie „Let's talk media“ im Original */
    font-weight: 300;
    line-height: 1.4;
}
/* Unterstrich zieht sich beim Hover nach links zusammen (wie Original) */
.lets-talk-link::after {
    content: ""; position: absolute; left: 0; bottom: -4px;
    width: 100%; height: 1px; background: currentColor;
    transform: scaleX(1); transform-origin: left; transition: transform .3s ease;
}
.lets-talk-link:hover::after { transform: scaleX(0); }

/* ---------- 3b. BURGER + OFFCANVAS (Nachbau Bricks-Offcanvas der Startseite) ---------- */
.header-left { display: flex; align-items: center; gap: clamp(1.6rem, 1.11vw + 1.24rem, 2.8rem); }
.burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; margin-left: -8px; padding: 0;
    background: none; border: 0; cursor: pointer; color: #fff;
}
.burger svg { width: 32px; height: 26px; display: block; }

.offcanvas { position: fixed; inset: 0; z-index: 2000; visibility: hidden; transition: visibility 0s linear .35s; }
.offcanvas.is-open { visibility: visible; transition: none; }
.offcanvas-backdrop {
    position: absolute; inset: 0; background: rgba(0, 0, 0, .5);
    opacity: 0; transition: opacity .35s ease;
}
.offcanvas.is-open .offcanvas-backdrop { opacity: 1; }
.offcanvas-inner {
    position: absolute; top: 0; bottom: 0; left: 0;
    width: 35%;
    background: #1d1d1d;   /* --bg-body der Startseite */
    padding: clamp(2rem, 1.81vw + 1.42rem, 3.96rem);
    padding-top: calc(clamp(2rem, 1.81vw + 1.42rem, 3.96rem) + env(safe-area-inset-top, 0px));
    display: flex; flex-direction: column; row-gap: clamp(1.6rem, 1.11vw + 1.24rem, 2.8rem);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-100%); transition: transform .35s ease;
}
.offcanvas.is-open .offcanvas-inner { transform: none; }
.offcanvas-close {
    align-self: flex-start;
    width: 48px; height: 48px; margin: -8px 0 0 -8px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; cursor: pointer; color: #fff;
}
.offcanvas-close svg { width: 36px; height: 36px; display: block; }
.offcanvas nav { display: flex; flex-direction: column; row-gap: clamp(1.6rem, 1.11vw + 1.24rem, 2.8rem); }
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list a {
    color: #fff; text-decoration: none;
    font-size: max(2.5rem, 3.555vw); font-weight: 700; line-height: 1.2;
    transition: color .2s ease-in-out;
}
.nav-list--small a { font-size: max(1rem, 1.555vw); font-weight: 400; line-height: 1.5; }
/* Hover wie Original: alle grau, der aktive weiß */
.nav-list:hover li a { color: #888; }
.nav-list li:hover a, .nav-list li a:focus-visible { color: #fff; }
html.menu-open { overflow: hidden; }
@media (max-width: 991px) { .offcanvas-inner { width: 50%; } }
@media (max-width: 767px) { .offcanvas-inner { width: 100%; } }
@media (hover: none) { .nav-list:hover li a { color: #fff; } }


/* ---------- 4. LAUFSCHRIFT ---------- */
.marquee-container {
    width: 100%;
    border-bottom: 1px solid var(--linie-fein);
    padding-top: 2rem;
    padding-bottom: 10rem;
    overflow: hidden;
    position: relative;
    display: flex;
    white-space: nowrap;
}

.marquee-track { display: flex; animation: scrollMarquee 25s linear infinite; }

.marquee-text {
    font-size: 15rem;
    font-weight: 600;
    color: var(--text-farbe);
    opacity: 1;
    letter-spacing: 2px;
    padding-right: 10px;
}

@keyframes scrollMarquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ---------- 5. MAIN / HERO ---------- */
main { flex: 1; width: 100%; }
.content { padding: 4rem var(--pad-x); }

.hero-section { text-align: center; margin-bottom: 5rem; padding-top: 2rem; }

/* 1. Kicker */
.hero-section .kicker {
    font-size: 1.4rem;
    max-width: 850px;
    margin: 0 auto 1.5rem;
    opacity: 0.6;
}

/* 2. Headline: zwei ausgewogene Zeilen */
.hero-section h1 {
    font-size: 5.5rem;
    font-weight: 700;
    color: var(--ueberschrift-farbe);
    max-width: 1000px;
    margin: 0 auto 2.5rem;
    letter-spacing: -1.5px;
    line-height: 1.05;
    text-wrap: balance;
}

/* 3. Eckdaten als Pillen (Stil der Showroom-Buttons) */
.facts {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;
    list-style: none; margin-bottom: 4.5rem;
}

/* 4. Begrüßung: kompakter Textblock mit feiner Linie darüber */
.hero-section .intro {
    max-width: 760px;
    margin: 0 auto 3.5rem;
    padding-top: 3.5rem;
    border-top: 1px solid var(--linie-fein);
}
.hero-section .intro .hello {
    font-size: 1.5rem;
    font-weight: 600;
    opacity: 1;
    margin: 0 0 1rem;
}
.hero-section .intro p {
    font-size: 1.3rem;
    line-height: 1.7;
    opacity: 0.6;
}
.hero-section .intro .hello + p { margin: 0; }
.facts li {
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    padding: .5rem 1.6rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.actions {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3rem;
}

/* Primär-Button = „Mehr laden“-Button des Showrooms */
.btn {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--text-farbe);
    padding: 1rem 3rem;
    font-size: 1.1rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}
.btn:hover { background-color: #fff; color: #000; border-color: #fff; }

/* Text-Link-Stil (wie „Senden“ im Showroom-Footer) */
.text-link {
    color: #ffffff;
    font-size: 1.6rem;
    text-decoration: underline;
    text-underline-offset: 10px;
    text-decoration-thickness: 1px;
    transition: opacity 0.3s ease;
}
.text-link:hover { opacity: 0.6; }

/* Team-Slider wie auf der Startseite (3 Bilder Desktop, 2 Bilder Tablet/Handy) */
.team-swiper { margin-top: 6rem; }
.team-swiper .swiper-slide img {
    width: 100%; height: auto;
    aspect-ratio: 1024 / 683; object-fit: cover; display: block;
}
.team-swiper .swiper-pagination {
    position: static; margin-top: 2rem;
    display: flex; justify-content: center; gap: .25rem;
}
.team-swiper .swiper-pagination-bullet {
    width: 8px; height: 8px; margin: 0 !important;
    background: #fff; opacity: .3;
    /* größere Tippfläche, ohne den Punkt zu vergrößern */
    box-sizing: content-box; padding: 6px; background-clip: content-box;
}
.team-swiper .swiper-pagination-bullet-active { opacity: 1; }

/* ---------- 6. ALLGEMEINE ABSCHNITTE ---------- */
.section { margin: 0 auto; padding: 6rem 0; }
.section + .section { border-top: 1px solid var(--linie-fein); }

.section h2 {
    font-size: 6rem;
    line-height: 1.1;
    letter-spacing: -2px;
    font-weight: 700;
    margin-bottom: 2.5rem;
    color: var(--ueberschrift-farbe);
}

.section p { font-size: 1.6rem; line-height: 1.8; opacity: 0.6; }
.section p + p { margin-top: 1.2rem; }

.label {
    display: inline-block;
    background-color: var(--hauptfarbe-akzent);
    color: #fff;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 1.5rem;
}

/* Über uns */
.about { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8rem; align-items: start; }

.values-list { display: flex; flex-direction: column; gap: 2rem; }

/* Akkordeons (am Desktop immer offen, nur am Handy bedienbar) */
.acc > summary { list-style: none; }
.acc > summary::-webkit-details-marker { display: none; }
@media (min-width: 769px) {
    .acc-text > summary, .acc-values > summary { display: none; }
    .panel > summary { pointer-events: none; cursor: default; }
}
.value {
    background: var(--flaeche-fein);
    border-radius: 12px;
    border-left: 3px solid var(--hauptfarbe-akzent);
    padding: 2rem 2.2rem;
}
.value h3 { font-size: 1.8rem; line-height: 1.25; margin-bottom: .8rem; }
.value p { font-size: 1.1rem; line-height: 1.7; opacity: 0.6; }

/* Aufgaben / Profil */
/* Kopf wie bei „Über uns“ und „Benefits“: Label + Überschrift, linksbündig */
.role-head { margin: 0 0 4rem; }
.role-head p { font-size: 1.5rem; }
.role-head .role-title {
    font-size: 6rem; line-height: 1.1; letter-spacing: -2px; font-weight: 700;
    color: var(--ueberschrift-farbe); opacity: 1; margin: .3rem 0 0;
}

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.panel { background: var(--flaeche-fein); border-radius: 12px; padding: 3rem; }
.panel h3 { font-size: 2rem; letter-spacing: -.5px; margin-bottom: 1.5rem; }

.checklist { list-style: none; }
.checklist li {
    position: relative;
    padding: 1.1rem 0 1.1rem 2rem;
    border-top: 1px solid var(--linie-fein);
    font-size: 1.1rem;
    opacity: .75;
}
.checklist li:first-child { border-top: 0; }
.checklist li::before {
    content: "";
    position: absolute; left: .2rem;
    top: calc(1.1rem + .6em);           /* mittig zur ersten Textzeile */
    width: .4em; height: .4em;
    border-radius: 50%;
    background: currentColor;           /* Punkt in Schriftfarbe */
}

/* Benefits */
.benefits-head { margin-bottom: 4rem; }
.benefits-head p { max-width: 850px; }
.benefits {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; list-style: none;
}
.benefits li {
    background: var(--flaeche-fein);
    border-radius: 12px;
    padding: 2rem;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.3;
    min-height: 9rem;
    position: relative; overflow: hidden; isolation: isolate;
    transition: background .3s ease;
}
.benefits li:hover { background: rgba(255, 255, 255, 0.09); }

/* Kachel-Hover für ALLE Kacheln (Benefits, Aufgaben/Profil, Haltung):
   Bordeaux-Lichtschein folgt der Maus. Die Klasse .spot setzt das Script nur auf Geräten mit Maus. */
.spot { position: relative; isolation: isolate; }
.spot::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(420px circle at var(--mx, 30%) var(--my, 70%),
                rgba(127, 39, 56, 0.55), rgba(127, 39, 56, 0.18) 40%, transparent 70%);
    opacity: 0; transition: opacity .35s ease;
}
.spot:hover::after { opacity: 1; }
/* Die drei stärksten Argumente (Festgehalt, Provision, Dienstwagen) stehen in der Liste vorn und werden hervorgehoben */
.benefits li.top {
    background: rgba(127, 39, 56, 0.22);
    border-top: 3px solid var(--hauptfarbe-akzent);
    font-size: 1.8rem;
    min-height: 11rem;
}
.benefits li.top:hover { background: rgba(127, 39, 56, 0.32); }
.benefits li.top small { font-size: 1.05rem; }
.bene-nav { display: none; }
.benefits li.clone { display: none; }
.benefits li small {
    display: block; margin-top: .6rem;
    font-size: 1rem; font-weight: 400; color: var(--footer-text-grey);
}

/* Kultur */
.culture { display: grid; grid-template-columns: 1fr 1fr; gap: 8rem; align-items: center; }
.culture figure {
    border-radius: 12px; overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}
.culture img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* ---------- 7. BEWERBUNG (Look des Showroom-Kontaktbereichs) ---------- */
.apply {
    background-color: var(--footer-bg);
    border-top: 1px solid var(--linie-fein);
}
.apply-inner {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 8rem;
    width: 100%;
    padding: 6rem var(--pad-x) 8rem;
}
.apply h2 {
    font-size: 6rem; margin-bottom: 2.5rem; line-height: 1.1; letter-spacing: -2px; font-weight: 700;
}
.apply .lead p { font-size: 1.6rem; line-height: 1.8; opacity: 0.6; max-width: 85%; }
.apply .lead p + p { margin-top: 1.2rem; }
.apply .actions { justify-content: flex-start; margin-top: 3rem; gap: 2.5rem; }

.factsheet { display: flex; flex-direction: column; align-self: center; }
.factsheet div {
    display: grid; grid-template-columns: 10rem 1fr; gap: 2rem;
    padding: 1.5rem 0;
    border-bottom: 2px solid var(--linie-fein);
}
.factsheet div:first-child { border-top: 2px solid var(--linie-fein); }
.factsheet dt { font-size: 1.1rem; color: var(--footer-text-grey); }
.factsheet dd { font-size: 1.4rem; font-weight: 600; }
.factsheet a { font-weight: 300; text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* ---------- 8. FOOTER (wie Showroom) ---------- */
.site-footer {
    background-color: var(--footer-bg);
    padding: 5rem 0 3rem;
    margin-top: auto;
}
.footer-top {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 5rem; flex-wrap: wrap; gap: 3rem;
    padding: 0 var(--pad-x);
}
.footer-top img { height: 80px; width: auto; }
.footer-email {
    font-size: clamp(1.5rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--footer-text-white);
    text-decoration: none;
}
.footer-bottom {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 2rem;
    border-top: 1px solid var(--linie-fein);
    padding: 2rem var(--pad-x) 0;
}
.footer-copyright { color: var(--footer-text-grey); font-size: 1.1rem; }
.footer-links { display: flex; gap: 2rem; }
.footer-links a { color: var(--footer-text-white); text-decoration: none; font-size: 1.1rem; }
.footer-links a:hover { text-decoration: underline; }

/* Eingebettet per iframe: eigener Header/Footer entfällt */
.is-embedded header, .is-embedded .site-footer, .is-embedded .offcanvas { display: none; }

/* ---------- 9. MOBIL ---------- */
@media (max-width: 1100px) {
    .section h2, .apply h2, .role-head .role-title { font-size: 4.5rem; }
    .about, .culture, .apply-inner { gap: 4rem; }
    .benefits { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .hero-section h1 { font-size: 3.6rem; }
    .section h2, .apply h2, .role-head .role-title { font-size: 4rem; }
    .about, .culture, .two-col, .apply-inner { grid-template-columns: 1fr; }
    .apply-inner { padding: 4rem var(--pad-x) 5rem; }
    .culture img { aspect-ratio: 3 / 2; }
    .apply .lead p { max-width: 100%; }
    .marquee-text { font-size: 5rem; }
    .marquee-container { padding-top: 1rem; padding-bottom: 4rem; }
}

/* ---------- 9a. SMARTPHONE (bis 768 px) ---------- */
@media (max-width: 768px) {
    html { scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
    body { overflow-x: clip; }   /* clip statt hidden: der mitlaufende Header funktioniert weiter */

    /* iOS Safari: fixed-Hintergrund ruckelt bzw. wird nicht unterstützt */
    .premium-bg, .premium-bg::before { background-attachment: scroll; }

    /* Header kompakt, Safe-Area für Notch-Geräte */
    header {
        padding: calc(.9rem + env(safe-area-inset-top, 0px)) max(var(--pad-x), env(safe-area-inset-right, 0px)) .9rem max(var(--pad-x), env(safe-area-inset-left, 0px));
    }
    .logo-container img { width: 120px; }
    .nav-link { display: none; }
    header { gap: 1rem; }
    .header-left { gap: 1rem; }
    .burger { width: 44px; height: 44px; }      /* Symbol 24 px wie im Original, Tippfläche 44 px */
    .burger svg { width: 24px; height: 20px; }
    .lets-talk-link { font-size: 1.1rem; padding: .7rem 0; }   /* Tippfläche mind. 44 px */
    .lets-talk-link::after { bottom: calc(.7rem - 4px); }

    /* Laufschrift */
    .marquee-text { font-size: 3.2rem; line-height: 1.2; letter-spacing: 1px; }
    .marquee-container { padding: 3.5rem 0; }

    .content { padding: 2.5rem var(--pad-x) 1rem; }

    /* Hero */
    .hero-section { padding-top: 0; margin-bottom: 3rem; text-align: left; }
    .facts { justify-content: flex-start; }
    .hero-section .kicker { font-size: 1.05rem; margin-bottom: 1rem; }
    .hero-section h1 { font-size: 2.5rem; letter-spacing: -1px; line-height: 1.1; margin-bottom: 1.8rem; }
    .facts { gap: .6rem; margin-bottom: 2.5rem; }
    .facts li { padding: .4rem 1.1rem; font-size: .95rem; }
    .hero-section .intro { padding-top: 2rem; margin-bottom: 2rem; text-align: left; }
    .hero-section .intro .hello { font-size: 1.25rem; margin-bottom: .6rem; }
    .hero-section .intro p { font-size: 1.05rem; line-height: 1.65; }

    /* Buttons untereinander, volle Breite, große Tippflächen */
    .actions { flex-direction: column; align-items: stretch; gap: 1.2rem; }
    .btn { width: 100%; text-align: center; padding: 1.1rem 1.5rem; min-height: 52px; }
    .text-link { font-size: 1.2rem; text-align: center; padding: .6rem 0; align-self: center; }
    .apply .actions { align-items: stretch; margin-top: 2rem; }

    /* Teamfoto: nicht zu hoch, Gesichter bleiben im Bild */
    .team-swiper { margin-top: 3rem; }
    .team-swiper .swiper-pagination { margin-top: 1.2rem; }

    /* Abschnitte */
    .section { padding: 3.2rem 0; }
    .section h2, .apply h2, .role-head .role-title { font-size: 2.3rem; letter-spacing: -1px; margin-bottom: 1.4rem; }
    .role-head .role-title { margin-bottom: 0; }
    .section p, .apply .lead p { font-size: 1.05rem; line-height: 1.7; }
    .label { margin-bottom: 1rem; }

    .culture { gap: 2rem; }
    .about { gap: 0; }   /* Abstand zwischen den Akkordeons steuert nur margin der summary */
    .values-list { gap: 1.2rem; }
    .value { padding: 1.4rem 1.3rem; }
    .value h3 { font-size: 1.3rem; }
    .value p { font-size: 1rem; }

    .role-head { margin-bottom: 2rem; text-align: left; }
    .role-head p { font-size: 1.05rem; }
    .two-col { gap: .8rem; }
    .panel { padding: 0 1.3rem; border-radius: 10px; }
    .checklist li { font-size: 1rem; padding: .85rem 0 .85rem 1.6rem; line-height: 1.5; }
    .checklist li::before { top: calc(.85rem + .55em); left: .1rem; }

    .benefits-head { margin-bottom: 1.2rem; }
    /* Benefits als wischbare Endlos-Leiste (vom Kollegen), randlos bis zum Bildschirmrand */
    .benefits {
        display: flex; gap: .8rem; position: relative;
        overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y;
        scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
        margin: 0 calc(-1 * var(--rand)); padding: .3rem var(--rand) .5rem;
        scroll-padding: 0 var(--rand);
        scrollbar-width: none;
    }
    .benefits::-webkit-scrollbar { display: none; }
    .benefits li, .benefits li.top {
        flex: 0 0 82%; max-width: 23rem; scroll-snap-align: start;
        min-height: 12rem; padding: 1.5rem 1.5rem 1.4rem; border-radius: 12px; border: 0;
        border-top: 3px solid transparent;   /* gleiche Höhe wie die Bordeaux-Kante der Top 3 */
        display: flex; flex-direction: column; justify-content: flex-start;
        font-size: 1.3rem; line-height: 1.3;
        background: var(--flaeche-fein);
    }
    .benefits li.top {
        background: rgba(127, 39, 56, 0.22);
        border-top: 3px solid var(--hauptfarbe-akzent);
        font-size: 1.45rem;
    }
    .benefits li small { font-size: .95rem; margin-top: .5rem; }
    .benefits li.clone { display: flex; }

    /* Pfeile und Punkte unter der Leiste */
    .bene-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: .9rem; }
    .bene-dots { display: flex; gap: .45rem; }
    .bene-btn {
        flex: none; width: 40px; height: 40px; border-radius: 50%;
        display: grid; place-items: center; padding: 0; cursor: pointer;
        background: transparent; border: 1px solid rgba(255, 255, 255, .3); color: #fff;
        -webkit-tap-highlight-color: transparent;
        transition: opacity .3s ease, background-color .3s ease;
    }
    .bene-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .bene-btn:active { background: rgba(255, 255, 255, .15); }
    .benefits { cursor: grab; }
    .benefits.drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
    .bene-dots span {
        width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .25);
        transition: width .3s ease, background-color .3s ease;
    }
    .bene-dots span.on { width: 18px; background: #fff; }

    /* Kultur: Foto zuerst, aber flacher */
    .culture figure { border-radius: 10px; }
    .culture img { aspect-ratio: 1024 / 683; object-position: center; }

    /* Bewerbung */
    .apply-inner { padding: 3.2rem max(var(--pad-x), env(safe-area-inset-right, 0px)) calc(4rem + env(safe-area-inset-bottom, 0px)) max(var(--pad-x), env(safe-area-inset-left, 0px)); gap: 2.5rem; }
    .apply .lead p { max-width: 100%; }
    .factsheet { align-self: stretch; }
    .factsheet div { grid-template-columns: 1fr; gap: .2rem; padding: 1.1rem 0; }
    .factsheet dt { font-size: .9rem; }
    .factsheet dd { font-size: 1.2rem; }
    .factsheet a { overflow-wrap: anywhere; }

    /* Footer */
    .site-footer { padding: 3rem 0 calc(2rem + env(safe-area-inset-bottom, 0px)); }
    .footer-top { flex-direction: column; align-items: flex-start; gap: 1.5rem; margin-bottom: 2.5rem; }
    .footer-top img { height: 52px; }
    .footer-email { font-size: 1.5rem; overflow-wrap: anywhere; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 1rem; padding-top: 1.5rem; }
    .footer-copyright, .footer-links a { font-size: 1rem; }
    .footer-links { gap: 1.5rem; flex-wrap: wrap; }
    .footer-links a { padding: .4rem 0; }

    /* Akkordeons: lange Texte standardmäßig zugeklappt */
    .acc > summary {
        display: flex; align-items: center; justify-content: space-between; gap: 1rem;
        cursor: pointer; min-height: 56px; -webkit-tap-highlight-color: transparent;
    }
    .acc > summary::after {
        content: ""; flex: none; width: .65rem; height: .65rem;
        border-right: 2px solid #fff; border-bottom: 2px solid #fff;
        transform: rotate(45deg); margin-top: -.3rem; transition: transform .25s ease;
    }
    .acc[open] > summary::after { transform: rotate(-135deg); margin-top: .3rem; }

    .acc-text > summary, .acc-values > summary {
        background: var(--flaeche-fein); border-radius: 10px;
        padding: .9rem 1.3rem; font-size: 1.1rem; font-weight: 600; margin-top: 1.2rem;
    }
    .acc-text[open] > summary, .acc-values[open] > summary { margin-bottom: 1.2rem; }
    .acc-values > summary { margin-top: .8rem; }
    .acc-text > p:first-of-type { margin-top: 0; }
    .about > div:first-child .acc-text p { margin-top: 1rem; }

    .panel > summary { padding: .9rem 0; pointer-events: auto; cursor: pointer; }
    .panel > summary h3 { margin: 0; font-size: 1.35rem; letter-spacing: -.3px; }
    .panel[open] > summary { border-bottom: 1px solid var(--linie-fein); margin-bottom: .3rem; }
    .panel[open] { padding-bottom: .6rem; }
    .panel + .panel { margin-top: 0; }
}

/* ---------- 9b. KLEINE SMARTPHONES (bis 400 px) ---------- */
@media (max-width: 400px) {
    .hero-section h1 { font-size: 2.15rem; }
    .section h2, .apply h2, .role-head .role-title { font-size: 2rem; }
    .marquee-text { font-size: 2.6rem; }
    .lets-talk-link { font-size: 1.05rem; }
}

/* ---------- 9c. Touch-Geräte: kein „Hängenbleiben“ von Hover ---------- */
@media (hover: none) {
    .btn:hover { background-color: transparent; color: var(--text-farbe); border-color: rgba(255, 255, 255, 0.3); }
    .btn:active { background-color: #fff; color: #000; border-color: #fff; }
    .benefits li:hover { background: var(--flaeche-fein); }
    .benefits li.top:hover { background: rgba(127, 39, 56, 0.22); }
    .spot::after { display: none; }
    .text-link:hover, .nav-link:hover { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .bene-dots span, .bene-btn { transition: none; }
    .offcanvas-inner, .offcanvas-backdrop, .lets-talk-link::after { transition: none !important; }
    .marquee-track, .premium-bg { animation: none; }
    .spot::after { transition: none; }
    .culture figure img { transform: none !important; }
}

/* ---------- 10. SCROLL-ANIMATIONEN (vom Kollegen übernommen) ---------- */
/* Greifen nur, wenn das Script läuft (Klasse js-reveal) – ohne JS oder bei
   „reduzierter Bewegung“ bleibt alles sofort sichtbar. */
.js-reveal .reveal {
    opacity: 0;
    transform: translate3d(0, 44px, 0);
    transition: opacity .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms),
                transform .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms);
    will-change: opacity, transform;
}
.js-reveal .reveal.is-in { opacity: 1; transform: none; }

/* Fotos: blenden mit leichtem Zoom von unten ein */
.js-reveal .reveal-img {
    opacity: 0;
    transform: translate3d(0, 60px, 0) scale(.94);
    transition: opacity 1.1s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms),
                transform 1.3s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms);
    will-change: opacity, transform;
}
.js-reveal .reveal-img.is-in { opacity: 1; transform: none; }

/* Parallax: Foto leicht vergrößert, wandert beim Scrollen minimal gegen die Scrollrichtung */
.js-reveal .culture figure img {
    transform: translate3d(0, var(--py, 0px), 0) scale(1.12);
    will-change: transform;
}

/* Überschriften: Wort für Wort aus einer Maske hochfahren */
.js-reveal .split .w {
    display: inline-block; overflow: hidden; vertical-align: top;
    padding: 0 .04em .16em; margin: 0 -.04em -.16em;
}
.js-reveal .split .wi {
    display: inline-block;
    transform: translate3d(0, 115%, 0) rotate(4deg);
    transform-origin: 0 100%;
    transition: transform 1.05s cubic-bezier(.16, .8, .2, 1) calc(var(--i, 0) * 70ms + var(--d, 0ms));
    will-change: transform;
}
.js-reveal .split.is-in .wi { transform: none; }