/* 
 * SOZPAED.NET Premium Design System 2026
 * Colors: #1e97cc (Primary), #3bbeec (Secondary), #f8f9fa (Light Grey), #333333 (Dark Grey)
 */

:root {
    --spn26-primary: #0d4d69;
    /* Ultra-High contrast blue (>7:1) */
    --spn26-primary-rgb: 13, 77, 105;
    --spn26-primary-light: #156b91;
    --spn26-bg-light: #f8f9fa;
    --spn26-text-dark: #111111;
    /* Near black */
    --spn26-text-muted: #444444;
    /* Dark grey */
    --spn26-white: #ffffff;
    /* Flächen-Rhythmus: wenige, ruhige Ebenen */
    --spn26-surface-0: #ffffff;
    --spn26-surface-1: #f6f8f9;
    --spn26-surface-2: #eef1f4;
    --spn26-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.05);
    --spn26-shadow-hover: 0 20px 40px rgba(var(--spn26-primary-rgb), 0.15);
    --spn26-border-radius: 12px;
    --spn26-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* Typo-Hierarchie: Display (Hero) > Sektion > Fließtext */
    --spn26-type-display: clamp(2.15rem, 4.8vw, 3.35rem);
    --spn26-type-section: clamp(1.55rem, 3.1vw, 2.45rem);
    --spn26-type-lead: 1.125rem;
    --spn26-type-body: 1rem;
    --spn26-measure: 38rem;
    /* Akzent-Buttons (dunkles Violett, hoher Kontrast zu weißer Schrift) */
    --spn26-accent-violet: #4b2a63;
    --spn26-accent-violet-hover: #3d224f;
    --spn26-accent-violet-rgb: 75, 42, 99;
    /* Suchleiste + Statistik-Zeile: gleiche sichtbare Breite */
    --spn26-hero-content-max: 1120px;
}

/* Skip Link for Accessibility */
.spn26-skip-link {
    position: absolute;
    top: -100px;
    left: 20px;
    background: var(--spn26-primary);
    color: white;
    padding: 10px 20px;
    z-index: 10000;
    border-radius: 0 0 10px 10px;
    text-decoration: none;
    font-weight: 700;
    transition: top 0.3s ease;
}

/* Fixiert + Safe-Area: beim Fokus über allen Leisten sichtbar (nicht unter .spn26-header) */
.spn26-skip-link:focus,
.spn26-skip-link:focus-visible {
    position: fixed;
    top: max(0.75rem, env(safe-area-inset-top, 0px));
    left: max(1rem, env(safe-area-inset-left, 0px));
    right: auto;
    z-index: 100100;
    outline: 3px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
}

/* WCAG 2.2 Zielgröße: Skip-Link bei Tastatur-Fokus auch auf schmalen Viewports */
@media (max-width: 768px) {
    .spn26-skip-link:focus,
    .spn26-skip-link:focus-visible {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        box-sizing: border-box;
    }
}

/* 100% Accessibility - Focus Indicators */
:focus-visible {
    outline: 3px solid var(--spn26-primary) !important;
    outline-offset: 3px !important;
}

/* Smooth Scrolling & Motion Sensitivity */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-delay: -1ms !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        background-attachment: initial !important;
        scroll-behavior: auto !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }
}

/* Ensure Top Jobs Cards highlight when the link inside is focused */
.spn26-job-card:focus-within {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px -5px rgba(var(--spn26-primary-rgb), 0.25), 0 0 0 2px var(--spn26-primary);
    border-color: var(--spn26-primary);
}

/* Stats Section - Integrated Look (Hierarchie: große Zahl, gedämpftes Label) */
.spn26-stats {
    background-color: transparent;
    border-top: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    /* Gleicher horizontaler Rhythmus wie .spn26-hero (20px) — bündig zur Suchleiste */
    padding: 1.75rem 20px 2.75rem;
    width: 100%;
    margin: 0;
}

.spn26-stats-inner {
    max-width: min(var(--spn26-hero-content-max), 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
    text-align: center;
}

@media (min-width: 768px) {
    .spn26-stats-inner {
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
    }
}

.spn26-stat-item .spn26-stat-value {
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    font-weight: 900;
    margin: 0 0 0.5rem 0;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.spn26-stat-item .spn26-stat-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
    line-height: 1.35;
}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    overflow-x: hidden !important;
    max-width: 100vw;
}

.spn26-hero-body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--spn26-text-dark);
    line-height: 1.6;
    background-color: var(--spn26-white);
    overflow-x: hidden;
}

/* Wird gesetzt, wenn das mobile Menü offen ist – verhindert doppelten Scrollbalken */
html.spn26-menu-open,
body.spn26-menu-open {
    overflow: hidden;
}

/* Header & Accessibility Fixes */
#header-container,
#header-full-width,
.side-menu-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Skip-Link-Ziel: Mausklick ohne Ring, Tastatur mit sichtbarem Fokus */
#spn26-main-content:focus:not(:focus-visible) {
    outline: none;
}

#spn26-main-content:focus-visible {
    outline: 3px solid var(--spn26-primary);
    outline-offset: 4px;
}

/* Job-Einzel: Sprungziel — gleiche vertikale Logik wie #wrapper (gemessene Headerunterkante, keine Doppel-Admin-Bar). */
body.spn26-job-single.spn26-hero-body #spn26-main-content {
    scroll-margin-top: calc(var(--spn26-measured-sticky-header-bottom, 5.25rem) + var(--spn26-job-single-nudge-y, 0px) - var(--spn26-job-single-content-lift, 0px));
}

.spn26-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: 100%;
    z-index: 1000;
    /* Notch: nicht 1.6rem + safe-area summieren (wirkt wie doppelter Abstand); max reicht */
    padding-top: max(1.6rem, env(safe-area-inset-top, 0px));
    padding-bottom: 1.6rem;
    padding-left: max(5%, env(safe-area-inset-left, 0px));
    padding-right: max(5%, env(safe-area-inset-right, 0px));
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}

/* Desktop: WP-Admin-Leiste — Header darunter (unverändert zum üblichen Theme-Verhalten) */
body.admin-bar .spn26-header {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar .spn26-header {
        top: 46px !important;
    }
}

/*
 * Nur responsive (≤991px): fester Anker + kein Leerraum oben — Desktop bleibt ohne diese Overrides.
 */
@media screen and (max-width: 991px) {
    /*
     * Echte Headerhöhe für Inhalt unter dem fixen Header (Hero, Ergebnisse …).
     * Auf body + .spn26-hero setzen: Safari/WebKit erbt Custom Properties zuverlässig nicht immer bis Hero-Padding.
     * Kein constant() — in neuem WebKit kann das ganze calc ungültig werden.
     */
    body.spn26-hero-body:not(.admin-bar) {
        --spn26-mobile-header-offset: calc(max(0.5rem, env(safe-area-inset-top, 0px)) + 48px + 0.5rem + 2px);
    }

    body.spn26-hero-body:not(.admin-bar) .spn26-hero,
    body.spn26-hero-body:not(.admin-bar) main#spn26-main-content.spn26-hero {
        --spn26-mobile-header-offset: calc(max(0.5rem, env(safe-area-inset-top, 0px)) + 48px + 0.5rem + 2px);
    }

    @media screen and (min-width: 783px) {
        body.admin-bar.spn26-hero-body {
            --spn26-mobile-header-offset: calc(32px + max(0.5rem, env(safe-area-inset-top, 0px)) + 48px + 0.5rem + 2px);
        }

        body.admin-bar.spn26-hero-body .spn26-hero,
        body.admin-bar.spn26-hero-body main#spn26-main-content.spn26-hero {
            --spn26-mobile-header-offset: calc(32px + max(0.5rem, env(safe-area-inset-top, 0px)) + 48px + 0.5rem + 2px);
        }
    }

    @media screen and (max-width: 782px) {
        body.admin-bar.spn26-hero-body {
            --spn26-mobile-header-offset: calc(46px + max(0.5rem, env(safe-area-inset-top, 0px)) + 48px + 0.5rem + 2px);
        }

        body.admin-bar.spn26-hero-body .spn26-hero,
        body.admin-bar.spn26-hero-body main#spn26-main-content.spn26-hero {
            --spn26-mobile-header-offset: calc(46px + max(0.5rem, env(safe-area-inset-top, 0px)) + 48px + 0.5rem + 2px);
        }
    }

    body.spn26-hero-body .spn26-header {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        /* Kein translate3d: in Safari kann GPU-Layer den fixen Header optisch nach unten versetzen */
        -webkit-transform: none !important;
        transform: none !important;
    }

    body.spn26-hero-body:not(.admin-bar) .spn26-header {
        top: 0 !important;
        margin-top: 0 !important;
    }

    html:has(body.admin-bar.spn26-hero-body) {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    html:has(body.spn26-hero-body:not(.admin-bar)),
    body.spn26-hero-body:not(.admin-bar) {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    body.spn26-hero-body:not(.admin-bar) #page,
    body.spn26-hero-body:not(.admin-bar) #wrapper,
    body.spn26-hero-body:not(.admin-bar) .site {
        margin-top: 0 !important;
    }

    body.spn26-hero-body:not(.admin-bar) #page.elementor-page {
        padding-top: 0 !important;
    }

    body:not(.admin-bar) .spn26-header {
        padding-top: max(0.5rem, env(safe-area-inset-top, 0px)) !important;
        padding-bottom: 0.5rem !important;
    }

    body:not(.admin-bar) .spn26-header .spn26-logo img {
        height: 48px;
        max-width: min(240px, 100%);
    }

    body.admin-bar.spn26-hero-body .spn26-header {
        padding-top: max(0.5rem, env(safe-area-inset-top, 0px)) !important;
        padding-bottom: 0.5rem !important;
    }

    body.admin-bar.spn26-hero-body .spn26-header .spn26-logo img {
        height: 48px;
        max-width: min(240px, 100%);
    }
}

.spn26-logo img {
    display: block;
    height: 60px;
    width: auto;
    max-width: min(280px, 100%);
    object-fit: contain;
    transition: var(--spn26-transition);
}

.spn26-nav {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.spn26-nav a {
    text-decoration: none;
    color: var(--spn26-text-dark);
    font-weight: 500;
    font-size: 0.95rem;
    transition: var(--spn26-transition);
}

.spn26-nav a:hover {
    color: var(--spn26-primary);
}

.spn26-badge-new {
    background: var(--spn26-accent-violet);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 6px;
    margin-left: 5px;
    vertical-align: middle;
    display: inline-block;
    line-height: 1;
    position: relative;
    /* Ca. 3mm/Pixel-Gefühl nach oben */
}

/* Screen Reader Only */
.spn26-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Force Contrast for WP Job Manager Shortcode */
.job_listings h4,
.job_listings .listing-title h4,
.spn26-job-card h3 {
    color: #111111 !important;
}

.job_listings .job-type {
    background-color: #222222 !important;
    /* Extremely high contrast */
    color: #ffffff !important;
}

.job_listings .job-type.vollzeit {
    background-color: #e0f2f1 !important;
    color: #004d40 !important;
}

.job_listings .job-type.teilzeit {
    background-color: #fff8e1 !important;
    color: #5d4037 !important;
}

.job_listings .job-type.freier-dienstvertrag {
    background-color: #f1f8e9 !important;
    color: #33691e !important;
}

.job_listings .job-type.geringfuegig {
    background-color: #e1f5fe !important;
    color: #01579b !important;
}

.job_listings .listing-icons li,
.job_listings .listing-date {
    color: #444444 !important;
}

.job_listings .listing-date.new {
    background-color: #d1ecf1 !important;
    color: #0c5460 !important;
    padding: 2px 6px;
    border-radius: 4px;
}

.spn26-nav-tools {
    display: flex;
    gap: 1.5rem;
    margin-left: 1.5rem;
    padding-left: 1.5rem;
    border-left: 1px solid #ddd;
}

.spn26-nav-tools a {
    text-decoration: none;
    color: var(--spn26-primary);
    font-weight: 700;
    font-size: 0.95rem;
    transition: var(--spn26-transition);
}

.spn26-nav-tools a:hover {
    color: var(--spn26-primary-light);
}

.spn26-header-right {
    display: flex;
    align-items: center;
    gap: 2rem;
}

/* Reset default button styles for the hamburger trigger */
.spn26-mobile-toggle {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
}


.spn26-user-nav {
    display: flex;
    gap: 1.5rem;
}

.spn26-user-nav a {
    text-decoration: none;
    color: var(--spn26-text-dark);
    font-weight: 500;
    font-size: 0.95rem;
    transition: var(--spn26-transition);
}

.spn26-user-nav a:hover {
    color: var(--spn26-primary);
}

.spn26-highlight-link {
    color: var(--spn26-primary) !important;
    font-weight: 800 !important;
}

.spn26-btn-post {
    background: var(--spn26-primary);
    color: #ffffff !important;
    padding: 0.6rem 1.25rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: transform 0.2s ease-out, background 0.3s, box-shadow 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(var(--spn26-primary-rgb), 0.2);
    white-space: nowrap;
    will-change: transform;
}

.spn26-btn-post:hover {
    background: var(--spn26-primary-light);
    color: #ffffff !important;
    transform: translateY(-2px);
}

.spn26-btn-search {
    background: var(--spn26-accent-violet);
    color: #ffffff !important;
    padding: 0.6rem 1.25rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: transform 0.2s ease-out, background 0.3s, box-shadow 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(var(--spn26-accent-violet-rgb), 0.28);
    white-space: nowrap;
    will-change: transform;
}

.spn26-btn-search:hover {
    background: var(--spn26-accent-violet-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(var(--spn26-accent-violet-rgb), 0.38);
}

/* Hero Section */
.spn26-hero {
    background: #0d4d69;
    /* Darker background for accessibility */
    position: relative;
    padding: 70px 20px 30px;
    /* Inhalt um insgesamt 2,5cm nach oben gerückt (vorher 165px, dann 127px, dann 89px) */
    margin-top: 0 !important;
    /* Schiebt die Section direkt ganz nach oben, exakt HINTER den Header */
    color: white;
    text-align: center;
    overflow: hidden;
}

@media (max-width: 768px) {
    .spn26-hero {
        margin-top: 0 !important;
        /* Gleiche Logik wie fixer Header: vertikale Safe-Area sitzt im Header-Padding — kein großer Festwert */
        /* Fallback-Zeile: falls var() in WebKit fehlschlägt, nicht unter den Header rutschen */
        padding: 43px 20px 40px;
        padding: calc(var(--spn26-mobile-header-offset, 88px) + 1rem - 1.5cm) 20px 40px;
    }

    /*
     * Lead-Zeile → Suchpanel: auf schmalen Viewports wirkte die Box „zu hoch“ (kollabiertes Margin:
     * p { margin-bottom: 2rem } und Formular { margin-top: 3rem } → nur max(2rem, 3rem), nicht die Summe).
     */
    .spn26-hero > p {
        margin-bottom: calc(3rem + 1cm);
    }

    main#spn26-main-content.spn26-hero .spn26-search-toolbar form.spn26-search-container.spn26-smart-search-form,
    body.home .spn26-hero .spn26-search-toolbar form.spn26-search-container.spn26-smart-search-form,
    body.spn26-hero-body .spn26-hero .spn26-search-toolbar form.spn26-search-container.spn26-smart-search-form,
    html body .spn26-hero .spn26-search-toolbar form.spn26-search-container.spn26-smart-search-form {
        margin: 0 auto 2.5rem !important;
    }
}

/* 2026 Vibes: Aurora Gradient Overlay */
.spn26-hero::before,
.spn26-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 1;
    pointer-events: none;
    animation: drift 20s infinite alternate ease-in-out;
}

.spn26-hero::before {
    top: -30%;
    left: -10%;
    width: 70%;
    height: 70%;
    background: rgba(13, 77, 105, 0.4);
    /* Darker blue for contrast */
}

.spn26-hero::after {
    bottom: -20%;
    right: -10%;
    width: 60%;
    height: 60%;
    background: rgba(255, 255, 255, 0.1);
    /* Subtle light */
    animation-delay: -10s;
}

@keyframes drift {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(10%, 15%) scale(1.1);
    }

    100% {
        transform: translate(-5%, 5%) scale(0.95);
    }
}

.spn26-hero>* {
    position: relative;
    z-index: 2;
}

/* Startseite: gleiche Content-Breite für Suchpanel + Statistik-Zahlen (wie Jobs / .spn26-search-toolbar--results; nicht :root 1120px) */
main#spn26-main-content.spn26-hero {
    --spn26-hero-content-max: min(90rem, 100%);
}

.spn26-hero h1 {
    font-size: var(--spn26-type-display);
    font-weight: 400;
    margin-bottom: 0.5rem;
    color: #ffffff;
    animation: fadeInUp 0.8s ease-out;
    line-height: 1.12;
    letter-spacing: -0.03em;
}

.spn26-hero p {
    font-size: var(--spn26-type-lead);
    color: #ffffff;
    opacity: 1;
    margin: 0 auto 2rem;
    max-width: min(var(--spn26-measure), 100%);
    font-weight: 500;
    line-height: 1.55;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.spn26-hero h1 span {
    font-weight: 900;
    /* Maximal fett */
    position: relative;
    display: inline-block;
    color: #ffffff;
    /* No shadow, no gradient for max contrast */
}

/* Unterstrich entfernt */

/* Subtiler, moderner Unterstrich */
/* Unterstrich-Block entfernt */

/* Search Box */
.spn26-search-container {
    max-width: min(var(--spn26-hero-content-max), 100%);
    margin: 3rem auto;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 10px;
    border-radius: 8px;
    /* Dezente Rundung (kein Pill-Look) */
    display: flex;
    gap: 10px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 6px 22px rgba(15, 23, 42, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.45);
    position: relative;
    z-index: 10;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.spn26-search-container:focus-within {
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 8px 28px rgba(15, 23, 42, 0.09),
        0 0 0 1px rgba(var(--spn26-primary-rgb), 0.28);
    outline: 3px solid var(--spn26-primary);
    outline-offset: 2px;
}

@keyframes glow-animation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.spn26-search-container:hover {
    transform: translateY(-2px);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 8px 26px rgba(15, 23, 42, 0.09),
        0 0 0 1px rgba(255, 255, 255, 0.55);
}

/* Hero-Startseite: gleiche max. Suchbreite wie Jobs-Seite (spn26-results-content-max ≈ min(90rem, 100%)) */
.spn26-hero .spn26-search-toolbar.spn26-search-toolbar--home,
.spn26-hero .spn26-search-toolbar.spn26-search-toolbar--results {
    --spn26-hero-content-max: min(90rem, 100%);
    width: 100%;
    max-width: min(90rem, 100%);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/*
 * WordPress / Theme: Hero-Suchleiste gegen globale Form-/Input-Regeln absichern
 * (WorkScout u. a. setzen oft width/max-width/flex auf form oder input)
 */
main#spn26-main-content.spn26-hero form.spn26-search-container.spn26-smart-search-form,
body.home .spn26-hero form.spn26-search-container.spn26-smart-search-form,
body.spn26-hero-body .spn26-hero form.spn26-search-container.spn26-smart-search-form,
html body .spn26-hero form.spn26-search-container.spn26-smart-search-form {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: min(var(--spn26-hero-content-max), 100%) !important;
    box-sizing: border-box !important;
}

/* Toolbar: „Suche zurücksetzen“ unter Suchfeld+Finden — nicht als zweite Spalte rechts */
main#spn26-main-content.spn26-hero .spn26-search-toolbar form.spn26-search-container.spn26-smart-search-form,
body.home .spn26-hero .spn26-search-toolbar form.spn26-search-container.spn26-smart-search-form,
body.spn26-hero-body .spn26-hero .spn26-search-toolbar form.spn26-search-container.spn26-smart-search-form,
html body .spn26-hero .spn26-search-toolbar form.spn26-search-container.spn26-smart-search-form {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
}

main#spn26-main-content.spn26-hero form.spn26-search-container.spn26-smart-search-form input[type="hidden"],
body.home .spn26-hero form.spn26-search-container.spn26-smart-search-form input[type="hidden"],
body.spn26-hero-body .spn26-hero form.spn26-search-container.spn26-smart-search-form input[type="hidden"],
html body .spn26-hero form.spn26-search-container.spn26-smart-search-form input[type="hidden"] {
    display: none !important;
}

/* Grid: nur ohne verfeinerte Suche (.spn26-smart-search-wrapper--filters-stacked hat eigenes 2-Zeilen-Layout) */
main#spn26-main-content.spn26-hero form.spn26-search-container.spn26-smart-search-form > .spn26-smart-search-wrapper:not(.spn26-smart-search-wrapper--filters-stacked),
body.home .spn26-hero form.spn26-search-container.spn26-smart-search-form > .spn26-smart-search-wrapper:not(.spn26-smart-search-wrapper--filters-stacked),
body.spn26-hero-body .spn26-hero form.spn26-search-container.spn26-smart-search-form > .spn26-smart-search-wrapper:not(.spn26-smart-search-wrapper--filters-stacked),
html body .spn26-hero form.spn26-search-container.spn26-smart-search-form > .spn26-smart-search-wrapper:not(.spn26-smart-search-wrapper--filters-stacked) {
    display: grid !important;
    /* Suchfeld: begrenzte Breite, Mitte für Filter */
    grid-template-columns: minmax(0, min(260px, 30vw)) minmax(200px, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Nur Suchfeld + Finden: zwei Spalten, kein leeres Mittelfeld */
main#spn26-main-content.spn26-hero form.spn26-search-container.spn26-smart-search-form.spn26-hero-search-basic > .spn26-smart-search-wrapper,
body.home .spn26-hero form.spn26-search-container.spn26-smart-search-form.spn26-hero-search-basic > .spn26-smart-search-wrapper,
body.spn26-hero-body .spn26-hero form.spn26-search-container.spn26-smart-search-form.spn26-hero-search-basic > .spn26-smart-search-wrapper,
html body .spn26-hero form.spn26-search-container.spn26-smart-search-form.spn26-hero-search-basic > .spn26-smart-search-wrapper {
    grid-template-columns: minmax(0, 1fr) auto !important;
}

/* Tablet / schmale Viewports: keine 3-Spalten-Grid-Zwang — untereinander, volle Breite */
@media (max-width: 1024px) {
    main#spn26-main-content.spn26-hero form.spn26-search-container.spn26-smart-search-form,
    body.home .spn26-hero form.spn26-search-container.spn26-smart-search-form,
    body.spn26-hero-body .spn26-hero form.spn26-search-container.spn26-smart-search-form,
    html body .spn26-hero form.spn26-search-container.spn26-smart-search-form {
        flex-direction: column !important;
        align-items: stretch !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    main#spn26-main-content.spn26-hero form.spn26-search-container.spn26-smart-search-form > .spn26-smart-search-wrapper,
    body.home .spn26-hero form.spn26-search-container.spn26-smart-search-form > .spn26-smart-search-wrapper,
    body.spn26-hero-body .spn26-hero form.spn26-search-container.spn26-smart-search-form > .spn26-smart-search-wrapper,
    html body .spn26-hero form.spn26-search-container.spn26-smart-search-form > .spn26-smart-search-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        grid-template-columns: unset !important;
        gap: 12px !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    main#spn26-main-content.spn26-hero .spn26-hero-filters-fields,
    body.home .spn26-hero .spn26-hero-filters-fields,
    body.spn26-hero-body .spn26-hero .spn26-hero-filters-fields,
    html body .spn26-hero .spn26-hero-filters-fields {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    main#spn26-main-content.spn26-hero .spn26-bundesland-picker-inner,
    body.home .spn26-hero .spn26-bundesland-picker-inner,
    body.spn26-hero-body .spn26-hero .spn26-bundesland-picker-inner,
    html body .spn26-hero .spn26-bundesland-picker-inner {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    main#spn26-main-content.spn26-hero .spn26-filter-field,
    body.home .spn26-hero .spn26-filter-field,
    body.spn26-hero-body .spn26-hero .spn26-filter-field,
    html body .spn26-hero .spn26-filter-field {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    main#spn26-main-content.spn26-hero .spn26-jobtype-fieldset,
    body.home .spn26-hero .spn26-jobtype-fieldset,
    body.spn26-hero-body .spn26-hero .spn26-jobtype-fieldset,
    html body .spn26-hero .spn26-jobtype-fieldset {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    main#spn26-main-content.spn26-hero .spn26-smart-btn,
    body.home .spn26-hero .spn26-smart-btn,
    body.spn26-hero-body .spn26-hero .spn26-smart-btn,
    html body .spn26-hero .spn26-smart-btn {
        width: 100% !important;
        align-self: stretch !important;
    }
}

main#spn26-main-content.spn26-hero #spn26_hero_at_smart_input.spn26-smart-input,
main#spn26-main-content.spn26-hero #spn26_results_smart_input.spn26-smart-input,
body.spn26-hero-body .spn26-hero #spn26_hero_at_smart_input.spn26-smart-input,
body.spn26-hero-body .spn26-hero #spn26_results_smart_input.spn26-smart-input,
body.spn26-hero-body .spn26-hero #spn26_hero_at_smart_input.spn26-smart-input,
body.spn26-hero-body .spn26-hero #spn26_results_smart_input.spn26-smart-input,
html body .spn26-hero #spn26_hero_at_smart_input.spn26-smart-input,
html body .spn26-hero #spn26_results_smart_input.spn26-smart-input {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

main#spn26-main-content.spn26-hero #spn26_hero_at_smart_input.spn26-smart-input::placeholder,
main#spn26-main-content.spn26-hero #spn26_results_smart_input.spn26-smart-input::placeholder,
body.spn26-hero-body .spn26-hero #spn26_hero_at_smart_input.spn26-smart-input::placeholder,
body.spn26-hero-body .spn26-hero #spn26_results_smart_input.spn26-smart-input::placeholder,
body.spn26-hero-body .spn26-hero #spn26_hero_at_smart_input.spn26-smart-input::placeholder,
body.spn26-hero-body .spn26-hero #spn26_results_smart_input.spn26-smart-input::placeholder,
html body .spn26-hero #spn26_hero_at_smart_input.spn26-smart-input::placeholder,
html body .spn26-hero #spn26_results_smart_input.spn26-smart-input::placeholder {
    color: #94a3b8 !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

main#spn26-main-content.spn26-hero .spn26-hero-filters,
body.home .spn26-hero .spn26-hero-filters,
body.spn26-hero-body .spn26-hero .spn26-hero-filters,
html body .spn26-hero .spn26-hero-filters {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Desktop: Zeile mit Filtern; auf ≤1024px überschreibt der Media-Block darüber */
@media (min-width: 1025px) {
    main#spn26-main-content.spn26-hero .spn26-hero-filters-fields,
    body.home .spn26-hero .spn26-hero-filters-fields,
    body.spn26-hero-body .spn26-hero .spn26-hero-filters-fields,
    html body .spn26-hero .spn26-hero-filters-fields {
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    main#spn26-main-content.spn26-hero .spn26-smart-btn,
    body.home .spn26-hero .spn26-smart-btn,
    body.spn26-hero-body .spn26-hero .spn26-smart-btn,
    html body .spn26-hero .spn26-smart-btn {
        align-self: center !important;
        justify-self: end !important;
        white-space: nowrap !important;
    }

    main#spn26-main-content.spn26-hero .spn26-filter-field,
    body.home .spn26-hero .spn26-filter-field,
    body.spn26-hero-body .spn26-hero .spn26-filter-field,
    html body .spn26-hero .spn26-filter-field {
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

main#spn26-main-content.spn26-hero .spn26-bundesland-select,
body.home .spn26-hero .spn26-bundesland-select,
body.spn26-hero-body .spn26-hero .spn26-bundesland-select,
html body .spn26-hero .spn26-bundesland-select {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Nur Suchfeld + Finden (Admin: verfeinerte Suche aus) */
form.spn26-hero-search-basic .spn26-smart-search-wrapper {
    justify-content: flex-start;
}

.spn26-smart-search-wrapper {
    --spn26-hero-search-h: 3.125rem;
    /* Textfeld + Select + Chips: gemeinsamer Ton im weißen Suchkasten */
    --spn26-hero-field-bg: #f1f5f9;
    /* Textfeld + Select + Vollzeit/Teilzeit: gleiche Eckenrundung */
    --spn26-hero-inner-radius: 2px;
    display: flex;
    width: 100%;
    align-items: center;
    flex-wrap: nowrap;
    position: relative;
    border-radius: 2px;
    background: transparent;
    overflow: visible;
    gap: 14px;
}

/*
 * Verfeinerte Suche:
 * Zeile 1: Suchfeld | Finden
 * Zeile 2: Bundesland + Anstellung (breit) | Suche zurücksetzen
 */
.spn26-smart-search-wrapper.spn26-smart-search-wrapper--filters-stacked {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "spn26Search spn26Btn"
        "spn26Filters spn26Reset";
    align-items: center;
    align-content: start;
    gap: 12px 14px;
}

.spn26-smart-search-wrapper.spn26-smart-search-wrapper--filters-stacked > .spn26-smart-input {
    grid-area: spn26Search;
}

.spn26-smart-search-wrapper.spn26-smart-search-wrapper--filters-stacked > .spn26-hero-filters {
    grid-area: spn26Filters;
    flex: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.spn26-smart-search-wrapper.spn26-smart-search-wrapper--filters-stacked > .spn26-smart-btn {
    grid-area: spn26Btn;
}

.spn26-smart-search-wrapper.spn26-smart-search-wrapper--filters-stacked > .spn26-search-toolbar__reset-row--inline {
    grid-area: spn26Reset;
    margin-top: 0;
    justify-self: end;
    justify-content: flex-end;
    width: auto;
    min-width: 0;
    align-self: center;
}

.spn26-smart-search-wrapper--filters-stacked .spn26-hero-filters-fields {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 0.75rem;
    column-gap: 14px;
}

.spn26-smart-search-wrapper--filters-stacked .spn26-filter-field {
    max-width: min(100%, 22rem);
}

.spn26-smart-search-wrapper--filters-stacked .spn26-jobtype-options {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    max-width: 100%;
}

.spn26-smart-search-wrapper--filters-stacked .spn26-jobtype-chip {
    min-height: 2.75rem;
    height: auto;
    max-height: none;
    padding: 0.4rem 0.65rem;
    border-radius: 2px;
}

.spn26-jobtype-chip__icon {
    font-size: 1.15rem;
    line-height: 1;
    flex-shrink: 0;
    color: var(--spn26-primary, #0d4d69);
    opacity: 0.88;
}

.spn26-jobtype-chip__text {
    line-height: 1.2;
}

.spn26-jobtype-chip:has(input:checked) .spn26-jobtype-chip__icon {
    opacity: 1;
}

@media (max-width: 900px) {
    .spn26-smart-search-wrapper.spn26-smart-search-wrapper--filters-stacked {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .spn26-smart-search-wrapper--filters-stacked > .spn26-smart-btn {
        width: 100%;
    }

    .spn26-smart-search-wrapper--filters-stacked > .spn26-search-toolbar__reset-row--inline {
        width: 100%;
        justify-self: stretch;
        justify-content: center;
    }
}

.spn26-smart-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid #cbd5e1 !important;
    outline: none !important;
    /* Explizit hell: .spn26-hero hat color:#fff — sonst erbt das Input weiße Schrift auf hellem Kasten */
    background: var(--spn26-hero-field-bg, #f1f5f9);
    min-height: var(--spn26-hero-search-h);
    height: var(--spn26-hero-search-h);
    max-height: var(--spn26-hero-search-h);
    padding: 0 1rem;
    font-size: 1.05rem;
    line-height: 1.25;
    color: var(--spn26-text-dark);
    -webkit-text-fill-color: var(--spn26-text-dark);
    caret-color: var(--spn26-primary);
    font-weight: 500;
    border-radius: var(--spn26-hero-inner-radius);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
    box-sizing: border-box;
}

.spn26-search-container .spn26-smart-input,
.spn26-hero .spn26-search-container .spn26-smart-input {
    color: var(--spn26-text-dark) !important;
    -webkit-text-fill-color: var(--spn26-text-dark) !important;
    background-color: var(--spn26-hero-field-bg, #f1f5f9) !important;
    border: 1px solid #cbd5e1 !important;
}

.spn26-smart-input:focus {
    outline: none !important;
    border-color: #94a3b8 !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06) !important;
    background: var(--spn26-hero-field-bg, #f1f5f9) !important;
    background-color: var(--spn26-hero-field-bg, #f1f5f9) !important;
    color: var(--spn26-text-dark);
    -webkit-text-fill-color: var(--spn26-text-dark);
}

/* Kein blauer Browser-/Autofill-Hintergrund im Suchfeld */
.spn26-smart-input:-webkit-autofill,
.spn26-smart-input:-webkit-autofill:hover,
.spn26-smart-input:-webkit-autofill:focus,
.spn26-smart-input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--spn26-text-dark) !important;
    caret-color: var(--spn26-primary);
    box-shadow: inset 0 0 0 1000px var(--spn26-hero-field-bg, #f1f5f9) !important;
    transition: background-color 99999s ease-out 0s;
}

/* Placeholder: kleiner, hellgrau — abgesetzt vom Eingabetext */
.spn26-smart-input::placeholder {
    color: #94a3b8;
    font-size: 0.875rem;
    font-weight: 400;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.spn26-smart-input::-webkit-input-placeholder {
    color: #94a3b8;
    font-size: 0.875rem;
    font-weight: 400;
}

.spn26-smart-input::-moz-placeholder {
    color: #94a3b8;
    font-size: 0.875rem;
    font-weight: 400;
    opacity: 1;
}

.spn26-smart-btn {
    background: var(--spn26-primary);
    color: white;
    border: none;
    min-height: var(--spn26-hero-search-h);
    height: var(--spn26-hero-search-h);
    max-height: var(--spn26-hero-search-h);
    padding: 0 1.5rem;
    border-radius: 2px;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 15px rgba(var(--spn26-primary-rgb), 0.3);
    margin-right: 0;
    align-self: center;
    box-sizing: border-box;
}

.spn26-smart-btn:hover {
    background: #177aa6;
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(var(--spn26-primary-rgb), 0.4);
}

/* Hero-Filterleiste: Bundesland + Beschäftigung (im gemeinsamen Suchfeld) */
.spn26-hero-filters {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    position: static;
    z-index: 1;
}

.spn26-bundesland-picker-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.spn26-bundesland-picker-icon {
    display: none;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.spn26-hero-filters-fields {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 14px;
}

/* Label links, Steuerung rechts — eine Zeile mit Suchfeld & Finden */
.spn26-filter-field {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem 0.65rem;
    min-width: 0;
    width: auto;
    max-width: min(100%, 320px);
}

.spn26-bundesland-picker-label {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #374151;
    flex-shrink: 0;
    display: block;
    line-height: 1.15;
    min-height: 0;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

/* Kein <legend>: Browser legen legend oft über die Zeile — stattdessen .spn26-jobtype-row */
.spn26-jobtype-fieldset {
    border: none;
    margin: 0;
    padding: 0;
    min-width: 0;
    min-inline-size: 0;
    width: auto;
    max-width: none;
    display: block;
}

.spn26-jobtype-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem 0.65rem;
    min-width: 0;
}

.spn26-jobtype-field-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.spn26-jobtype-info-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0.15rem;
    border: none;
    background: transparent !important;
    cursor: pointer;
    color: var(--spn26-primary, #0d4d69) !important;
    line-height: 1;
    vertical-align: middle;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        opacity 0.2s ease;
}

.spn26-jobtype-info-btn:hover,
.spn26-jobtype-info-btn:focus {
    color: var(--spn26-primary-light, #156b91) !important;
    background: transparent !important;
}

.spn26-jobtype-info-btn:hover .spn26-jobtype-info-btn__circle,
.spn26-jobtype-info-btn:focus .spn26-jobtype-info-btn__circle {
    border-color: rgba(var(--spn26-primary-rgb), 0.55);
    background: rgba(var(--spn26-primary-rgb), 0.08);
    color: var(--spn26-primary, #0d4d69);
}

.spn26-jobtype-info-btn:active {
    color: var(--spn26-primary, #0d4d69) !important;
    opacity: 0.92;
}

.spn26-jobtype-info-btn:focus-visible {
    outline: 2px solid var(--spn26-primary, #0d4d69);
    outline-offset: 3px;
    border-radius: 50%;
}

.spn26-jobtype-info-btn__circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    border: 1.5px solid rgba(var(--spn26-primary-rgb), 0.45);
    font-size: 0.68rem;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.35);
    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}

/*
 * <dialog>: UA setzt geschlossen auf display:none — eigenes display:flex würde das überschreiben
 * und den Inhalt dauernd sichtbar machen. Nur im geöffneten Zustand flexen.
 */
.spn26-jobtype-info-dialog:not([open]) {
    display: none;
}

.spn26-jobtype-info-dialog[open],
.spn26-jobtype-info-dialog:modal {
    display: flex;
    flex-direction: column;
}

.spn26-jobtype-info-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(26rem, calc(100vw - 2rem));
    max-width: none;
    max-height: min(90vh, 32rem);
    max-height: min(calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 1.5rem), 32rem);
    margin: 0;
    padding: 0;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 18px;
    background: #fafbfc;
    color: var(--spn26-text-dark, #0f172a);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.8) inset,
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 24px 56px rgba(15, 23, 42, 0.14),
        0 8px 20px rgba(var(--spn26-primary-rgb), 0.08);
    overflow: hidden;
    box-sizing: border-box;
}

.spn26-jobtype-info-dialog::backdrop {
    background: rgba(15, 23, 42, 0.28);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.spn26-jobtype-info-dialog__inner {
    position: relative;
    padding: 0 max(1.5rem, env(safe-area-inset-right, 0px)) 1.5rem max(1.5rem, env(safe-area-inset-left, 0px));
    text-align: center;
    background:
        radial-gradient(120% 80% at 50% -20%, rgba(var(--spn26-primary-rgb), 0.11) 0%, transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    flex: 1 1 auto;
    min-height: 0;
}

.spn26-jobtype-info-dialog__accent {
    height: 4px;
    margin: 0 -1.5rem 1.25rem;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(
        90deg,
        rgba(var(--spn26-primary-rgb), 0.35) 0%,
        rgba(var(--spn26-primary-rgb), 0.85) 45%,
        rgba(91, 61, 138, 0.45) 100%
    );
}

.spn26-jobtype-info-dialog__header {
    margin-bottom: 0.85rem;
}

.spn26-jobtype-info-dialog__eyebrow {
    margin: 0 0 0.35rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(var(--spn26-primary-rgb), 0.85);
}

.spn26-jobtype-info-dialog__title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.03em;
    color: #0f172a;
}

.spn26-jobtype-info-dialog__intro {
    margin: 0 0 1.15rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    font-weight: 400;
    color: #475569;
    text-wrap: balance;
}

.spn26-jobtype-info-dialog__examples-label {
    margin: 0 0 0.65rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.spn26-jobtype-info-dialog__examples {
    list-style: none;
    margin: 0 0 1.35rem;
    padding: 0.85rem 0.75rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    text-align: center;
}

.spn26-jobtype-info-dialog__example {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem 0.45rem;
    margin: 0;
    min-width: 0;
}

.spn26-jobtype-info-dialog__chip {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.6rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    border-radius: 6px;
    border: 1px solid transparent;
    white-space: nowrap;
    max-width: 100%;
}

.spn26-jobtype-info-dialog__chip--vollzeit {
    color: #004d40;
    background: #e0f2f1;
    border-color: #80cbc4;
}

.spn26-jobtype-info-dialog__chip--teilzeit {
    color: #5d4037;
    background: #fff8e1;
    border-color: #ffcc80;
}

.spn26-jobtype-info-dialog__chip--fdv {
    color: #33691e;
    background: #f1f8e9;
    border-color: #c5e1a5;
    white-space: normal;
    text-align: center;
}

.spn26-jobtype-info-dialog__chip--gering {
    color: #01579b;
    background: #e1f5fe;
    border-color: #81d4fa;
}

.spn26-jobtype-info-dialog__plus {
    font-weight: 700;
    font-size: 0.95rem;
    color: rgba(var(--spn26-primary-rgb), 0.55);
    line-height: 1;
    user-select: none;
}

.spn26-jobtype-info-dialog__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 5.5rem;
    min-height: 2.4rem;
    margin-inline: auto;
    padding: 0.45rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--spn26-text-muted, #475569) !important;
    background: #f1f5f9 !important;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 8px;
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: none;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.spn26-jobtype-info-dialog__close:hover {
    filter: none;
    background: #e2e8f0 !important;
    border-color: rgba(15, 23, 42, 0.16);
    color: var(--spn26-text-dark, #0f172a) !important;
    box-shadow: none;
}

.spn26-jobtype-info-dialog__close:active {
    transform: translateY(1px);
    background: #cbd5e1 !important;
}

.spn26-jobtype-info-dialog__close:focus-visible {
    outline: 2px solid rgba(var(--spn26-primary-rgb, 13, 77, 105), 0.45);
    outline-offset: 2px;
}

.spn26-search-toolbar__reset-row {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 0.85rem;
    box-sizing: border-box;
    flex: 0 0 auto;
    align-self: stretch;
    min-height: 0;
}

/* In Zeile 2 neben den Filtern (Grid-Zelle spn26Reset) */
.spn26-search-toolbar__reset-row--inline {
    margin-top: 0;
    width: auto;
    align-self: center;
    justify-content: flex-end;
}

.spn26-hero .spn26-search-toolbar__reset-row:not(.spn26-search-toolbar__reset-row--inline) {
    margin-top: 0.75rem;
}

/*
 * „Suche zurücksetzen“ — auch ohne spn26-job-results.css (z. B. Job-Einzelansicht);
 * min. Zielgröße für Touch (WCAG 2.5.5).
 */
.spn26-search-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: 0.45rem 0.9rem;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--spn26-primary, #0d4d69);
    text-decoration: none;
    background: transparent;
    border: 1px solid rgba(var(--spn26-primary-rgb, 13, 77, 105), 0.4);
    border-radius: 2px;
    box-sizing: border-box;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
}

.spn26-search-reset:hover {
    background: rgba(var(--spn26-primary-rgb, 13, 77, 105), 0.08);
    color: var(--spn26-primary-light, #156b91);
    border-color: rgba(var(--spn26-primary-rgb, 13, 77, 105), 0.55);
    text-decoration: none;
}

.spn26-search-reset:focus-visible {
    outline: 3px solid var(--spn26-primary, #0d4d69);
    outline-offset: 2px;
}

.spn26-search-reset__icon {
    font-size: 1.1rem;
    line-height: 1;
}

.spn26-jobtype-options {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: flex-start;
    transform: translateY(1mm);
}

.spn26-jobtype-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--spn26-hero-search-h);
    height: var(--spn26-hero-search-h);
    max-height: var(--spn26-hero-search-h);
    padding: 0 10px;
    border-radius: 2px;
    background: var(--spn26-hero-field-bg, #f1f5f9);
    border: 1px solid #cbd5e1;
    color: #374151;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    user-select: none;
    box-sizing: border-box;
}

.spn26-jobtype-chip input {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--spn26-primary);
    cursor: pointer;
}

.spn26-jobtype-chip:has(input:checked) {
    background: #e6f3f9;
    color: var(--spn26-primary);
    border-color: #8ec9e2;
}

.spn26-jobtype-chip:has(input:checked) input {
    accent-color: var(--spn26-primary);
}

/* Beschäftigungs-Chips: kräftigere Farben (Startseite + Job-Suche), klarer Hover & Auswahl */
.spn26-jobtype-chip--vollzeit {
    background: #e0f2f1;
    border-color: #4db6ac;
    color: #004d40;
}

.spn26-jobtype-chip--vollzeit .spn26-jobtype-chip__icon {
    color: #00695c;
}

.spn26-jobtype-chip--vollzeit:hover {
    background: #b2dfdb;
    border-color: #26a69a;
    color: #00251a;
}

.spn26-jobtype-chip--vollzeit:hover .spn26-jobtype-chip__icon {
    color: #004d40;
}

.spn26-jobtype-chip--vollzeit:has(input:checked) {
    background: #00695c;
    border-color: #004d40;
    color: #ffffff;
}

.spn26-jobtype-chip--vollzeit:has(input:checked) .spn26-jobtype-chip__icon {
    color: #b2dfdb;
}

.spn26-jobtype-chip--teilzeit {
    background: #fff8e1;
    border-color: #ffcc80;
    color: #5d4037;
}

.spn26-jobtype-chip--teilzeit .spn26-jobtype-chip__icon {
    color: #e65100;
}

.spn26-jobtype-chip--teilzeit:hover {
    background: #ffecb3;
    border-color: #ffb74d;
    color: #3e2723;
}

.spn26-jobtype-chip--teilzeit:hover .spn26-jobtype-chip__icon {
    color: #ef6c00;
}

.spn26-jobtype-chip--teilzeit:has(input:checked) {
    background: #ef6c00;
    border-color: #e65100;
    color: #ffffff;
}

.spn26-jobtype-chip--teilzeit:has(input:checked) .spn26-jobtype-chip__icon {
    color: #fff8e1;
}

/* Vollzeit oder Teilzeit (kombinierte Stelle) */
.spn26-jobtype-chip--voll-und-teilzeit {
    background: #eef5f3;
    border-color: #90a4ae;
    color: #263238;
}

.spn26-jobtype-chip--voll-und-teilzeit .spn26-jobtype-chip__icon {
    color: #00695c;
}

.spn26-jobtype-chip--voll-und-teilzeit:hover {
    background: #e0f2f1;
    border-color: #78909c;
    color: #102027;
}

.spn26-jobtype-chip--voll-und-teilzeit:hover .spn26-jobtype-chip__icon {
    color: #e65100;
}

.spn26-jobtype-chip--voll-und-teilzeit:has(input:checked) {
    background: #0d4d69;
    border-color: #083747;
    color: #ffffff;
}

.spn26-jobtype-chip--voll-und-teilzeit:has(input:checked) .spn26-jobtype-chip__icon {
    color: #e0f2f1;
}

.spn26-jobtype-chip--freier-dienstvertrag {
    background: #f1f8e9;
    border-color: #aed581;
    color: #33691e;
}

.spn26-jobtype-chip--freier-dienstvertrag .spn26-jobtype-chip__icon {
    color: #558b2f;
}

.spn26-jobtype-chip--freier-dienstvertrag:hover {
    background: #dcedc8;
    border-color: #9ccc65;
    color: #1b5e20;
}

.spn26-jobtype-chip--freier-dienstvertrag:hover .spn26-jobtype-chip__icon {
    color: #33691e;
}

.spn26-jobtype-chip--freier-dienstvertrag:has(input:checked) {
    background: #2e7d32;
    border-color: #1b5e20;
    color: #ffffff;
}

.spn26-jobtype-chip--freier-dienstvertrag:has(input:checked) .spn26-jobtype-chip__icon {
    color: #f1f8e9;
}

.spn26-jobtype-chip--geringfuegig {
    background: #e1f5fe;
    border-color: #4fc3f7;
    color: #01579b;
}

.spn26-jobtype-chip--geringfuegig .spn26-jobtype-chip__icon {
    color: #0277bd;
}

.spn26-jobtype-chip--geringfuegig:hover {
    background: #b3e5fc;
    border-color: #29b6f6;
    color: #01579b;
}

.spn26-jobtype-chip--geringfuegig:hover .spn26-jobtype-chip__icon {
    color: #01579b;
}

.spn26-jobtype-chip--geringfuegig:has(input:checked) {
    background: #0277bd;
    border-color: #01579b;
    color: #ffffff;
}

.spn26-jobtype-chip--geringfuegig:has(input:checked) .spn26-jobtype-chip__icon {
    color: #e1f5fe;
}

/* Aktiv: Label-Text sicher weiß (WorkScout/Plugins färben oft span/label nach) */
.spn26-jobtype-chip--vollzeit:has(input:checked),
.spn26-jobtype-chip--teilzeit:has(input:checked),
.spn26-jobtype-chip--voll-und-teilzeit:has(input:checked),
.spn26-jobtype-chip--freier-dienstvertrag:has(input:checked),
.spn26-jobtype-chip--geringfuegig:has(input:checked) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
}

.spn26-jobtype-chip--vollzeit:has(input:checked) .spn26-jobtype-chip__text,
.spn26-jobtype-chip--teilzeit:has(input:checked) .spn26-jobtype-chip__text,
.spn26-jobtype-chip--voll-und-teilzeit:has(input:checked) .spn26-jobtype-chip__text,
.spn26-jobtype-chip--freier-dienstvertrag:has(input:checked) .spn26-jobtype-chip__text,
.spn26-jobtype-chip--geringfuegig:has(input:checked) .spn26-jobtype-chip__text {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
}

.spn26-bundesland-select-wrap {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
}

.spn26-bundesland-select {
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: var(--spn26-hero-field-bg, #f1f5f9);
    color: var(--spn26-primary);
    border: 1px solid #cbd5e1;
    border-radius: var(--spn26-hero-inner-radius);
    min-height: var(--spn26-hero-search-h);
    height: var(--spn26-hero-search-h);
    max-height: var(--spn26-hero-search-h);
    padding: 0 2.25rem 0 0.85rem;
    font-size: 1.05rem;
    line-height: 1.25;
    font-weight: 600;
    cursor: pointer;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
    box-sizing: border-box;
    background-clip: padding-box;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230d4d69' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.55rem center;
    background-size: 1.1rem;
}

.spn26-bundesland-select:hover {
    background-color: #e2e8f0;
}

.spn26-bundesland-select:focus {
    outline: 3px solid rgba(255, 255, 255, 0.65);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .spn26-search-container {
        max-width: 100%;
    }

    .spn26-hero-filters {
        width: 100%;
        max-width: none;
        padding: 0;
    }

    .spn26-bundesland-picker-inner {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 10px;
    }

    .spn26-bundesland-picker-icon {
        display: none;
    }

    .spn26-hero-filters-fields {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 12px;
        align-items: stretch;
    }

    .spn26-filter-field {
        flex: none;
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }

    .spn26-jobtype-fieldset {
        flex: none;
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }

    .spn26-smart-search-wrapper {
        gap: 10px;
    }

    .spn26-smart-input {
        min-width: 0;
    }

    .spn26-bundesland-picker-label {
        text-align: left;
    }

    .spn26-jobtype-row .spn26-bundesland-picker-label {
        text-align: left;
    }

    .spn26-jobtype-options {
        justify-content: flex-start;
        flex-wrap: wrap;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        gap: 8px;
    }

    .spn26-jobtype-chip {
        flex: 1 1 auto;
        min-width: min(100%, 8.5rem);
        max-width: 100%;
        padding: 0 8px;
        font-size: 0.85rem;
    }

    .spn26-jobtype-chip__text {
        white-space: normal;
        overflow-wrap: anywhere;
        hyphens: auto;
    }

    .spn26-smart-search-wrapper--filters-stacked .spn26-hero-filters-fields {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
    }

    .spn26-smart-search-wrapper--filters-stacked .spn26-filter-field {
        flex: none;
        max-width: 100%;
        width: 100%;
    }

    .spn26-smart-search-wrapper--filters-stacked .spn26-jobtype-fieldset {
        flex: none;
        max-width: 100%;
        width: 100%;
    }

    .spn26-smart-search-wrapper--filters-stacked .spn26-jobtype-options {
        flex-wrap: wrap;
    }

    .spn26-hero .spn26-search-toolbar__reset-row:not(.spn26-search-toolbar__reset-row--inline) {
        justify-content: center;
    }
}

.spn26-search-input:focus {
    outline: none;
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(var(--spn26-primary-rgb), 0.2);
    box-shadow: inset 0 0 0 1px rgba(var(--spn26-primary-rgb), 0.1);
}

.spn26-search-btn {
    background: var(--spn26-primary);
    color: white;
    border: none;
    padding: 1rem 2.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 15px rgba(var(--spn26-primary-rgb), 0.4);
}

.spn26-search-btn:hover {
    background: var(--spn26-primary-light);
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(var(--spn26-primary-rgb), 0.5);
}

.spn26-search-types {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 10px;
    white-space: nowrap;
}

.spn26-search-type-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--spn26-text-muted);
    cursor: pointer;
}

.spn26-search-type-option input[type="checkbox"] {
    width: 14px;
    height: 14px;
}

/* Job Sections — vertikaler Rhythmus + Flächenwechsel */
.spn26-section {
    padding: clamp(2.75rem, 5vw, 4rem) 5%;
}

/* Spotlight: gleicher blauer Verlauf oben wie TOP Jobs (Ellipse, nicht „endlos breit“) */
section.spn26-spotlight {
    background:
        radial-gradient(ellipse 95% 60% at 50% 0%, rgba(var(--spn26-primary-rgb), 0.12), transparent 52%),
        linear-gradient(180deg, var(--spn26-surface-2) 0%, var(--spn26-surface-1) 38%, var(--spn26-surface-1) 100%);
    border-bottom: 1px solid rgba(var(--spn26-primary-rgb), 0.09);
}

.spn26-section--top-jobs {
    background:
        radial-gradient(ellipse 95% 60% at 50% 0%, rgba(var(--spn26-primary-rgb), 0.12), transparent 52%),
        linear-gradient(180deg, var(--spn26-surface-2) 0%, var(--spn26-surface-1) 38%, var(--spn26-surface-1) 100%);
    border-bottom: 1px solid rgba(var(--spn26-primary-rgb), 0.09);
}

.spn26-section.spn26-section--top-jobs {
    padding-top: clamp(3rem, 6vw, 4.75rem);
    padding-bottom: clamp(3.1rem, 6vw, 5rem);
}

/* Job-Einzel: gleiche Such-Markup-Klasse wie Startseite, aber ohne Hero-Blau/Aurora (Fläche = TOP JOBS) */
.spn26-job-single-search-band .spn26-hero.spn26-hero--band-search {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    color: inherit !important;
    text-align: left !important;
}

.spn26-job-single-search-band .spn26-hero.spn26-hero--band-search::before,
.spn26-job-single-search-band .spn26-hero.spn26-hero--band-search::after {
    display: none !important;
    content: none !important;
    animation: none !important;
}

.spn26-job-single-search-band .spn26-search-toolbar {
    --spn26-hero-content-max: min(90rem, 100%);
    max-width: min(90rem, 100%);
    margin-inline: auto;
}

/* Kein horizontaler Scroll; clip nur wenn unterstützt (ältere Firefox: nur hidden) */
.spn26-job-single-search-band {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

@supports (overflow-x: clip) {
    .spn26-job-single-search-band {
        overflow-x: clip;
    }
}

/*
 * Job-Einzel: Abstand unter .spn26-header — JS setzt --spn26-job-single-wrap-pt (untere Kante Header inkl. Safe-Area im Header-Padding + Puffer).
 * --spn26-job-single-nudge-y: Feintuning (positiv = nach unten, negativ = nach oben).
 * --spn26-job-single-content-lift: gesamten Job-Detail-Inhalt um diesen Betrag nach oben (padding-top kleiner).
 * Kein zusätzliches env(safe-area-inset-top) hier: sonst Doppelzählung zu getBoundingClientRect().bottom.
 */
body.spn26-job-single.spn26-hero-body {
    /* Zusatz unter fixem Header; Lift moderat (zu großer Lift frisst den sichtbaren Abstand). */
    --spn26-job-single-nudge-y: calc(0.12rem + 3.25cm);
    --spn26-job-single-content-lift: calc(0.45cm + 0.65rem);
    --spn26-job-single-page-bg: #fafafa;
}

/*
 * Firmen-Box Titlebar: Inhalt leicht anheben (Lift). Nur px — mm in calc() ist in WebKit/Blink unzuverlässig.
 * :has() + Body-Klasse .spn26-job-single-boxed-titlebar (functions.php / JS) — inkl. Firefox.
 */
body.spn26-job-single.spn26-hero-body:has(#titlebar .single.titlebar-boxed-company-info),
body.spn26-job-single.spn26-hero-body:has(#wrapper #titlebar .single.titlebar-boxed-company-info) {
    --spn26-job-single-content-lift: calc(20px + 0.45cm + 0.65rem);
}

body.spn26-job-single.spn26-hero-body.spn26-job-single-boxed-titlebar {
    --spn26-job-single-content-lift: calc(20px + 0.45cm + 0.65rem);
}

/* Spezifität ≥ Nuclear-Block mit html[data-spn26-template="1"] (Job-Einzel setzt data-spn26-template per Script). */
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper,
body.spn26-job-single.spn26-hero-body #wrapper {
    padding-top: calc(var(--spn26-measured-sticky-header-bottom, 5.25rem) + var(--spn26-job-single-nudge-y, 0px) - var(--spn26-job-single-content-lift, 0px)) !important;
}

/*
 * Job-Einzel: lange Ortstexte — Flex-Spalten dürfen schrumpfen (min-width:0).
 * Kein max-width auf [class*="col-"]: würde Bootstraps Spalten-max-width (z. B. 66,67 %) überschreiben
 * und das Zweispalten-Layout zerstören. Umbrechen bleibt an .single_job_listing / .job_description usw.
 */
body.spn26-job-single.spn26-hero-body #wrapper .container,
body.spn26-job-single.spn26-hero-body #wrapper .container > .row {
    box-sizing: border-box;
}

body.spn26-job-single.spn26-hero-body #wrapper .row > [class*="col-"] {
    min-width: 0;
}

body.spn26-job-single.spn26-hero-body .single_job_listing,
body.spn26-job-single.spn26-hero-body .single_job_listing ul.meta,
body.spn26-job-single.spn26-hero-body .single_job_listing ul.meta li,
body.spn26-job-single.spn26-hero-body .job-listing-meta,
body.spn26-job-single.spn26-hero-body .job_description,
body.spn26-job-single.spn26-hero-body .company-info-boxed,
body.spn26-job-single.spn26-hero-body .job-listing-about,
body.spn26-job-single.spn26-hero-body .listing .job_listing,
body.spn26-job-single.spn26-hero-body .wpjm-single-job__overview,
body.spn26-job-single.spn26-hero-body .job-overview,
body.spn26-job-single.spn26-hero-body .job-overview-content {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

body.spn26-job-single.spn26-hero-body #titlebar .listing-title,
body.spn26-job-single.spn26-hero-body #titlebar .listing-title :is(h1, h2, h3, h4),
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title :is(h1, h2, h3, h4) {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Parent-Theme: kein zusätzliches padding-top im Inhalts-Container unter #wrapper (Doppelabstand). */
/* Ausnahme: main.spn26-job-results-main — dort padding-top 5mm (Suchergebnisse), nicht überschreiben. */
body.spn26-hero-body.spn26-job-results #wrapper #main,
body.spn26-hero-body.spn26-job-results #wrapper .site-content,
body.spn26-hero-body.spn26-job-results #wrapper main.site-main:not(.spn26-job-results-main),
body.spn26-job-single.spn26-hero-body #wrapper #main,
body.spn26-job-single.spn26-hero-body #wrapper .site-content,
body.spn26-job-single.spn26-hero-body #wrapper main.site-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/*
 * Job-Einzel: Seitenfläche einfarbig (--spn26-job-single-page-bg) — keine Verläufe (Theme-Titlebar / Wrapper).
 */
html[data-spn26-template="1"]:has(body.spn26-job-single.spn26-hero-body) {
    background: var(--spn26-job-single-page-bg) !important;
    background-color: var(--spn26-job-single-page-bg) !important;
    background-image: none !important;
}

/* Firefox / ohne :has() am documentElement — Klasse spn26-doc-job-single per language_attributes */
html.spn26-doc-job-single {
    background: #fafafa !important;
    background-color: #fafafa !important;
    background-image: none !important;
}

body.spn26-job-single.spn26-hero-body,
body.spn26-job-single.spn26-hero-body #wrapper,
body.spn26-job-single.spn26-hero-body #page,
body.spn26-job-single.spn26-hero-body .site-content,
body.spn26-job-single.spn26-hero-body #content,
body.spn26-job-single.spn26-hero-body #main,
body.spn26-job-single.spn26-hero-body main.site-main,
body.spn26-job-single.spn26-hero-body .page-content,
body.spn26-job-single.spn26-hero-body .single_job_listing,
body.spn26-job-single.spn26-hero-body .job-listing,
body.spn26-job-single.spn26-hero-body .job-listing-meta {
    background: var(--spn26-job-single-page-bg) !important;
    background-color: var(--spn26-job-single-page-bg) !important;
    background-image: none !important;
}

/*
 * Workscout: Firmen-Box — Abstand oben: padding statt margin (kein Margin-Collapse mit #titlebar in Safari/WebKit).
 * 5mm; !important gegen Theme-Overrides.
 */
body.spn26-job-single.spn26-hero-body #titlebar .single.titlebar-boxed-company-info,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .single.titlebar-boxed-company-info,
body.spn26-job-single.spn26-hero-body .single.titlebar-boxed-company-info,
body.spn26-job-single.spn26-hero-body #wrapper .single.titlebar-boxed-company-info {
    margin-top: 0 !important;
    padding-top: 19px !important;
    box-sizing: border-box !important;
    background: var(--spn26-job-single-page-bg) !important;
    background-color: var(--spn26-job-single-page-bg) !important;
    background-image: none !important;
}

body.spn26-job-single.spn26-hero-body #titlebar::before,
body.spn26-job-single.spn26-hero-body #titlebar::after,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar::before,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar::after,
body.spn26-job-single.spn26-hero-body #titlebar .parallax::before,
body.spn26-job-single.spn26-hero-body #titlebar .parallax::after,
body.spn26-job-single.spn26-hero-body #titlebar .parallax-content::before,
body.spn26-job-single.spn26-hero-body #titlebar .parallax-content::after {
    display: none !important;
    content: none !important;
    background: none !important;
    background-image: none !important;
}

/*
 * Job-Einzel: Doppelte Typ-/Slug-Zeilen nur im Listing-Inhalt dämpfen (nicht global #wrapper).
 * Kategorie-/Status-Zeile in der Titlebar ist per CSS ausgeblendet; Chips bleiben im Jobtitel (h1).
 */
body.spn26-job-single.spn26-hero-body #wrapper .single_job_listing .job-type:not(.spn26-job-neu-meta),
body.spn26-job-single.spn26-hero-body #wrapper .single_job_listing .new_job,
body.spn26-job-single.spn26-hero-body #wrapper .single_job_listing ul.job-types:not(:has(.spn26-job-detail-neu-badge)):not(:has(li.spn26-job-neu-meta)),
body.spn26-job-single.spn26-hero-body #wrapper .single_job_listing .job-types:not(input):not(select):not(textarea),
body.spn26-job-single.spn26-hero-body #wrapper .single_job_listing :is(span, li)[class*="job_listing_type-"],
body.spn26-job-single.spn26-hero-body #wrapper .single_job_listing span:is(.freier-dienstvertrag, .geringfuegig, .teilzeit, .vollzeit, .vz-tz, .full-time, .part-time, .freelance, .temporary, .internship, .remote, .hybrid, .contract) {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    pointer-events: none !important;
}

/* Meta-UL mit NEU-Chip: nur fremde Einträge ausblenden (NEU-Chip liegt wieder im Titlebar-h1) */
body.spn26-job-single.spn26-hero-body #wrapper .single_job_listing ul.job-types:has(.spn26-job-detail-neu-badge) > li:not(.spn26-job-detail-neu-badge),
body.spn26-job-single.spn26-hero-body #wrapper .single_job_listing ul.job-types:has(li.spn26-job-neu-meta) > li:not(.spn26-job-neu-meta) {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    pointer-events: none !important;
}

/*
 * Titlebar: alle Kategorie-/Taxonomie-Bezeichnungen ausblenden (inkl. BEM listing__category, job_category, DE „kategor“).
 * Ausnahmen: .listing-title (Jobtitel + Chips) und .listing-types (NEU-Zeile).
 */
body.spn26-job-single.spn26-hero-body #titlebar .listing-category,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-category,
body.spn26-job-single.spn26-hero-body #titlebar .listing-categories,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-categories,
body.spn26-job-single.spn26-hero-body #titlebar .job-categories,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .job-categories,
body.spn26-job-single.spn26-hero-body #titlebar .job-category,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .job-category,
body.spn26-job-single.spn26-hero-body #titlebar .job-manager-categories,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .job-manager-categories,
body.spn26-job-single.spn26-hero-body #titlebar .job-listing-category,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .job-listing-category,
body.spn26-job-single.spn26-hero-body #titlebar .job-listing-categories,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .job-listing-categories,
body.spn26-job-single.spn26-hero-body #titlebar .job-listing-header__category,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .job-listing-header__category,
body.spn26-job-single.spn26-hero-body #titlebar .listing-type,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-type,
body.spn26-job-single.spn26-hero-body #titlebar [class*="job-categor"],
body.spn26-job-single.spn26-hero-body #wrapper #titlebar [class*="job-categor"],
body.spn26-job-single.spn26-hero-body #titlebar [class*="job_category"],
body.spn26-job-single.spn26-hero-body #wrapper #titlebar [class*="job_category"],
body.spn26-job-single.spn26-hero-body #titlebar [class*="listing-categor"],
body.spn26-job-single.spn26-hero-body #wrapper #titlebar [class*="listing-categor"],
body.spn26-job-single.spn26-hero-body #titlebar [class*="categor"]:not(.listing-title):not(.listing-title *):not(.listing-types):not(.listing-types *),
body.spn26-job-single.spn26-hero-body #wrapper #titlebar [class*="categor"]:not(.listing-title):not(.listing-title *):not(.listing-types):not(.listing-types *),
body.spn26-job-single.spn26-hero-body #titlebar [class*="kategor"]:not(.listing-title):not(.listing-title *):not(.listing-types):not(.listing-types *),
body.spn26-job-single.spn26-hero-body #wrapper #titlebar [class*="kategor"]:not(.listing-title):not(.listing-title *):not(.listing-types):not(.listing-types *),
body.spn26-job-single.spn26-hero-body #titlebar [class*="taxonomy"]:not(.listing-title):not(.listing-title *):not(.listing-types):not(.listing-types *),
body.spn26-job-single.spn26-hero-body #wrapper #titlebar [class*="taxonomy"]:not(.listing-title):not(.listing-title *):not(.listing-types):not(.listing-types *),
body.spn26-job-single.spn26-hero-body #titlebar a[href*="job_listing_category"],
body.spn26-job-single.spn26-hero-body #wrapper #titlebar a[href*="job_listing_category"],
body.spn26-job-single.spn26-hero-body #titlebar a[href*="/job-category/"],
body.spn26-job-single.spn26-hero-body #wrapper #titlebar a[href*="/job-category/"],
body.spn26-job-single.spn26-hero-body #titlebar a[href*="job_categories"],
body.spn26-job-single.spn26-hero-body #wrapper #titlebar a[href*="job_categories"],
body.spn26-job-single.spn26-hero-body #titlebar .posted-in,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .posted-in,
body.spn26-job-single.spn26-hero-body #titlebar .job-listing-meta .job-listing-category,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .job-listing-meta .job-listing-category {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
}

/*
 * Kategorie oberhalb des Titels: oft innerhalb .listing-title oder als direktes Kind von .titlebar-boxed —
 * die allgemeinen Titlebar-Regeln schließen mit :not(.listing-title *) Nachfahren von .listing-title aus.
 */
body.spn26-job-single.spn26-hero-body #titlebar .listing-title .listing-category,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title .listing-category,
body.spn26-job-single.spn26-hero-body #titlebar .listing-title .listing-categories,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title .listing-categories,
body.spn26-job-single.spn26-hero-body #titlebar .listing-title .job-categories,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title .job-categories,
body.spn26-job-single.spn26-hero-body #titlebar .listing-title .job-category,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title .job-category,
body.spn26-job-single.spn26-hero-body #titlebar .listing-title .job-manager-categories,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title .job-manager-categories,
body.spn26-job-single.spn26-hero-body #titlebar .listing-title .job-listing-category,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title .job-listing-category,
body.spn26-job-single.spn26-hero-body #titlebar .listing-title .job-listing-categories,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title .job-listing-categories,
body.spn26-job-single.spn26-hero-body #titlebar .listing-title .job-listing-header__category,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title .job-listing-header__category,
body.spn26-job-single.spn26-hero-body #titlebar .listing-title .listing-type,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title .listing-type,
body.spn26-job-single.spn26-hero-body #titlebar .listing-title [class*="job-categor"]:not(.listing-types):not(.listing-types *):not(ul.job-types):not(ul.job-types *),
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title [class*="job-categor"]:not(.listing-types):not(.listing-types *):not(ul.job-types):not(ul.job-types *),
body.spn26-job-single.spn26-hero-body #titlebar .listing-title [class*="job_category"]:not(.listing-types):not(.listing-types *):not(ul.job-types):not(ul.job-types *),
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title [class*="job_category"]:not(.listing-types):not(.listing-types *):not(ul.job-types):not(ul.job-types *),
body.spn26-job-single.spn26-hero-body #titlebar .listing-title [class*="listing-categor"]:not(.listing-types):not(.listing-types *):not(ul.job-types):not(ul.job-types *),
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title [class*="listing-categor"]:not(.listing-types):not(.listing-types *):not(ul.job-types):not(ul.job-types *),
body.spn26-job-single.spn26-hero-body #titlebar .listing-title [class*="kategor"]:not(.listing-types):not(.listing-types *):not(ul.job-types):not(ul.job-types *),
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title [class*="kategor"]:not(.listing-types):not(.listing-types *):not(ul.job-types):not(ul.job-types *),
body.spn26-job-single.spn26-hero-body #titlebar .listing-title [class*="categor"]:not(.listing-types):not(.listing-types *):not(ul.job-types):not(ul.job-types *),
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title [class*="categor"]:not(.listing-types):not(.listing-types *):not(ul.job-types):not(ul.job-types *),
body.spn26-job-single.spn26-hero-body #titlebar .listing-title a[href*="job_listing_category"],
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title a[href*="job_listing_category"],
body.spn26-job-single.spn26-hero-body #titlebar .listing-title a[href*="/job-category/"],
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title a[href*="/job-category/"],
body.spn26-job-single.spn26-hero-body #titlebar .listing-title a[href*="job_categories"],
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title a[href*="job_categories"],
body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1 > a[href*="/job-category/"],
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1 > a[href*="/job-category/"],
body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1 > a[href*="job_listing_category"],
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1 > a[href*="job_listing_category"],
body.spn26-job-single.spn26-hero-body #titlebar .single.titlebar-boxed-company-info > .listing-category,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .single.titlebar-boxed-company-info > .listing-category,
body.spn26-job-single.spn26-hero-body #titlebar .single.titlebar-boxed-company-info > .listing-categories,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .single.titlebar-boxed-company-info > .listing-categories,
body.spn26-job-single.spn26-hero-body #titlebar .single.titlebar-boxed-company-info > [class*="job-categor"]:not(.listing-title):not(.spn26-job-single-title-row),
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .single.titlebar-boxed-company-info > [class*="job-categor"]:not(.listing-title):not(.spn26-job-single-title-row),
body.spn26-job-single.spn26-hero-body #titlebar .single.titlebar-boxed-company-info > [class*="listing-categor"]:not(.listing-title):not(.spn26-job-single-title-row),
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .single.titlebar-boxed-company-info > [class*="listing-categor"]:not(.listing-title):not(.spn26-job-single-title-row),
body.spn26-job-single.spn26-hero-body #titlebar .single.titlebar-boxed-company-info > [class*="kategor"]:not(.listing-title):not(.spn26-job-single-title-row),
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .single.titlebar-boxed-company-info > [class*="kategor"]:not(.listing-title):not(.spn26-job-single-title-row),
body.spn26-job-single.spn26-hero-body #titlebar .breadcrumb,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .breadcrumb,
body.spn26-job-single.spn26-hero-body #titlebar .breadcrumbs,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .breadcrumbs,
body.spn26-job-single.spn26-hero-body #titlebar #breadcrumbs,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar #breadcrumbs {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Job-Einzel: Kategorie-Zeilen in Listing-Meta (unterhalb Titlebar) */
body.spn26-job-single.spn26-hero-body #wrapper .single_job_listing .listing-header .listing-category,
body.spn26-job-single.spn26-hero-body #wrapper .single_job_listing .listing-header .listing-categories,
body.spn26-job-single.spn26-hero-body #wrapper .single_job_listing .job-listing-meta .listing-category,
body.spn26-job-single.spn26-hero-body #wrapper .single_job_listing .job-listing-meta .listing-categories,
body.spn26-job-single.spn26-hero-body #wrapper .single_job_listing .job-listing-meta .job-listing-category,
body.spn26-job-single.spn26-hero-body #wrapper .single_job_listing .job-listing-meta .job-listing-categories,
body.spn26-job-single.spn26-hero-body #wrapper .single_job_listing .job-listing-meta [class*="job-categor"],
body.spn26-job-single.spn26-hero-body #wrapper .single_job_listing .job-listing-meta [class*="listing-categor"],
body.spn26-job-single.spn26-hero-body #wrapper .single_job_listing .job-listing-meta a[href*="job_listing_category"],
body.spn26-job-single.spn26-hero-body #wrapper .single_job_listing .job-listing-meta a[href*="/job-category/"],
body.spn26-job-single.spn26-hero-body #wrapper .single_job_listing .job-listing-meta a[href*="job_categories"],
body.spn26-job-single.spn26-hero-body #wrapper .single_job_listing ul.meta a[href*="job_listing_category"],
body.spn26-job-single.spn26-hero-body #wrapper .single_job_listing ul.meta a[href*="/job-category/"],
body.spn26-job-single.spn26-hero-body #wrapper .single_job_listing .posted-in {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
}

/*
 * Titlebar: .listing-types nur mit „NEU“ (body.spn26-job-detail-neu); ohne NEU ausblenden — kein :has() nötig.
 */
body.spn26-job-single.spn26-hero-body:not(.spn26-job-detail-neu) #titlebar .listing-types,
body.spn26-job-single.spn26-hero-body:not(.spn26-job-detail-neu) #wrapper #titlebar .listing-types {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
}

body.spn26-job-single.spn26-hero-body.spn26-job-detail-neu #titlebar .listing-types,
body.spn26-job-single.spn26-hero-body.spn26-job-detail-neu #wrapper #titlebar .listing-types {
    display: inline-flex !important;
    align-items: center;
    align-self: flex-start !important;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: auto !important;
    max-width: 100%;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 0.35rem 0 !important;
    padding: 0 !important;
    position: static !important;
    left: auto !important;
    visibility: visible !important;
    overflow: visible !important;
    clip: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    border: 0 !important;
    line-height: 1 !important;
}

body.spn26-job-single.spn26-hero-body #titlebar .listing-types li.job-type:not(.spn26-job-neu-meta),
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-types li.job-type:not(.spn26-job-neu-meta) {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    pointer-events: none !important;
}

body.spn26-job-single.spn26-hero-body.spn26-job-detail-neu #titlebar .listing-types ul.job-types,
body.spn26-job-single.spn26-hero-body.spn26-job-detail-neu #wrapper #titlebar .listing-types ul.job-types {
    display: inline-flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/*
 * Titlebar: Stellenstatus „Offen“ o. ä. nutzt oft .job-type außerhalb der h1 — nur Chips in der Überschrift + NEU-li sichtbar.
 */
body.spn26-job-single.spn26-hero-body #titlebar .job-type,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .job-type,
body.spn26-job-single.spn26-hero-body #titlebar a.job-type,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar a.job-type {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
}

body.spn26-job-single.spn26-hero-body #titlebar .listing-title :is(h1, h2, h3, h4) .job-type,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title :is(h1, h2, h3, h4) .job-type,
body.spn26-job-single.spn26-hero-body #titlebar .listing-title :is(h1, h2, h3, h4) a.job-type,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title :is(h1, h2, h3, h4) a.job-type,
body.spn26-job-single.spn26-hero-body #titlebar .single.titlebar-boxed-company-info :is(h1, h2, h3, h4) .job-type,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .single.titlebar-boxed-company-info :is(h1, h2, h3, h4) .job-type,
body.spn26-job-single.spn26-hero-body #titlebar .single.titlebar-boxed-company-info :is(h1, h2, h3, h4) a.job-type,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .single.titlebar-boxed-company-info :is(h1, h2, h3, h4) a.job-type {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    border: none !important;
    pointer-events: auto !important;
    position: static !important;
    left: auto !important;
}

body.spn26-job-single.spn26-hero-body.spn26-job-single-neu-visible #titlebar li.spn26-job-detail-neu-badge,
body.spn26-job-single.spn26-hero-body.spn26-job-single-neu-visible #wrapper #titlebar li.spn26-job-detail-neu-badge,
body.spn26-job-single.spn26-hero-body.spn26-job-single-neu-visible #titlebar li.job-type.spn26-job-neu-meta,
body.spn26-job-single.spn26-hero-body.spn26-job-single-neu-visible #wrapper #titlebar li.job-type.spn26-job-neu-meta {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    border: none !important;
    pointer-events: auto !important;
    position: static !important;
    left: auto !important;
}

/*
 * Titlebar: Job-Manager-Meta (Datum o. ä.) — sichtbar halten.
 */
body.spn26-job-single.spn26-hero-body #titlebar .job-manager-meta,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .job-manager-meta {
    display: revert !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: revert !important;
    padding: revert !important;
    overflow: visible !important;
    clip: auto !important;
    border: revert !important;
    pointer-events: auto !important;
    position: revert !important;
}

/* Titlebar kompakt (Theme-Padding/min-height oft ~2cm+); gleiche Flächenfarbe wie Job-Einzel-Seite */
body.spn26-job-single.spn26-hero-body #titlebar,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar {
    padding-top: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    background: var(--spn26-job-single-page-bg) !important;
    background-color: var(--spn26-job-single-page-bg) !important;
    background-image: none !important;
}

body.spn26-job-single.spn26-hero-body #titlebar .container,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .container {
    padding-top: 0.35rem !important;
    padding-bottom: 0 !important;
    background: var(--spn26-job-single-page-bg) !important;
    background-color: var(--spn26-job-single-page-bg) !important;
    background-image: none !important;
}

body.spn26-job-single.spn26-hero-body #titlebar .parallax,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .parallax,
body.spn26-job-single.spn26-hero-body #titlebar .parallax-content,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .parallax-content {
    min-height: 0 !important;
    padding-top: 0 !important;
    background: var(--spn26-job-single-page-bg) !important;
    background-color: var(--spn26-job-single-page-bg) !important;
    background-image: none !important;
}

/*
 * Job-Einzel (Desktop): fester quadratischer History-Zurück-Button links (kein Text „Zurück zur Übersicht“).
 */
@media (min-width: 769px) {
    body.spn26-job-single.spn26-hero-body .spn26-job-desktop-history-back {
        position: fixed;
        left: max(1rem, env(safe-area-inset-left, 0px));
        top: 50%;
        /* translateZ(0): eigener Compositing-Layer — stabiler über Header/backdrop-filter (Safari/WebKit). */
        transform: translateY(-50%) translateZ(0);
        -webkit-transform: translateY(-50%) translateZ(0);
        z-index: 1001;
        box-sizing: border-box;
        width: 56px;
        height: 56px;
        min-width: 56px;
        min-height: 56px;
        margin: 0;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(15, 23, 42, 0.16);
        border-style: solid;
        border-radius: 8px;
        background: #ffffff;
        color: #0d4d69;
        box-shadow: 0 3px 14px rgba(15, 23, 42, 0.1);
        cursor: pointer;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        font: inherit;
        line-height: 0;
        vertical-align: middle;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    }

    body.spn26-job-single.spn26-hero-body .spn26-job-desktop-history-back svg {
        width: 30px;
        height: 30px;
        flex-shrink: 0;
        display: block;
        overflow: visible;
        pointer-events: none;
    }

    body.spn26-job-single.spn26-hero-body .spn26-job-desktop-history-back svg path {
        stroke-width: 2.25px;
        vector-effect: non-scaling-stroke;
    }

    body.spn26-job-single.spn26-hero-body .spn26-job-desktop-history-back:hover {
        background: #f8fafc;
        border-color: rgba(15, 23, 42, 0.26);
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
    }

    body.spn26-job-single.spn26-hero-body .spn26-job-desktop-history-back:focus-visible {
        outline: 2px solid rgba(13, 77, 105, 0.55);
        outline-offset: 3px;
    }
}

@media (max-width: 768px) {
    body.spn26-job-single.spn26-hero-body .spn26-job-desktop-history-back {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

body.spn26-job-single.spn26-hero-body #wrapper #titlebar :is(h1, h2, h3, h4) > span,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title :is(h1, h2, h3, h4) > span,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar span:is(.freier-dienstvertrag, .geringfuegig, .teilzeit, .vollzeit, .vz-tz, .full-time, .part-time, .freelance, .temporary, .internship, .remote, .hybrid, .contract),
body.spn26-job-single.spn26-hero-body #titlebar :is(h1, h2, h3, h4) > span,
body.spn26-job-single.spn26-hero-body #titlebar .listing-title :is(h1, h2, h3, h4) > span,
body.spn26-job-single.spn26-hero-body #titlebar span:is(.freier-dienstvertrag, .geringfuegig, .teilzeit, .vollzeit, .vz-tz, .full-time, .part-time, .freelance, .temporary, .internship, .remote, .hybrid, .contract) {
    display: inline !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: revert !important;
    padding: revert !important;
    overflow: visible !important;
    clip: auto !important;
    border: revert !important;
    pointer-events: auto !important;
}

/*
 * Titlebar: Jobtitel + Badges (z. B. „Vollzeit oder Teilzeit“, „NEU“) — Abstand & Ausrichtung
 */
body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1,
body.spn26-job-single.spn26-hero-body #titlebar .listing-title :is(h1, h2, h3, h4),
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title :is(h1, h2, h3, h4) {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    line-height: 1.25 !important;
    font-size: 48px !important;
    font-weight: 500 !important;
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important;
}

/*
 * NEU im Titlebar-h1: Schrift erzwingend weiß (h1 erzwingt -webkit-text-fill #333 auf Nachfahren in WebKit).
 */
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1 li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1 li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1 ul.job-types li.spn26-job-detail-neu-badge,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1 ul.job-types li.spn26-job-detail-neu-badge,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1 .new_job:not(a),
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1 .new_job:not(a),
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1 li.new_job,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1 li.new_job,
body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1 li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1 li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1 ul.job-types li.spn26-job-detail-neu-badge,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1 ul.job-types li.spn26-job-detail-neu-badge,
body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1 .new_job:not(a),
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1 .new_job:not(a),
body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1 li.new_job,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1 li.new_job,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar .titlebar-boxed-company-info h1 li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar .titlebar-boxed-company-info h1 li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
body.spn26-job-single.spn26-hero-body #titlebar .titlebar-boxed-company-info h1 li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .titlebar-boxed-company-info h1 li.spn26-job-detail-neu-badge.spn26-job-neu-meta {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    isolation: isolate;
}

/*
 * In der h1: job-types / NEU-Listen dürfen nicht die Titel-48px erben (Workscout packt ul teils in die h1).
 */
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1 ul.job-types,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1 ul.job-types,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar .titlebar-boxed-company-info h1 ul.job-types,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar .titlebar-boxed-company-info h1 ul.job-types,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1 ul.job-types > li,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1 ul.job-types > li {
    font-size: 0.625rem !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

/*
 * Workscout/Theme: Titel-Link im h1 (font-size oft nur auf dem <a>, z. B. ~24px) — gleiche Größe + Fett.
 */
body.spn26-job-single.spn26-hero-body #titlebar .listing-title :is(h1, h2, h3, h4) a:not(.job-type):not(.new_job),
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title :is(h1, h2, h3, h4) a:not(.job-type):not(.new_job) {
    font-size: 48px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important;
}

/* Varianten ohne .listing-title-Wrapper (z. B. boxed Titlebar) */
body.spn26-job-single.spn26-hero-body #titlebar .single.titlebar-boxed-company-info :is(h1, h2, h3, h4),
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .single.titlebar-boxed-company-info :is(h1, h2, h3, h4) {
    font-size: 48px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important;
}

body.spn26-job-single.spn26-hero-body #titlebar .single.titlebar-boxed-company-info :is(h1, h2, h3, h4) a:not(.job-type):not(.new_job),
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .single.titlebar-boxed-company-info :is(h1, h2, h3, h4) a:not(.job-type):not(.new_job) {
    font-size: 48px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important;
}

/*
 * Job-Einzel: Titel harte Priorität (Theme setzt oft 1.5rem / 24px auf h1 oder auf <a>/<span> im h1).
 * html[data-spn26-template] erhöht die Spezifität über Workscout/Customizer-!important.
 */
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar h1:first-of-type,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar h1:first-of-type,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar .spn26-job-single-title-row .listing-title h1,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar .spn26-job-single-title-row .listing-title h1,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1 {
    font-size: 48px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important;
    -webkit-text-size-adjust: 100%;
}

html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar h2:first-of-type,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar h2:first-of-type {
    font-size: 48px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important;
}

html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar h1:first-of-type a:not(.job-type):not(.new_job),
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar h1:first-of-type a:not(.job-type):not(.new_job),
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1 a:not(.job-type):not(.new_job),
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1 a:not(.job-type):not(.new_job),
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar h1:first-of-type a.job_title,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar h1:first-of-type a.job_title {
    font-size: 48px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important;
}

html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar h1:first-of-type > span:not(.job-type):not(.freier-dienstvertrag):not(.geringfuegig):not(.teilzeit):not(.vollzeit):not(.vz-tz):not(.full-time):not(.part-time):not(.freelance):not(.temporary):not(.internship):not(.remote):not(.hybrid):not(.contract),
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar h1:first-of-type > span:not(.job-type):not(.freier-dienstvertrag):not(.geringfuegig):not(.teilzeit):not(.vollzeit):not(.vz-tz):not(.full-time):not(.part-time):not(.freelance):not(.temporary):not(.internship):not(.remote):not(.hybrid):not(.contract),
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1 > span:not(.job-type):not(.freier-dienstvertrag):not(.geringfuegig):not(.teilzeit):not(.vollzeit):not(.vz-tz):not(.full-time):not(.part-time):not(.freelance):not(.temporary):not(.internship):not(.remote):not(.hybrid):not(.contract),
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1 > span:not(.job-type):not(.freier-dienstvertrag):not(.geringfuegig):not(.teilzeit):not(.vollzeit):not(.vz-tz):not(.full-time):not(.part-time):not(.freelance):not(.temporary):not(.internship):not(.remote):not(.hybrid):not(.contract) {
    font-size: 48px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important;
}

body.spn26-job-single.spn26-hero-body #titlebar .listing-title :is(h1, h2, h3, h4) span.job-type,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title :is(h1, h2, h3, h4) span.job-type,
body.spn26-job-single.spn26-hero-body #titlebar .listing-title :is(h1, h2, h3, h4) .job-type,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title :is(h1, h2, h3, h4) .job-type {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    align-self: center;
    margin: 0 !important;
    padding: 0.35rem 0.75rem !important;
    line-height: 1.25 !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    white-space: normal !important;
    max-width: min(100%, 20rem);
    text-align: center;
    box-sizing: border-box !important;
    vertical-align: middle;
}

/*
 * Job-Einzel Titlebar: NEU-Chip — eigenes Token (.spn26-job-detail-neu-badge), ohne .job-type (Theme-Kollisionen).
 * Hohe Spezifität (#titlebar ul.job-types li…) schlägt Workscout-Listen-Styles.
 */
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar ul.job-types li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar ul.job-types li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar .listing-types ul.job-types li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-types ul.job-types li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar .listing-types li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-types li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar ul.job-types li.job-type.spn26-job-neu-meta,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar ul.job-types li.job-type.spn26-job-neu-meta,
body.spn26-job-single.spn26-hero-body #titlebar ul.job-types li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar ul.job-types li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
body.spn26-job-single.spn26-hero-body #titlebar .listing-types ul.job-types li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-types ul.job-types li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
body.spn26-job-single.spn26-hero-body #titlebar .listing-types li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-types li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
body.spn26-job-single.spn26-hero-body #titlebar ul.job-types li.job-type.spn26-job-neu-meta,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar ul.job-types li.job-type.spn26-job-neu-meta {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0.12rem 0.42rem !important;
    min-height: 0 !important;
    font-family: inherit !important;
    font-size: 0.625rem !important;
    font-weight: 700 !important;
    font-style: normal !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    line-height: 1.25 !important;
    text-align: center !important;
    white-space: nowrap !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 transparent !important;
    list-style: none !important;
    list-style-type: none !important;
    background: #ea580c !important;
    background-color: #ea580c !important;
    background-image: none !important;
    border: none !important;
    border-radius: 5px !important;
    outline: none !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    max-width: min(100%, 20rem) !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    position: static !important;
    left: auto !important;
    pointer-events: auto !important;
    vertical-align: middle !important;
}

/*
 * WPJM/Workscout „NEW“ (.new_job) neben dem Titel: Theme vergibt oft .job-type + .new_job — ohne diese Regel
 * schlägt display:none von li.job-type:not(.spn26-job-neu-meta) bzw. die Titel-Schriftgröße erbt der Chip.
 */
body.spn26-job-single.spn26-hero-body #titlebar .listing-types li.new_job,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-types li.new_job,
body.spn26-job-single.spn26-hero-body #titlebar ul.job-types li.new_job,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar ul.job-types li.new_job,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1 .new_job,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1 .new_job,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar .listing-title .new_job,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title .new_job {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    left: auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0.12rem 0.42rem !important;
    overflow: visible !important;
    clip: auto !important;
    pointer-events: auto !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    flex: 0 0 auto !important;
    font-family: inherit !important;
    font-size: 0.625rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    list-style: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #ea580c !important;
    background-color: #ea580c !important;
    border: none !important;
    border-radius: 5px !important;
    vertical-align: middle !important;
}

/*
 * WPJM „listing-date new“ in der Titlebar-h1 (ohne .new_job-Klasse).
 */
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1 li.listing-date.new,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1 li.listing-date.new,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1 li.job-type.new,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1 li.job-type.new {
    display: inline-flex !important;
    font-size: 0.625rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    padding: 0.12rem 0.42rem !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #ea580c !important;
    background-color: #ea580c !important;
    border-radius: 5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    list-style: none !important;
}

/*
 * Workscout „boxed company titlebar“: oft kein .listing-title — h1:first-of-type setzt -webkit-text-fill #333 später.
 * Diese Regeln stehen absichtlich NACH den h1-Überschriften-Regeln (höhere Effektivität bei gleicher Kaskade).
 */
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar .single.titlebar-boxed-company-info h1 ul.job-types li.new_job,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar .single.titlebar-boxed-company-info h1 ul.job-types li.new_job,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar .single.titlebar-boxed-company-info h1 ul.job-types li.job-type.new,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar .single.titlebar-boxed-company-info h1 ul.job-types li.job-type.new,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar .single.titlebar-boxed-company-info h1 li.listing-date.new,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar .single.titlebar-boxed-company-info h1 li.listing-date.new,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar .single.titlebar-boxed-company-info h1 .new_job:not(a),
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar .single.titlebar-boxed-company-info h1 .new_job:not(a),
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar .single.titlebar-boxed-company-info .listing-types ul.job-types li.new_job,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar .single.titlebar-boxed-company-info .listing-types ul.job-types li.new_job,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar .single.titlebar-boxed-company-info .listing-types li.job-type.new,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar .single.titlebar-boxed-company-info .listing-types li.job-type.new,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar .single.titlebar-boxed-company-info h1 ul.job-types li.spn26-job-detail-neu-badge,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar .single.titlebar-boxed-company-info h1 ul.job-types li.spn26-job-detail-neu-badge {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    -webkit-text-stroke: 0 transparent !important;
    isolation: isolate;
    background: #ea580c !important;
    background-color: #ea580c !important;
}

/* Boxed Titlebar: „NEW“ als <a class="new_job"> oder <a class="job-type new"> im h1 — nicht wie Fließtext 48px */
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar .single.titlebar-boxed-company-info h1 a.new_job,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar .single.titlebar-boxed-company-info h1 a.new_job,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar .single.titlebar-boxed-company-info h1 a.job-type.new,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar .single.titlebar-boxed-company-info h1 a.job-type.new,
body.spn26-job-single.spn26-hero-body #titlebar .single.titlebar-boxed-company-info h1 a.new_job,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .single.titlebar-boxed-company-info h1 a.new_job,
body.spn26-job-single.spn26-hero-body #titlebar .single.titlebar-boxed-company-info h1 a.job-type.new,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .single.titlebar-boxed-company-info h1 a.job-type.new {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0.12rem 0.42rem !important;
    font-size: 0.625rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #ea580c !important;
    background-color: #ea580c !important;
    border-radius: 5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    vertical-align: middle !important;
}

/*
 * NEU-Chips: Titlebar-h1 (und optional alter Slot aus Cache).
 */
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body .spn26-job-single-neu-slot > li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1 > li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1 > li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body .spn26-job-single-neu-slot ul.job-types li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1 ul.job-types li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1 ul.job-types li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body .spn26-job-single-neu-slot .listing-types ul.job-types li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1 .listing-types ul.job-types li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1 .listing-types ul.job-types li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body .spn26-job-single-neu-slot .listing-types li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1 .listing-types li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1 .listing-types li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body .spn26-job-single-neu-slot ul.job-types li.job-type.spn26-job-neu-meta,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1 ul.job-types li.job-type.spn26-job-neu-meta,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1 ul.job-types li.job-type.spn26-job-neu-meta,
body.spn26-job-single.spn26-hero-body .spn26-job-single-neu-slot > li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1 > li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1 > li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
body.spn26-job-single.spn26-hero-body .spn26-job-single-neu-slot ul.job-types li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1 ul.job-types li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1 ul.job-types li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
body.spn26-job-single.spn26-hero-body .spn26-job-single-neu-slot .listing-types ul.job-types li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1 .listing-types ul.job-types li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1 .listing-types ul.job-types li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
body.spn26-job-single.spn26-hero-body .spn26-job-single-neu-slot .listing-types li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1 .listing-types li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1 .listing-types li.spn26-job-detail-neu-badge.spn26-job-neu-meta,
body.spn26-job-single.spn26-hero-body .spn26-job-single-neu-slot ul.job-types li.job-type.spn26-job-neu-meta,
body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1 ul.job-types li.job-type.spn26-job-neu-meta,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1 ul.job-types li.job-type.spn26-job-neu-meta {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0.12rem 0.42rem !important;
    min-height: 0 !important;
    font-family: inherit !important;
    font-size: 0.625rem !important;
    font-weight: 700 !important;
    font-style: normal !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    line-height: 1.25 !important;
    text-align: center !important;
    white-space: nowrap !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
    list-style: none !important;
    list-style-type: none !important;
    background: #ea580c !important;
    background-color: #ea580c !important;
    background-image: none !important;
    border: none !important;
    border-radius: 5px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
    width: auto !important;
    max-width: min(100%, 20rem) !important;
    height: auto !important;
    vertical-align: middle !important;
}

body.spn26-job-single.spn26-hero-body .spn26-job-single-neu-slot .listing-types li.new_job,
body.spn26-job-single.spn26-hero-body .spn26-job-single-neu-slot ul.job-types li.new_job,
body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1 .listing-types li.new_job,
body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1 ul.job-types li.new_job,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1 .listing-types li.new_job,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1 ul.job-types li.new_job,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body .spn26-job-single-neu-slot .listing-types li.new_job,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body .spn26-job-single-neu-slot ul.job-types li.new_job,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1 .listing-types li.new_job,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1 ul.job-types li.new_job,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1 .listing-types li.new_job,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1 ul.job-types li.new_job {
    display: inline-flex !important;
    font-size: 0.625rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    padding: 0.12rem 0.42rem !important;
    margin: 0 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #ea580c !important;
    background-color: #ea580c !important;
    border: none !important;
    border-radius: 5px !important;
    list-style: none !important;
}

body.spn26-job-single.spn26-hero-body .spn26-job-single-neu-slot li.listing-date.new,
body.spn26-job-single.spn26-hero-body .spn26-job-single-neu-slot li.job-type.new,
body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1 li.listing-date.new,
body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1 li.job-type.new,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1 li.listing-date.new,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1 li.job-type.new {
    display: inline-flex !important;
    font-size: 0.625rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    padding: 0.12rem 0.42rem !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #ea580c !important;
    background-color: #ea580c !important;
    border-radius: 5px !important;
    text-transform: uppercase !important;
    list-style: none !important;
}

/* NEU-Chips im Titel-h1: Schrift zuverlässig weiß (Theme-Overrides / -webkit-text-fill) */
body.spn26-job-single.spn26-hero-body .spn26-job-single-neu-slot :is(.new_job, .spn26-job-detail-neu-badge, .spn26-job-neu-meta, .listing-date.new, .job-type.new),
body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1 :is(.new_job, .spn26-job-detail-neu-badge, .spn26-job-neu-meta, .listing-date.new, .job-type.new),
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1 :is(.new_job, .spn26-job-detail-neu-badge, .spn26-job-neu-meta, .listing-date.new, .job-type.new),
body.spn26-job-single.spn26-hero-body .spn26-job-single-neu-slot :is(.new_job, .spn26-job-detail-neu-badge) *,
body.spn26-job-single.spn26-hero-body #titlebar .listing-title h1 :is(.new_job, .spn26-job-detail-neu-badge) *,
body.spn26-job-single.spn26-hero-body #wrapper #titlebar .listing-title h1 :is(.new_job, .spn26-job-detail-neu-badge) * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Firmen-Reiter: nichts abschneiden; Bewerbungs-Link klickbar über evtl. Overlays */
body.spn26-job-single.spn26-hero-body .company-info-boxed,
body.spn26-job-single.spn26-hero-body .company-info-boxed .company-info {
    overflow: visible !important;
    max-width: 100%;
    box-sizing: border-box;
}

/* Job-Einzel: Firmenlogo nur in schmaler/responsiver Ansicht ausblenden (Titlebar + Firmen-Reiter) */
@media screen and (max-width: 768px) {
    body.spn26-job-single.spn26-hero-body #titlebar img.company_logo,
    body.spn26-job-single.spn26-hero-body #wrapper #titlebar img.company_logo,
    body.spn26-job-single.spn26-hero-body #titlebar .company-info-boxed-logo,
    body.spn26-job-single.spn26-hero-body #wrapper #titlebar .company-info-boxed-logo,
    body.spn26-job-single.spn26-hero-body #titlebar .company-info-boxed-logo img,
    body.spn26-job-single.spn26-hero-body #wrapper #titlebar .company-info-boxed-logo img,
    body.spn26-job-single.spn26-hero-body .company-info-boxed img.company_logo,
    body.spn26-job-single.spn26-hero-body .company-info-boxed .company-info-boxed-logo,
    body.spn26-job-single.spn26-hero-body .company-info-boxed .company-info-boxed-logo img {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        border: 0 !important;
        pointer-events: none !important;
    }
}

body.spn26-job-single.spn26-hero-body .company-info-boxed .company-info-apply-btn,
body.spn26-job-single.spn26-hero-body .company-info-boxed a.apply-dialog-button,
body.spn26-job-single.spn26-hero-body .company-info-boxed a[class*="apply"] {
    position: relative;
    z-index: 3;
    pointer-events: auto !important;
    touch-action: manipulation;
    min-height: 44px;
    box-sizing: border-box;
}

/* Firmen-Reiter + Job-Detail-Inhalt: „Nachricht senden“ / Login-nachricht (Theme-Varianten) — nicht anzeigen */
body.spn26-job-single.spn26-hero-body .company-info-boxed a.send-message,
body.spn26-job-single.spn26-hero-body .company-info-boxed a.send-private-message,
body.spn26-job-single.spn26-hero-body .company-info-boxed a.company-send-message,
body.spn26-job-single.spn26-hero-body .company-info-boxed button.send-message,
body.spn26-job-single.spn26-hero-body .company-info-boxed a.open-send-message,
body.spn26-job-single.spn26-hero-body .company-info-boxed a.open-messaging-dialog,
body.spn26-job-single.spn26-hero-body .company-info-boxed a[href*="#send-message"],
body.spn26-job-single.spn26-hero-body .company-info-boxed a[href*="#Send-Message"],
body.spn26-job-single.spn26-hero-body .company-info-boxed a[href*="#private-message"],
body.spn26-job-single.spn26-hero-body .single_job_listing a.send-message,
body.spn26-job-single.spn26-hero-body .single_job_listing a.send-private-message,
body.spn26-job-single.spn26-hero-body .single_job_listing a.company-send-message,
body.spn26-job-single.spn26-hero-body .single_job_listing button.send-message,
body.spn26-job-single.spn26-hero-body .single_job_listing a.open-send-message,
body.spn26-job-single.spn26-hero-body .single_job_listing a.open-messaging-dialog,
body.spn26-job-single.spn26-hero-body .single_job_listing a[href*="#send-message"],
body.spn26-job-single.spn26-hero-body .single_job_listing a[href*="#Send-Message"],
body.spn26-job-single.spn26-hero-body .single_job_listing a[href*="#private-message"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    pointer-events: none !important;
}

/* Magnific Popup über .spn26-header (z-index ~1000) */
body.spn26-job-single.spn26-hero-body .mfp-bg {
    z-index: 10050 !important;
}

body.spn26-job-single.spn26-hero-body .mfp-wrap {
    z-index: 10051 !important;
}

/* Job-Einzel: Bookmark-Link + zugehöriger Dialog in der Titlebar (oberhalb der Details) ausblenden */
body.spn26-job-single.spn26-hero-body #titlebar a.remove-bookmark,
body.spn26-job-single.spn26-hero-body #titlebar .remove-bookmark,
body.spn26-job-single.spn26-hero-body #titlebar .bookmark-notice,
body.spn26-job-single.spn26-hero-body #titlebar #bookmark-dialog {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    border: 0 !important;
}

/*
 * Job-Einzel: Such-UI ausblenden (eigenes spn26-Formular ist entfernt; sichtbar bleibt oft
 * WorkScout-Titlebar / WPJM „search_jobs“ / Widgets — gleiche Optik wie „Suchtool oben“).
 */
body.spn26-job-single.spn26-hero-body .spn26-search-toolbar,
body.spn26-job-single.spn26-hero-body .spn26-search-container,
body.spn26-job-single.spn26-hero-body .spn26-job-single-search-band,
body.spn26-job-single.spn26-hero-body form.spn26-smart-search-form,
body.spn26-job-single.spn26-hero-body #titlebar .search_jobs,
body.spn26-job-single.spn26-hero-body #titlebar .search_jobs--field,
body.spn26-job-single.spn26-hero-body #titlebar .job-search,
body.spn26-job-single.spn26-hero-body #titlebar .job-search-form,
body.spn26-job-single.spn26-hero-body #titlebar form.search_jobs,
body.spn26-job-single.spn26-hero-body #titlebar .job_filters,
body.spn26-job-single.spn26-hero-body #titlebar .job-manager-search,
body.spn26-job-single.spn26-hero-body .search_jobs,
body.spn26-job-single.spn26-hero-body form.search_jobs,
body.spn26-job-single.spn26-hero-body .job_filters,
body.spn26-job-single.spn26-hero-body .job-manager-search,
body.spn26-job-single.spn26-hero-body .workscout-job-search,
body.spn26-job-single.spn26-hero-body .advanced-search-widget {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.spn26-search-toolbar .spn26-smart-btn,
.spn26-search-toolbar .spn26-search-reset,
.spn26-search-toolbar .spn26-jobtype-info-btn,
.spn26-search-toolbar .spn26-jobtype-chip,
.spn26-search-toolbar .spn26-bundesland-select {
    touch-action: manipulation;
}

.spn26-section--top-jobs .spn26-section-title {
    border-bottom: 1px solid rgba(var(--spn26-primary-rgb), 0.1);
    padding-bottom: 1.35rem;
    margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

.spn26-section--top-jobs .spn26-section-title p {
    font-size: clamp(1.05rem, 1.45vw, 1.2rem);
    font-weight: 500;
    color: var(--spn26-text-dark);
    opacity: 0.9;
    max-width: min(44rem, 100%);
}

/* TOP Jobs — Karten: Akzent, Schatten (nur #top-jobs-grid) */
#top-jobs-grid .spn26-top-job-card {
    padding-top: 1.65rem !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, #ffffff 35%, #eef4f7 100%);
    border: 1px solid rgba(var(--spn26-primary-rgb), 0.14);
    border-radius: calc(var(--spn26-border-radius) + 8px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.88) inset,
        0 -1px 0 rgba(var(--spn26-primary-rgb), 0.05) inset,
        0 4px 8px -2px rgba(15, 23, 42, 0.06),
        0 18px 42px -16px rgba(var(--spn26-primary-rgb), 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.65) inset;
}

#top-jobs-grid .spn26-top-job-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    z-index: 4;
    pointer-events: none;
    border-radius: calc(var(--spn26-border-radius) + 8px) calc(var(--spn26-border-radius) + 8px) 0 0;
    background: linear-gradient(
        90deg,
        #7ec8f0 0%,
        var(--spn26-primary-light) 48%,
        #0a3d52 100%
    );
    box-shadow: 0 1px 3px rgba(var(--spn26-primary-rgb), 0.28);
}

/* TOP Jobs — Listenansicht: kein blauer Kopf-Akzent (nur Raster behält ::before) */
#top-jobs-grid.spn26-view-list .spn26-top-job-card::before {
    display: none;
    content: none;
}

/* TOP Jobs — Listenansicht: weniger Rundung, dezente Schatten */
#top-jobs-grid.spn26-view-list .spn26-top-job-card {
    border-radius: 6px !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 4px 12px -4px rgba(15, 23, 42, 0.07),
        0 0 0 1px rgba(0, 0, 0, 0.05) !important;
}

#top-jobs-grid.spn26-view-list .spn26-top-job-card:hover {
    transform: translateY(-2px) scale(1.005);
    border-color: rgba(var(--spn26-primary-rgb), 0.22);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 3px 10px -2px rgba(15, 23, 42, 0.08),
        0 8px 18px -8px rgba(var(--spn26-primary-rgb), 0.12),
        0 0 0 1px rgba(var(--spn26-primary-rgb), 0.12) !important;
}

#top-jobs-grid.spn26-view-list .spn26-top-job-grid-item:focus-within .spn26-top-job-card {
    transform: translateY(-1px) scale(1.003);
    border-color: rgba(var(--spn26-primary-rgb), 0.28);
    box-shadow:
        0 0 0 2px rgba(var(--spn26-primary-rgb), 0.16),
        0 4px 12px -4px rgba(15, 23, 42, 0.08) !important;
}

#top-jobs-grid.spn26-view-list .spn26-top-logo {
    border-radius: 4px !important;
}

#top-jobs-grid.spn26-view-list .spn26-top-job-card-header {
    margin-bottom: 0 !important;
}

#top-jobs-grid .spn26-top-job-card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: rgba(var(--spn26-primary-rgb), 0.32);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 14px 32px -10px rgba(15, 23, 42, 0.12),
        0 32px 56px -20px rgba(var(--spn26-primary-rgb), 0.38),
        0 0 0 1px rgba(var(--spn26-primary-rgb), 0.15),
        0 0 40px -8px rgba(var(--spn26-primary-rgb), 0.22);
}

/* Fokus auf „Weiterlesen“ oder :focus-within am Grid-Item */
#top-jobs-grid .spn26-top-job-grid-item:focus-within .spn26-top-job-card {
    transform: translateY(-7px) scale(1.015);
    border-color: rgba(var(--spn26-primary-rgb), 0.38);
    box-shadow:
        0 10px 28px -8px rgba(var(--spn26-primary-rgb), 0.22),
        0 0 0 3px rgba(var(--spn26-primary-rgb), 0.22),
        0 24px 48px -18px rgba(var(--spn26-primary-rgb), 0.25);
}

@media (prefers-reduced-motion: reduce) {
    #top-jobs-grid .spn26-top-job-grid-item:hover .spn26-top-job-card,
    #top-jobs-grid .spn26-top-job-grid-item:focus-within .spn26-top-job-card {
        transform: none;
    }

    #top-jobs-grid .spn26-top-job-card:hover,
    #top-jobs-grid.spn26-view-list .spn26-top-job-card:hover,
    #top-jobs-grid.spn26-view-list .spn26-top-job-grid-item:focus-within .spn26-top-job-card {
        transform: none;
    }
}

/*
 * =============================================================================
 * KARDINALREGEL — SPOTLIGHT (#spotlight-cards-grid)
 * =============================================================================
 * v1 — vier Bereiche: (1) Logo (2) Einrichtungsname (3) Jobtitel (4) Ort + Weiterlesen.
 * Bereich 2: Vereinsname vollständig ausgeschrieben, Zeilenumbruch (kein Scrollbalken).
 * Bereich 3: Titel vollständig ausgeschrieben (Umbruch); Block um 3 mm nach oben (margin-top: -3mm).
 * Bereich 2: feste Höhe (max. 3 Zeilen), damit Titelzeilen über Karten hinweg auf gleicher Höhe starten.
 * v2 — Logo, Jobtitel, dann wie v1: Ort + Weiterlesen; Kurz-UI (Chip) einzeilig.
 * Änderungen an dieser Regel nur nach ausdrücklicher Anweisung.
 * =============================================================================
 */

/* Spotlight — gleiche Karten-Shell wie TOP Jobs (v1 + v2) */
#spotlight-cards-grid > .spn26-premium-card-wrapper {
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-height: 0;
    height: 100%;
}

#spotlight-cards-grid > .spn26-premium-card-wrapper > .spn26-spotlight-card-link {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    min-width: 0;
    width: 100%;
    text-decoration: none;
    color: inherit;
    border-radius: inherit;
    cursor: pointer;
}

#spotlight-cards-grid .spn26-spotlight-card-link:focus,
#spotlight-cards-grid .spn26-spotlight-card-link:focus-visible {
    outline: none;
}

/* Höhere Spezifität als .spn26-premium-card:hover (kein Doppel-Transform) */
#spotlight-cards-grid .spn26-spotlight-card-link:hover .spn26-premium-card.spn26-spotlight-card {
    transform: translateY(-10px) scale(1.02);
    border-color: rgba(var(--spn26-primary-rgb), 0.32) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 14px 32px -10px rgba(15, 23, 42, 0.12),
        0 32px 56px -20px rgba(var(--spn26-primary-rgb), 0.38),
        0 0 0 1px rgba(var(--spn26-primary-rgb), 0.15),
        0 0 40px -8px rgba(var(--spn26-primary-rgb), 0.22);
}

#spotlight-cards-grid .spn26-spotlight-card {
    position: relative;
    overflow-x: hidden;
    overflow-y: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 auto;
    width: 100%;
    min-height: 100%;
    height: 100%;
    box-sizing: border-box;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, #ffffff 35%, #eef4f7 100%);
    border: 1px solid rgba(var(--spn26-primary-rgb), 0.14) !important;
    border-radius: calc(var(--spn26-border-radius) + 8px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.88) inset,
        0 -1px 0 rgba(var(--spn26-primary-rgb), 0.05) inset,
        0 4px 8px -2px rgba(15, 23, 42, 0.06),
        0 18px 42px -16px rgba(var(--spn26-primary-rgb), 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.65) inset;
    color: var(--spn26-text-dark);
    transition: transform 0.4s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow 0.4s ease, border-color 0.35s ease;
    padding: 2rem 1.5rem 1.75rem !important;
}

/* Mindesthöhe Spotlight-Karten (−13 mm gegenüber früher 32/34 rem) */
#spotlight-cards-grid .spn26-premium-card-v1.spn26-spotlight-card {
    min-height: calc(32rem - 13mm);
}

#spotlight-cards-grid .spn26-premium-card-v2.spn26-spotlight-card {
    min-height: calc(34rem - 13mm);
}

/* Oberer Akzent (Spotlight): schmaler Farbstreifen wie TOP Jobs */
#spotlight-cards-grid .spn26-spotlight-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    z-index: 4;
    pointer-events: none;
    border-radius: calc(var(--spn26-border-radius) + 8px) calc(var(--spn26-border-radius) + 8px) 0 0;
    background: linear-gradient(
        90deg,
        #7ec8f0 0%,
        var(--spn26-primary-light) 48%,
        #0a3d52 100%
    );
    box-shadow: 0 1px 3px rgba(var(--spn26-primary-rgb), 0.28);
}

#spotlight-cards-grid .spn26-spotlight-card-link:focus-visible .spn26-spotlight-card {
    transform: translateY(-7px) scale(1.015);
    border-color: rgba(var(--spn26-primary-rgb), 0.38) !important;
    box-shadow:
        0 10px 28px -8px rgba(var(--spn26-primary-rgb), 0.22),
        0 0 0 3px rgba(var(--spn26-primary-rgb), 0.22),
        0 24px 48px -18px rgba(var(--spn26-primary-rgb), 0.25);
}

/* Gemeinsame Logo-Rahmen; exakte Maße je Variante unten */
#spotlight-cards-grid .spn26-card-logo-box {
    display: block;
    flex-shrink: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
    padding: 0;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid rgba(var(--spn26-primary-rgb), 0.22);
    background: #ffffff;
    overflow: hidden;
    position: relative;
}

/* v1: Rahmen 300×180 px (bei schmaler Karte max-width:100% proportional) */
#spotlight-cards-grid .spn26-premium-card-v1 .spn26-card-logo-box {
    width: 300px;
    max-width: 100%;
    aspect-ratio: 300 / 180;
    height: auto;
    margin-bottom: 0.65rem;
}

#spotlight-cards-grid .spn26-premium-card-v1 .spn26-card-logo-box img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* Vereins-/Firmenzeile (Spotlight v1) — ohne Rahmen, kompakt */
#spotlight-cards-grid .spn26-company.spn26-top-job-company {
    display: flex !important;
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0.65rem !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    padding: 0;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--spn26-primary) !important;
}

#spotlight-cards-grid .spn26-top-job-company-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    color: var(--spn26-primary);
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
}

/* v1 Bereich 2: feste Höhe → Titel (Bereich 3) starten über alle Karten auf gleicher Höhe; max. 3 Zeilen, Volltext im title */
#spotlight-cards-grid .spn26-premium-card-v1 .spn26-spotlight-v1-b2-institution .spn26-company.spn26-top-job-company {
    display: flex !important;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 100%;
    margin-bottom: 0 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: unset !important;
    align-items: flex-start;
}

#spotlight-cards-grid .spn26-premium-card-v1 .spn26-spotlight-v1-b2-institution .spn26-top-job-company-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    overflow-wrap: break-word;
    word-break: break-word;
}

#spotlight-cards-grid .spn26-top-job-company-icon {
    flex-shrink: 0;
    color: var(--spn26-primary);
    font-size: 1.1em;
}

/* v2: Jobtitel — mehrzeilig, voll sichtbar (Kardinalregel) */
#spotlight-cards-grid .spn26-premium-card-v2 h3.spn26-spotlight-job-title {
    display: block !important;
    width: 100%;
    min-width: 0;
    /* Gegen globale .spn26-premium-card-v2 h3: min-height: 4 Zeilen — sonst riesiger Abstand zur Infobox */
    min-height: 0 !important;
    -webkit-box-orient: unset !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    flex-shrink: 0;
    flex: 0 0 auto;
    align-self: stretch;
    margin: 2mm 0 0.35rem !important;
    padding: 0;
    font-size: clamp(1.08rem, 1.55vw, 1.38rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.38;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    text-align: left;
}

/* v2: Überschrift + Infotext als eine Einheit (kein Leerraum durch alte 4-Zeilen-Mindesthöhe) */
#spotlight-cards-grid .spn26-premium-card-v2 h3.spn26-spotlight-job-title + .spn26-spotlight-v2-info {
    margin-top: 0 !important;
}

/* v2: optionaler Infotext unter der Überschrift (Schriftgröße per Inline-Style aus Admin) */
#spotlight-cards-grid .spn26-premium-card-v2 .spn26-spotlight-v2-info {
    display: block;
    width: 100%;
    margin: 0 0 0.55rem;
    padding: 0;
    font-weight: 500;
    line-height: 1.45;
    color: rgba(33, 37, 41, 0.88);
    text-align: left;
    align-self: stretch;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* v1 Bereich 3: Titel vollständig ausgeschrieben (Umbruch); Block siehe .spn26-spotlight-v1-b3-jobtitle (−3mm) */
#spotlight-cards-grid .spn26-premium-card-v1 h3.spn26-spotlight-job-title {
    display: block !important;
    width: 100%;
    min-width: 0;
    flex-shrink: 0;
    margin: 0 !important;
    padding: 0;
    font-size: clamp(1.08rem, 1.55vw, 1.38rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.38;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    text-align: left;
}

/* Spotlight v1: ohne Haus-Icon; Vereinsname & Fließtext linksbündig */
#spotlight-cards-grid .spn26-premium-card-v1 .spn26-company.spn26-top-job-company {
    justify-content: flex-start;
    margin-top: 0 !important;
    align-items: flex-start;
}

/* v1 Bereich 2: Einrichtung — feste Höhe (3 Textzeilen), gleiche Titel-Startposition in der Rasterzeile */
#spotlight-cards-grid .spn26-premium-card-v1 .spn26-spotlight-v1-b2-institution {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    margin-top: 3mm;
    margin-bottom: 0.4rem;
    box-sizing: border-box;
    overflow: hidden;
    height: calc(1.05rem * 1.35 * 3);
    flex-shrink: 0;
}

/* v1 Bereich 3: Jobtitel (eigener Block unter Verein) — 3 mm nach oben */
#spotlight-cards-grid .spn26-spotlight-v1-b3-jobtitle {
    align-self: stretch;
    width: 100%;
    min-width: 0;
    margin-top: -3mm;
    margin-bottom: 0.65rem;
    box-sizing: border-box;
    overflow: visible;
}

#spotlight-cards-grid .spn26-spotlight-v1-b3-jobtitle h3.spn26-spotlight-job-title {
    width: 100%;
}

/* v1: Vereinsname — Zeilenhöhe bei Umbruch */
#spotlight-cards-grid .spn26-premium-card-v1 .spn26-spotlight-v1-b2-institution .spn26-top-job-company-name {
    text-align: left;
    line-height: 1.35;
}

#spotlight-cards-grid .spn26-premium-card-v1 .spn26-top-job-location-text,
#spotlight-cards-grid .spn26-premium-card-v2 .spn26-top-job-location-text {
    text-align: left;
    line-height: 1.35;
}

#spotlight-cards-grid .spn26-premium-card-v1 .spn26-top-job-location-row,
#spotlight-cards-grid .spn26-premium-card-v2 .spn26-top-job-location-row {
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 0.65rem;
}

#spotlight-cards-grid .spn26-premium-card-v1 .spn26-top-job-location,
#spotlight-cards-grid .spn26-premium-card-v2 .spn26-top-job-location {
    justify-content: flex-start;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    width: auto;
    max-width: none;
}

#spotlight-cards-grid .spn26-premium-card-v1 .spn26-top-job-location-icon,
#spotlight-cards-grid .spn26-premium-card-v2 .spn26-top-job-location-icon {
    margin-top: 0.12em;
    align-self: flex-start;
}

/* Ort-Block: volle Kartenbreite, linksbündig (Karte hat align-items:center); v1 + v2; Ort-Zeile −13 mm */
#spotlight-cards-grid .spn26-premium-card-v1 .spn26-card-content,
#spotlight-cards-grid .spn26-premium-card-v2.spn26-spotlight-card .spn26-card-content {
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1 1 auto;
    min-height: 0;
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
    margin-top: -6mm;
}

/* Ort + Chip: Ort darf umbrechen, Chip bleibt rechts */
#spotlight-cards-grid .spn26-top-job-location-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
    width: 100%;
    min-width: 0;
    margin-top: 0;
    padding-top: 0.95rem;
    flex-shrink: 0;
    align-self: stretch;
    box-sizing: border-box;
}

#spotlight-cards-grid .spn26-top-job-location {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex: 1 1 auto;
    flex-shrink: 1;
    margin: 0;
    padding: 0;
    font-size: 0.93rem;
    min-width: 0;
    width: auto;
    gap: 6px;
    text-align: left;
    overflow: visible;
}

#spotlight-cards-grid .spn26-top-job-location-text {
    display: block;
    min-width: 0;
    flex: 1 1 auto;
    white-space: normal;
    overflow: visible;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.35;
    text-align: left;
}

#spotlight-cards-grid .spn26-top-job-location-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: flex-start;
    justify-content: flex-start;
    line-height: 1;
    margin-top: 0.12em;
}

#spotlight-cards-grid .spn26-top-job-readmore {
    flex-shrink: 0;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--spn26-primary);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    border: 1px solid rgba(var(--spn26-primary-rgb), 0.28);
    background: rgba(255, 255, 255, 0.75);
    line-height: 1.25;
    white-space: nowrap;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

#spotlight-cards-grid .spn26-top-job-readmore .spn26-job-posting-icon {
    transition: transform 0.2s ease;
}

#spotlight-cards-grid .spn26-spotlight-card-link:hover .spn26-top-job-readmore {
    background: rgba(var(--spn26-primary-rgb), 0.08);
    border-color: rgba(var(--spn26-primary-rgb), 0.42);
    color: var(--spn26-primary);
}

#spotlight-cards-grid .spn26-spotlight-card-link:hover .spn26-top-job-readmore .spn26-job-posting-icon {
    transform: translate(2px, -1px);
}

/* v2: „Weiterlesen“ etwas größer, an v1-Chip angeglichen */
#spotlight-cards-grid .spn26-premium-card-v2 .spn26-top-job-readmore {
    font-size: 0.82rem;
    padding: 0.28rem 0.55rem;
}

/* v2: Rahmen 300×240 px */
#spotlight-cards-grid .spn26-premium-card-v2 .spn26-card-logo-box {
    width: 300px;
    max-width: 100%;
    aspect-ratio: 300 / 240;
    height: auto;
}

#spotlight-cards-grid .spn26-premium-card-v2 .spn26-card-logo-box img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    #spotlight-cards-grid .spn26-spotlight-card-link:hover .spn26-premium-card.spn26-spotlight-card,
    #spotlight-cards-grid .spn26-spotlight-card-link:focus-visible .spn26-spotlight-card {
        transform: none;
    }
}

.spn26-section--neue-jobs {
    background-color: var(--spn26-surface-0);
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: none;
}

/* Sektions-Ãœberschriften: Icons skalieren auf schmalen Viewports */
.spn26-section-heading-icon {
    font-size: 2.35rem;
    color: var(--spn26-primary);
    line-height: 1;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .spn26-section-heading-icon {
        font-size: 56px;
    }
}

.spn26-heading-weight-light {
    font-weight: 300;
}

.spn26-btn-icon {
    font-size: 1.25em;
    line-height: 1;
}

.spn26-btn-icon--search {
    font-size: 1.3em;
    margin-right: 6px;
    vertical-align: middle;
}

/* TOP Jobs: Inline-Styles in Klassen ausgelagert */
.spn26-job-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.spn26-top-job-card-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
    width: 100%;
    padding-right: 0;
    box-sizing: border-box;
}

.spn26-top-job-logo {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    padding: 4px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    border: 1px solid rgba(var(--spn26-primary-rgb), 0.18);
    background: transparent;
    box-shadow: none;
}

.spn26-top-job-logo img,
#top-jobs-grid .spn26-top-logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}

.spn26-top-job-company {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0 !important;
}

.spn26-top-job-company-name {
    font-weight: 500;
    font-size: 1rem;
    color: var(--spn26-text-muted);
}

.spn26-top-job-body {
    flex: 1;
    min-width: 0;
}

.spn26-top-job-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    margin-bottom: 1rem;
}

.spn26-top-job-title-row .spn26-top-job-title {
    flex: 1 1 auto;
    margin: 0;
    min-width: 0;
}

.spn26-top-job-neu-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0.2rem 0.65rem;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.2;
    color: #ffffff;
    text-transform: uppercase;
    background: #ea580c;
    border: 1px solid #c2410c;
    border-radius: 2px;
    box-shadow: none;
}

.spn26-top-job-title {
    color: var(--spn26-text-dark);
    margin: 0 0 1rem;
}

/* „Zum Jobposting“ / Weitere Infos — Icon neben Label (TOP Jobs, Spotlight, Job-Ergebnisse) */
.spn26-job-posting-icon {
    font-size: 1.1em;
    line-height: 1;
    flex-shrink: 0;
}

.spn26-top-job-location {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--spn26-text-muted);
    margin: 0;
}

.spn26-neue-jobs-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/*
 * WPJM [jobs]: „NEU“ in der Karten-Meta — nur unter .job_listing, nicht Job-Einzel-Titlebar
 * (sonst überschreibt0.68rem das Chip neben dem Jobtitel).
 */
.job_listings li.job_listing li.spn26-job-neu-meta,
.job_listings li.job_listing li.spn26-job-detail-neu-badge,
ul.job_listings > li.job_listing li.spn26-job-neu-meta,
ul.job_listings > li.job_listing li.spn26-job-detail-neu-badge {
    background: #ea580c !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    font-size: 0.68rem !important;
    border: 1px solid #c2410c !important;
    box-shadow: none !important;
}

.spn26-card-meta-icon {
    margin-right: 4px;
}

.spn26-view-btn-icon {
    font-size: 1.25em;
    margin-right: 6px;
    vertical-align: middle;
}

.spn26-top-job-company-icon,
.spn26-top-job-location-icon {
    color: var(--spn26-primary);
    font-size: 1.1em;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .spn26-top-job-card-header {
        padding-right: 0;
    }
}

.spn26-stats {
    margin-top: 1.5rem;
}

.spn26-stats-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    max-width: min(var(--spn26-hero-content-max), 100%);
    margin: 0 auto;
    padding: 1.25rem 0.75rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.spn26-stat-item {
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
    padding: 0.65rem 0.85rem;
    opacity: 0;
    animation: smoothScaleIn 0.8s ease-out forwards;
}

.spn26-stat-item:nth-child(2) {
    animation-delay: 0.1s;
}

.spn26-stat-item:nth-child(3) {
    animation-delay: 0.2s;
}

.spn26-stat-item:nth-child(4) {
    animation-delay: 0.3s;
}

.spn26-stat-item:last-child {
    border-right: none;
}

.spn26-stat-item .spn26-stat-value {
    font-size: clamp(2.15rem, 4vw, 3.35rem);
    font-weight: 900;
    color: #ffffff;
    margin: 0;
    line-height: 1.05;
    letter-spacing: -0.02em;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.spn26-stat-item .spn26-stat-label {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 0.35rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    line-height: 1.35;
    white-space: nowrap;
}

@keyframes smoothScaleIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(15px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .spn26-stat-item {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }
}

/* Tablet: 2×2 statt gequetschter Viererzeile */
@media (max-width: 1024px) and (min-width: 769px) {
    .spn26-stats-inner {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem 0.5rem !important;
        padding: 1rem 0.65rem !important;
    }

    .spn26-stat-item {
        border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-bottom: none !important;
        padding: 0.6rem 0.5rem !important;
    }

    .spn26-stat-item:nth-child(2n) {
        border-right: none !important;
    }

    .spn26-stat-item:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
        padding-bottom: 0.85rem !important;
    }

    .spn26-stat-item:nth-child(n + 3) {
        padding-top: 0.5rem !important;
    }
}

/* Why Us — Tab-artige Karten: farbiger Kopf + heller Textblock */
.spn26-why-us {
    padding: clamp(3.5rem, 8vw, 5.5rem) 5%;
    background:
        radial-gradient(ellipse 100% 70% at 50% -10%, rgba(var(--spn26-primary-rgb), 0.14), transparent 50%),
        linear-gradient(180deg, var(--spn26-surface-2) 0%, var(--spn26-surface-1) 45%, var(--spn26-surface-1) 100%);
}

.spn26-why-us-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.75rem, 3.5vw, 2.5rem);
    align-items: stretch;
    max-width: 1180px;
    margin: 0 auto;
}

.spn26-why-item {
    --spn26-why-accent: var(--spn26-primary);
    --spn26-why-accent2: var(--spn26-primary-light);
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: center;
    border-radius: calc(var(--spn26-border-radius) + 8px);
    background: var(--spn26-white);
    transition: transform 0.4s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow 0.4s ease, border-color 0.35s ease;
    border: 1px solid rgba(var(--spn26-primary-rgb), 0.14);
    box-shadow:
        0 2px 4px rgba(15, 23, 42, 0.04),
        0 16px 40px -12px rgba(var(--spn26-primary-rgb), 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.75) inset;
    overflow: hidden;
}

.spn26-why-item:hover {
    transform: translateY(-12px) scale(1.02);
    border-color: rgba(var(--spn26-primary-rgb), 0.28);
    box-shadow:
        0 12px 24px -8px rgba(15, 23, 42, 0.12),
        0 28px 56px -16px rgba(var(--spn26-primary-rgb), 0.35),
        0 0 52px -12px rgba(var(--spn26-primary-rgb), 0.32),
        0 0 0 1px rgba(255, 255, 255, 0.9) inset;
}

.spn26-why-item--fokus {
    --spn26-why-accent: #0a3d52;
    --spn26-why-accent2: #178a9c;
}

.spn26-why-item--qualitaet {
    --spn26-why-accent: #125a78;
    --spn26-why-accent2: #0d4d69;
}

.spn26-why-item--speed {
    --spn26-why-accent: #156b91;
    --spn26-why-accent2: #26a69a;
}

.spn26-why-item-head {
    position: relative;
    padding: clamp(1.75rem, 3vw, 2.15rem) 1.25rem 1.5rem;
    border-radius: calc(var(--spn26-border-radius) + 8px) calc(var(--spn26-border-radius) + 8px) 0 0;
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.14) 0%, transparent 42%),
        linear-gradient(135deg, var(--spn26-why-accent) 0%, var(--spn26-why-accent2) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.spn26-why-step {
    position: absolute;
    top: 0.65rem;
    right: 0.85rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1;
}

.spn26-why-item-head .spn26-why-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 1rem;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.spn26-why-item-head .spn26-why-icon .ph-duotone {
    font-size: 40px;
    color: #fff;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.spn26-why-item-head h3 {
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2.15rem);
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.15;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.spn26-why-item-body {
    flex: 1;
    padding: clamp(1.35rem, 2.5vw, 1.75rem) clamp(1.15rem, 2vw, 1.5rem) clamp(1.5rem, 2.5vw, 1.85rem);
    background: linear-gradient(180deg, #fdfeff 0%, #f5f8fa 100%);
    border-radius: 0 0 calc(var(--spn26-border-radius) + 8px) calc(var(--spn26-border-radius) + 8px);
    border-top: 1px solid rgba(255, 255, 255, 0.65);
}

.spn26-why-item-body p {
    font-size: clamp(0.98rem, 1.2vw, 1.08rem);
    color: var(--spn26-text-muted);
    line-height: 1.68;
    margin: 0;
    text-align: center;
}

@media (max-width: 900px) {
    .spn26-why-us-inner {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .spn26-why-item:hover {
        transform: translateY(-8px);
    }
}

/* Statistik auch auf schmalen Viewports sichtbar (vorher display:none = Inhalt für alle Nutzer verloren) */
@media (max-width: 768px) {
    .spn26-stats {
        text-align: center;
        padding-left: 20px;
        padding-right: 20px;
    }

    .spn26-stats-inner {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.85rem 0.5rem !important;
        justify-items: center !important;
        text-align: center !important;
        padding: 1rem 0.5rem !important;
    }

    .spn26-stat-item {
        border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-bottom: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0.5rem 0.35rem !important;
        box-sizing: border-box !important;
    }

    .spn26-stat-item:nth-child(2n) {
        border-right: none !important;
    }

    .spn26-stat-item:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
        padding-bottom: 0.75rem !important;
    }

    .spn26-stat-item:nth-child(n + 3) {
        padding-top: 0.45rem !important;
    }

    .spn26-stat-item .spn26-stat-value {
        font-size: clamp(1.85rem, 7vw, 2.45rem);
        text-align: center !important;
        width: 100% !important;
        display: block !important;
    }

    .spn26-stat-item .spn26-stat-label {
        font-size: 0.75rem;
        text-align: center !important;
        width: 100% !important;
        white-space: normal !important;
        line-height: 1.35 !important;
        hyphens: auto;
        -webkit-hyphens: auto;
    }
}

/* Sehr schmale Phones: eine Spalte, klare vertikale Trennung */
@media (max-width: 420px) {
    .spn26-stats-inner {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        padding: 0.75rem 0.5rem !important;
    }

    .spn26-stat-item {
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
        padding: 0.85rem 0.5rem !important;
    }

    .spn26-stat-item:last-child {
        border-bottom: none !important;
    }

    .spn26-stat-item .spn26-stat-value {
        font-size: clamp(2rem, 9vw, 2.6rem);
    }
}

.spn26-section-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
    padding-bottom: 1rem;
    border-bottom: none;
    text-align: left;
    max-width: min(1400px, 100%);
    margin-left: auto;
    margin-right: auto;
    gap: 1rem;
}

.spn26-section-title h2 {
    font-size: var(--spn26-type-section);
    font-weight: 800;
    color: var(--spn26-text-dark);
    margin: 0 0 0.35rem 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.15;
    display: flex;
    align-items: center;
    gap: 12px;
}

@media (max-width: 768px) {
    .spn26-section-title h2 {
        font-size: clamp(1.4rem, 5vw, 2.05rem);
        gap: 10px;
    }
}

.spn26-section-title h2 strong {
    font-weight: 900;
    color: var(--spn26-text-dark);
}

.spn26-section-title p {
    color: var(--spn26-text-muted);
    font-size: 1.0625rem;
    line-height: 1.55;
    margin: 0;
    max-width: min(42rem, 100%);
}

/* Ãœberschrift + Info-Button in einer Zeile (unmittelbar neben dem Titel) */
.spn26-section-heading-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
    margin: 0 0 0.35rem 0;
}

.spn26-section-heading-row h2 {
    margin: 0 !important;
    flex: 0 1 auto;
}

.spn26-section-info-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.38rem 0.75rem;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--spn26-primary) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.88) 100%);
    border: 1px solid rgba(var(--spn26-primary-rgb), 0.35);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 4px 14px -4px rgba(var(--spn26-primary-rgb), 0.35);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

.spn26-section-info-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--spn26-primary-rgb), 0.55);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 8px 22px -6px rgba(var(--spn26-primary-rgb), 0.45);
    background: rgba(255, 255, 255, 1);
}

.spn26-section-info-btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(var(--spn26-primary-rgb), 0.28),
        0 4px 14px -4px rgba(var(--spn26-primary-rgb), 0.35);
}

.spn26-section-info-btn__icon {
    font-size: 1.15em;
    opacity: 0.95;
}

.spn26-section-info-btn--topjobs {
    color: var(--spn26-accent-violet) !important;
    border-color: rgba(var(--spn26-accent-violet-rgb), 0.4);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 4px 14px -4px rgba(var(--spn26-accent-violet-rgb), 0.35);
}

.spn26-section-info-btn--topjobs:hover {
    border-color: rgba(var(--spn26-accent-violet-rgb), 0.6);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 8px 22px -6px rgba(var(--spn26-accent-violet-rgb), 0.42);
}

.spn26-section-info-btn--topjobs:focus-visible {
    box-shadow:
        0 0 0 3px rgba(var(--spn26-accent-violet-rgb), 0.28),
        0 4px 14px -4px rgba(var(--spn26-accent-violet-rgb), 0.35);
}

.spn26-btn-order {
    background: var(--spn26-accent-violet);
    color: #ffffff !important;
    padding: 0.28rem 0.65rem;
    border-radius: 2px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.68rem;
    transition: var(--spn26-transition);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    line-height: 1.2;
    white-space: nowrap;
    border: none;
    box-shadow: none;
}

.spn26-btn-order:hover {
    background: var(--spn26-accent-violet-hover);
    transform: none;
    box-shadow: none;
}

.spn26-btn-order .spn26-btn-icon {
    font-size: 1em;
}

/* Spotlight Jobs Grid (4 Spalten) — engerer Abstand = breitere Karten */
#spotlight-cards-grid.spn26-job-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.55rem !important;
    max-width: 1400px !important;
    width: 100% !important;
    margin: 0 auto !important;
    align-items: stretch !important;
}

/* TOP Jobs Grid (3 Columns) — minmax(0,1fr): gleiche Spaltenbreite trotz langem Text */
#top-jobs-grid.spn26-job-grid:not(.spn26-view-list) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3.35rem !important;
    max-width: 1400px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

/* TOP Jobs — nur Listenansicht: weniger Abstand zwischen Zeilen (Mobile feiner im 768px-Block) */
#top-jobs-grid.spn26-job-grid.spn26-view-list {
    gap: 0.85rem !important;
}

@media (min-width: 769px) and (max-width: 991px) {
    /* Eine Spalte, sonst 1100px-Regel würde 2 Spalten erzwingen */
    #top-jobs-grid.spn26-job-grid.spn26-view-list {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    html body .spn26-spotlight #spotlight-cards-grid.spn26-job-grid {
        gap: 0.75rem !important;
    }
}

@media (max-width: 1200px) {
    #spotlight-cards-grid.spn26-job-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    #top-jobs-grid.spn26-job-grid:not(.spn26-view-list) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    /* Cardinal Rule: 1 Column on Mobile. Absolute Specificity. */
    /* Spotlight: ID nötig, sonst setzt max-width:1200px #spotlight-cards-grid 2 Spalten (höhere Spezifität als .spn26-spotlight .spn26-job-grid). */
    html body .spn26-spotlight #spotlight-cards-grid.spn26-job-grid,
    #spotlight-cards-grid.spn26-job-grid,
    html body .spn26-spotlight .spn26-job-grid,
    html body .spn26-job-grid,
    html body #top-jobs-grid.spn26-job-grid,
    html body #top-jobs-grid.spn26-job-grid:not(.spn26-view-list),
    html body #neue-jobs-grid-container:not(.spn26-view-list) ul.job_listings {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        width: 100% !important;
        gap: 1.5rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: grid !important;
    }

    .spn26-company {
        display: flex !important;
        flex-wrap: wrap !important;
        white-space: normal !important;
        height: auto !important;
        align-items: center !important;
        gap: 6px !important;
        overflow: visible !important;
    }

    .spn26-company span {
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        display: block !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
    }
    
    .spn26-section {
        padding: 2rem 15px !important;
    }
}

.spn26-job-card {
    background: #ffffff;
    padding: 1.8rem;
    border-radius: var(--spn26-border-radius);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -2px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.spn26-job-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 15px 35px -5px rgba(var(--spn26-primary-rgb), 0.25), 0 0 0 1px rgba(var(--spn26-primary-rgb), 0.4);
    border-color: rgba(var(--spn26-primary-rgb), 0.3);
}

.spn26-job-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    transition: none;
    pointer-events: none;
    z-index: 10;
}

.spn26-job-card:hover::after {
    animation: shine 1.2s ease-out;
}

@keyframes shine {
    100% {
        left: 200%;
    }
}

.spn26-company-logo img {
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.spn26-job-card:hover .spn26-company-logo img,
.spn26-job-card:hover .spn26-top-logo img {
    transform: scale(1.08);
    /* Sanfter Zoom beim Logo */
}

.spn26-btn-details svg,
.spn26-card-action a svg {
    transition: transform 0.3s ease;
}

.spn26-job-card:hover .spn26-btn-details svg,
.spn26-job-card:hover .spn26-card-action a svg {
    transform: translateX(4px);
}

.spn26-job-tag {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(var(--spn26-primary-rgb), 0.1);
    color: var(--spn26-primary);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
}

.spn26-job-card h3 {
    margin: 0.5rem 0 1.25rem !important; /* Balanced distance from logo */
    font-size: 1.25rem;
    line-height: 1.35 !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    color: var(--spn26-text-dark) !important;
}

.spn26-company {
    color: var(--spn26-text-muted) !important;
    font-size: 1rem;
    margin-bottom: 1.5rem !important;
    font-weight: 500;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    overflow-wrap: break-word;
    word-break: break-word;
    display: block;
}

/* View Switcher Layout (TOP Jobs / NEUE Jobs — Text darf umbrechen, kein Überlauf) */
.spn26-view-switcher {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    margin-top: 1rem;
    max-width: 100%;
}

/* Sekundär: nur Umriss — Primär bleibt .spn26-btn-order in der gleichen Zeile */
.spn26-view-btn {
    background: transparent;
    border: 1px solid rgba(var(--spn26-accent-violet-rgb), 0.35);
    padding: 8px 12px;
    border-radius: 2px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--spn26-text-muted);
    transition: var(--spn26-transition);
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    align-content: center;
    text-align: center;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    width: auto;
    min-width: min(7.5rem, 100%);
    max-width: min(11rem, 100%);
    min-height: 2.75rem; /* ~44px — WCAG 2.2 Zielgröße (Touch / Maus) */
    box-shadow: none;
    box-sizing: border-box;
}

.spn26-view-btn.active {
    background: rgba(var(--spn26-accent-violet-rgb), 0.1);
    color: var(--spn26-accent-violet);
    border-color: var(--spn26-accent-violet);
    box-shadow: none;
}

.spn26-view-btn:focus-visible {
    outline: 2px solid var(--spn26-accent-violet);
    outline-offset: 2px;
}

@media (min-width: 992px) {
    /* List View Layout - Desktop Only */
    .spn26-job-grid.spn26-view-list {
        grid-template-columns: 1fr;
    }

    .spn26-view-list .spn26-job-card {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.5rem;
        /* More compact */
        gap: 1.5rem;
    }

    .spn26-view-list .spn26-job-card h3 {
        margin: 0;
        font-size: 1.1rem;
        flex: 1;
    }

    .spn26-view-list .spn26-job-card .spn26-company {
        margin: 0;
        width: 280px;
        font-size: 0.9rem;
    }

    .spn26-view-list .spn26-job-card p {
        margin: 0;
        width: 150px;
    }
}

@media (min-width: 769px) {
    /* TOP Jobs — Listenansicht: eine Zeile (Logo | Einrichtung | Titel | Ort | Link) */
    #top-jobs-grid.spn26-view-list .spn26-job-card {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        padding: 0.55rem 1.25rem !important;
        gap: 1.25rem !important;
    }

    #top-jobs-grid.spn26-view-list .spn26-card-header {
        width: auto !important;
        max-width: min(380px, 36vw) !important;
        flex: 0 1 min(380px, 36vw) !important;
        margin-bottom: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }

    #top-jobs-grid.spn26-view-list .spn26-top-logo {
        width: 52px !important;
        height: 52px !important;
        margin-right: 12px !important;
        flex-shrink: 0 !important;
    }

    #top-jobs-grid.spn26-view-list .spn26-top-job-company {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    #top-jobs-grid.spn26-view-list .spn26-top-job-company-name {
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.35 !important;
    }

    #top-jobs-grid.spn26-view-list .spn26-card-body {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        align-content: center !important;
        justify-content: flex-start !important;
        gap: 0.65rem 1.25rem !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    /* Titel vollständig lesbar (kein flex: 0%-Basis / kein Einzeilen-Ellipsis) */
    #top-jobs-grid.spn26-view-list .spn26-card-body h3 {
        margin: 0 !important;
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        flex: 1 1 12rem !important;
        min-width: 12rem !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }

    #top-jobs-grid.spn26-view-list .spn26-top-job-card .spn26-card-body h3.spn26-top-job-title {
        font-size: 1.08rem !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }

    /* Titel + NEU-Badge: Zeile übernimmt die frühere h3-Flexfläche in der Listenansicht */
    #top-jobs-grid.spn26-view-list .spn26-top-job-body > .spn26-top-job-title-row {
        flex: 1 1 12rem !important;
        min-width: 12rem !important;
        margin-bottom: 0 !important;
    }

    #top-jobs-grid.spn26-view-list .spn26-top-job-title-row .spn26-top-job-title {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    #top-jobs-grid.spn26-view-list .spn26-top-job-card {
        padding: 0.5rem 1.25rem 0.5rem 1rem !important;
    }

    #top-jobs-grid.spn26-view-list .spn26-card-body .spn26-top-job-location-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0.65rem !important;
        flex: 1 1 10rem !important;
        min-width: min(100%, 10rem) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #top-jobs-grid.spn26-view-list .spn26-card-body .spn26-top-job-location {
        margin: 0 !important;
        width: auto !important;
        max-width: 14rem !important;
        font-size: 0.9rem !important;
        color: var(--spn26-text-muted) !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
        line-height: 1.35 !important;
    }

    #top-jobs-grid.spn26-view-list .spn26-card-body .spn26-top-job-location .spn26-top-job-location-text {
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #top-jobs-grid.spn26-view-list .spn26-card-body .spn26-top-job-readmore {
        flex-shrink: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 2rem !important;
        min-width: auto !important;
        box-sizing: border-box !important;
        font-size: 0.75rem !important;
        line-height: 1.25 !important;
        padding: 0.28rem 0.5rem !important;
    }
}

/* TOP Jobs Layouts */

/* 1. Kartenansicht (Grid Mode - default or .spn26-view-list is missing) */
#top-jobs-grid:not(.spn26-view-list) .spn26-top-job-grid-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

#top-jobs-grid:not(.spn26-view-list) .spn26-job-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 1.5rem !important;
    gap: 0.5rem !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* Viel kleinere Abstände zwischen den Texten */
}

#top-jobs-grid:not(.spn26-view-list) .spn26-top-job-card {
    padding: 1.65rem 1.5rem 1.4rem !important;
}

/* Logo min. 96px hoch; Vereins-/Firmennamen vollständig (umbrechen, kein Ellipsis) */
#top-jobs-grid:not(.spn26-view-list) .spn26-top-job-card-header {
    flex-shrink: 0;
    min-height: 96px;
    height: auto;
    max-height: none;
    align-items: flex-start;
    box-sizing: border-box;
    overflow: visible;
}

#top-jobs-grid:not(.spn26-view-list) .spn26-top-job-company {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0 !important;
    white-space: normal;
    overflow: visible;
}

#top-jobs-grid:not(.spn26-view-list) .spn26-top-job-company-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    color: var(--spn26-primary);
    font-weight: 600;
    line-height: 1.35;
}

#top-jobs-grid:not(.spn26-view-list) .spn26-top-job-company-icon {
    flex-shrink: 0;
}

#top-jobs-grid:not(.spn26-view-list) .spn26-top-job-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    justify-content: flex-start;
    width: 100%;
    min-height: 0;
    margin-top: 0.35rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(var(--spn26-primary-rgb), 0.1);
}

/* Jobtitel vollständig (mehrzeilig); gegen Theme line-clamp / -webkit-box / nowrap */
#top-jobs-grid:not(.spn26-view-list) .spn26-top-job-title-row {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

html body #top-jobs-grid:not(.spn26-view-list) .spn26-top-job-card h3.spn26-top-job-title {
    font-size: clamp(1.15rem, 1.55vw, 1.4rem);
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
    letter-spacing: -0.02em;
    display: block !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    flex: 1 1 0% !important;
    flex-shrink: 1 !important;
    -webkit-box-orient: unset !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    min-height: unset !important;
    max-height: none !important;
}

#top-jobs-grid:not(.spn26-view-list) .spn26-job-card .spn26-company {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    color: var(--spn26-primary);
}

#top-jobs-grid:not(.spn26-view-list) .spn26-job-card p {
    font-size: 0.9rem;
    line-height: 1.3;
    margin: 0;
    color: var(--spn26-text-muted);
}

#top-jobs-grid:not(.spn26-view-list) .spn26-top-job-location-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    width: 100%;
    min-width: 0;
    margin-top: 0;
    padding-top: 0.5rem;
    flex-shrink: 0;
}

#top-jobs-grid:not(.spn26-view-list) .spn26-top-job-location {
    flex: 1 1 auto;
    flex-shrink: 1;
    margin: 0;
    padding: 0;
    font-size: 0.93rem;
    min-width: 0;
    width: auto;
}

/* TOP Jobs (Raster + Liste): Ort eine Zeile; Volltext im span[title] */
#top-jobs-grid .spn26-top-job-location-text {
    display: block;
    min-width: 0;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#top-jobs-grid:not(.spn26-view-list) .spn26-top-job-location-icon {
    flex-shrink: 0;
}

/* Dezenter „Weiterlesen“-Link rechts neben dem Ort (TOP Jobs Karten) */
#top-jobs-grid:not(.spn26-view-list) .spn26-top-job-readmore {
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.75rem;
    min-width: 2.75rem;
    box-sizing: border-box;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--spn26-primary);
    text-decoration: none;
    padding: 0.25rem 0.55rem;
    border-radius: 6px;
    border: 1px solid rgba(var(--spn26-primary-rgb), 0.28);
    background: rgba(255, 255, 255, 0.75);
    line-height: 1.25;
    white-space: nowrap;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

#top-jobs-grid:not(.spn26-view-list) .spn26-top-job-readmore .spn26-job-posting-icon {
    transition: transform 0.2s ease;
}

#top-jobs-grid:not(.spn26-view-list) .spn26-top-job-readmore:hover {
    background: rgba(var(--spn26-primary-rgb), 0.08);
    border-color: rgba(var(--spn26-primary-rgb), 0.42);
    color: var(--spn26-primary);
}

#top-jobs-grid:not(.spn26-view-list) .spn26-top-job-readmore:hover .spn26-job-posting-icon {
    transform: translate(2px, -1px);
}

#top-jobs-grid:not(.spn26-view-list) .spn26-top-job-readmore:focus-visible {
    outline: 2px solid rgba(var(--spn26-primary-rgb), 0.45);
    outline-offset: 2px;
}

/* 2. Listenansicht (List Mode) */
#top-jobs-grid.spn26-view-list .spn26-job-card {
    flex-direction: row !important;
    align-items: center !important;
    padding: 0.65rem 0.85rem !important;
    gap: 0.85rem !important;
}

#top-jobs-grid.spn26-view-list .spn26-top-job-card {
    align-items: center !important;
}

@media (max-width: 991px) {
    #top-jobs-grid.spn26-view-list .spn26-top-job-card {
        padding: 0.75rem 1rem !important;
    }
}

#top-jobs-grid.spn26-view-list .spn26-top-job-card h3.spn26-top-job-title {
    font-size: clamp(1rem, 1.1vw, 1.12rem);
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

#top-jobs-grid.spn26-view-list .spn26-job-card h3 {
    font-size: 1rem;
    margin: 0;
}

#top-jobs-grid.spn26-view-list .spn26-job-card .spn26-company {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.35;
}

#top-jobs-grid.spn26-view-list .spn26-job-card p {
    font-size: 0.85rem;
    margin: 0;
}

#top-jobs-grid.spn26-view-list .spn26-top-job-location-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
    margin: 0;
}

#top-jobs-grid.spn26-view-list .spn26-top-job-location {
    flex: 1 1 auto;
    min-width: 0;
}

#top-jobs-grid.spn26-view-list .spn26-top-job-readmore {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2rem;
    min-width: auto;
    box-sizing: border-box;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--spn26-primary);
    text-decoration: none;
    padding: 0.28rem 0.5rem;
    border-radius: 4px;
    border: 1px solid rgba(var(--spn26-primary-rgb), 0.28);
    background: rgba(255, 255, 255, 0.75);
    line-height: 1.25;
    white-space: nowrap;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

#top-jobs-grid.spn26-view-list .spn26-top-job-readmore .spn26-job-posting-icon {
    transition: transform 0.2s ease;
}

#top-jobs-grid.spn26-view-list .spn26-top-job-readmore:hover {
    background: rgba(var(--spn26-primary-rgb), 0.08);
    border-color: rgba(var(--spn26-primary-rgb), 0.42);
}

#top-jobs-grid.spn26-view-list .spn26-top-job-readmore:hover .spn26-job-posting-icon {
    transform: translate(2px, -1px);
}

#top-jobs-grid.spn26-view-list .spn26-top-job-readmore:focus-visible {
    outline: 2px solid rgba(var(--spn26-primary-rgb), 0.45);
    outline-offset: 2px;
}

.spn26-card-action {
    margin-top: 1.5rem;
}

.spn26-view-list .spn26-card-action {
    margin-top: 0 !important;
}

.spn26-view-list .spn26-job-card .spn26-company {
    margin-bottom: 0;
    min-width: 150px;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* WP Job Manager - Neue Jobs Grid/Card Mode Support */
#neue-jobs-grid-container {
    background: transparent !important;
}

/* Neue Jobs — Listenansicht: flachere Schatten (WPJM-Links als Zeilen) */
html body #neue-jobs-grid-container.spn26-view-list ul.job_listings li a.job_listing {
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 2px 8px -2px rgba(15, 23, 42, 0.06),
        0 0 0 1px rgba(0, 0, 0, 0.05) !important;
}

html body #neue-jobs-grid-container.spn26-view-list ul.job_listings li a.job_listing:hover {
    transform: translateY(-2px) !important;
    box-shadow:
        0 2px 6px rgba(15, 23, 42, 0.07),
        0 6px 16px -4px rgba(var(--spn26-primary-rgb), 0.12),
        0 0 0 1px rgba(var(--spn26-primary-rgb), 0.14) !important;
}

#neue-jobs-grid-container:not(.spn26-view-list) ul.job_listings {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2.5rem !important;
    padding: 0 !important;
    margin: 2rem 0 !important;
    list-style: none !important;
    background: transparent !important;
    border: none !important;
}

/* 1. Neutralize Theme LI/Listing wrappers (Transparent, No Border) */
#neue-jobs-grid-container:not(.spn26-view-list) ul.job_listings li,
#neue-jobs-grid-container:not(.spn26-view-list) ul.job_listings .job_listing {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    list-style: none !important;
}

/* 2. THE CARD (A-TAG): NUCLEAR STYLES - INCLUDING THE CLASS ON THE A TAG FOR SPECIFICITY */
html body #neue-jobs-grid-container:not(.spn26-view-list) .job_listings li a.job_listing {
    background-color: #ffffff !important; 
    padding: 2.22rem !important;
    border-radius: var(--spn26-border-radius) !important;
    border: 1px solid #dcdcdc !important; /* THE VISIBLE LIGHT GREY BORDER */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    display: flex !important;
    flex-direction: column !important; /* FORCE VERTICAL STACKING */
    align-items: flex-start !important;
    height: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important;
}

html body #neue-jobs-grid-container:not(.spn26-view-list) .job_listings li a.job_listing:hover {
    transform: translateY(-8px) !important;
    border-color: var(--spn26-primary) !important;
    box-shadow: 0 15px 30px rgba(var(--spn26-primary-rgb), 0.2) !important;
}

/* 3. LOGO CONTAINER: Reset Theme Layout */
body #neue-jobs-grid-container:not(.spn26-view-list) a.job_listing .listing-logo {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 1.2rem 0 !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
    position: static !important;
}

body #neue-jobs-grid-container:not(.spn26-view-list) a.job_listing .listing-logo img {
    width: 60px !important;
    height: 60px !important;
    display: block !important;
    object-fit: contain !important;
    border-radius: 10px !important;
    border: 1px solid #f0f0f0 !important;
    background: #ffffff !important;
    margin: 0 !important;
    position: static !important;
    float: none !important;
}

/* 4. TITLE AREA: Reset Theme Layout & Use FULL Width */
body #neue-jobs-grid-container:not(.spn26-view-list) a.job_listing .listing-title {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    display: block !important;
    position: static !important;
    background: none !important;
}

body #neue-jobs-grid-container:not(.spn26-view-list) a.job_listing .listing-title h3 {
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    margin: 0 0 0.8rem 0 !important;
    color: #111 !important;
    font-weight: 700 !important;
    display: block !important;
}

/* Hide Job Types (Vollzeit, Teilzeit etc) in card view */
#neue-jobs-grid-container:not(.spn26-view-list) .job_listing .listing-types-list,
#neue-jobs-grid-container:not(.spn26-view-list) .job_listing .job-type {
    display: none !important;
}

/* 5. ICONS & INFO: Reset Paddings & Display */
body #neue-jobs-grid-container:not(.spn26-view-list) a.job_listing .listing-icons {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.3rem !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body #neue-jobs-grid-container:not(.spn26-view-list) a.job_listing .listing-icons li {
    font-size: 0.95rem !important;
    color: var(--spn26-text-muted) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
}

/* Hide Expiration Date in card view */
#neue-jobs-grid-container:not(.spn26-view-list) .job_listing .listing-icons li:has(.listing-date),
#neue-jobs-grid-container:not(.spn26-view-list) .job_listing .listing-date {
    display: none !important;
}

/* Shine Effect (Match TOP Jobs) */
#neue-jobs-grid-container:not(.spn26-view-list) ul.job_listings li a::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    transition: none;
    pointer-events: none;
    z-index: 10;
}

#neue-jobs-grid-container:not(.spn26-view-list) ul.job_listings li a:hover::after {
    animation: shine 1.2s ease-out;
}

/* Hide 'Details' and 'NEW' Badge as requested */
#neue-jobs-grid-container:not(.spn26-view-list) .job_listing .new,
#neue-jobs-grid-container:not(.spn26-view-list) .job_listing .listing-date.new,
#neue-jobs-grid-container:not(.spn26-view-list) .job_listing a::before {
    display: none !important;
}

/* Hide clutter */
#neue-jobs-grid-container:not(.spn26-view-list) .job_listing .meta {
    display: none !important;
}
/* Responsive Grids have been consolidated in the 🚨 CRITICAL FIX block above 🚨 */

@media (max-width: 768px) {
    /* TOP Jobs nur Liste: weniger Abstand zwischen Kartenzeilen (überschreibt 1.5rem) */
    html body #top-jobs-grid.spn26-job-grid.spn26-view-list {
        gap: 0.65rem !important;
    }

    .spn26-view-list .spn26-job-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }

    /* Mobile Optimierung für TOP-Job-Liste */
    #top-jobs-grid.spn26-view-list .spn26-job-card {
        padding: 0.65rem 0.85rem !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.4rem !important;
    }

    #top-jobs-grid.spn26-view-list .spn26-card-header {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 0.35rem !important;
        flex-shrink: 1 !important;
    }

    #top-jobs-grid.spn26-view-list .spn26-card-body {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.28rem !important;
        width: 100% !important;
    }

    #top-jobs-grid.spn26-view-list .spn26-top-job-card h3.spn26-top-job-title {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }

    #top-jobs-grid.spn26-view-list .spn26-top-job-company-name {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }

    #top-jobs-grid.spn26-view-list .spn26-job-card .spn26-company,
    #top-jobs-grid.spn26-view-list .spn26-job-card h3,
    #top-jobs-grid.spn26-view-list .spn26-job-card p,
    #top-jobs-grid.spn26-view-list .spn26-job-card .spn26-top-job-location-row {
        width: 100% !important;
        max-width: 100% !important;
    }

    #top-jobs-grid.spn26-view-list .spn26-job-card h3 {
        line-height: 1.3;
        margin-bottom: 0.05rem;
    }

    #top-jobs-grid.spn26-view-list .spn26-job-card p {
        white-space: normal;
        line-height: 1.25;
    }

    #top-jobs-grid.spn26-view-list .spn26-top-job-readmore {
        min-height: 2.75rem !important;
        min-width: 2.75rem !important;
        padding: 0.22rem 0.48rem !important;
    }
}

/* Spotlight Special Branding (ältere .spn26-job-card-Variante; Raster: #spotlight-cards-grid) */
.spn26-spotlight .spn26-job-card {
    border: 1px solid #eee;
    background: var(--spn26-white);
    text-align: center;
    padding: 1.8rem;
    /* Mehr Padding für mehr Höhe */
    box-shadow: var(--spn26-shadow-soft);
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-height: 420px;
    /* Definierte Mindesthöhe für "höhere" Slider-Karten */
}

.spn26-spotlight .spn26-job-card .spn26-company-logo {
    width: 100%;
    aspect-ratio: 300 / 180;
    height: auto;
    margin: 0 auto 0.5rem;
    /* Weniger Abstand nach unten = Inhalte rücken nach oben */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    overflow: hidden;
    border: 1px solid #ccc;
    /* Etwas dunkler */
    border-radius: 8px;
    /* Passend zur Abrundung der Buttons */
}

.spn26-spotlight .spn26-job-card .spn26-company-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.spn26-spotlight .spn26-job-card {
    border: 1px solid #eee;
    background: var(--spn26-white);
    padding: 1rem;
    box-shadow: var(--spn26-shadow-soft);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Alles grundlegend zentrieren */
    height: 100%;
    text-align: center;
}

.spn26-spotlight-company {
    font-size: 0.9rem;
    /* Größer wie gewünscht */
    font-weight: 400;
    color: var(--spn26-text-muted);
    margin: 5px 0 4px;
    /* Reduziert für näher am Logo */
    width: 100%;
    overflow: visible;
    display: block;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.3;
}

.spn26-spotlight-title {
    font-size: 0.95rem;
    /* Etwas besser lesbar */
    font-weight: 600;
    color: var(--spn26-primary);
    margin: 5px 0 10px;
    text-align: left;
    align-self: flex-start;
    width: 100%;
    line-height: 1.2;
    height: auto;
    max-height: none;
    display: block;
    overflow: visible;
    overflow-wrap: break-word;
    word-break: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

.spn26-spotlight-location {
    font-size: 0.9rem;
    /* Größer wie gewünscht */
    font-weight: 600;
    color: #888;
    margin-bottom: 20px;
    width: 100%;
    min-height: 0;
    overflow: visible;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}

.spn26-spotlight .spn26-job-card .spn26-btn-details {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    border: 1px solid rgba(var(--spn26-primary-rgb), 0.45);
    color: var(--spn26-primary) !important;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    width: 140px;
    margin: auto auto 0 auto;
    transition: var(--spn26-transition);
    box-shadow: none;
}

.spn26-spotlight .spn26-job-card .spn26-btn-details:hover {
    background: rgba(var(--spn26-primary-rgb), 0.08);
    transform: translateY(-2px);
    box-shadow: none;
}

/*
 * Startseite / Hero: spn26-Footer kommt nach </div>#wrapper (footer.php). Doppelte Kopien
 * im Theme-Wrapper oder als zweites Geschwister-Element unterdrücken.
 */
body.spn26-hero-body #wrapper footer.spn26-footer {
    display: none !important;
}

body.spn26-hero-body footer.spn26-footer ~ footer.spn26-footer {
    display: none !important;
}

/* Footer — einheitlich weißer Hintergrund; Text & Links dunkelgrau */
.spn26-footer {
    color: var(--spn26-text-muted) !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    padding: 3rem 5% 0 5% !important;
    margin: 0 !important;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static;
    z-index: auto;
    clear: both;
}

body.spn26-job-single.spn26-hero-body .spn26-footer {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/*
 * Dokumentende: kein extra Abstand am Theme-Wrapper (auch template-home.php, nicht nur body.home).
 */
body.spn26-hero-body {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.spn26-hero-body #wrapper,
body.spn26-hero-body #page,
body.spn26-hero-body .site {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.spn26-footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
    max-width: 1200px;
    margin: 1rem auto 0;
    padding-top: 2rem;
    padding-bottom: 1.5rem;
    border-top: 1px solid rgba(15, 23, 42, 0.12);
}

/* Job-Einzel: Footer-Band weiß, Theme-Doppelkanten aus; Trennlinie wie überall auf .spn26-footer-content */
body.spn26-job-single.spn26-hero-body footer.spn26-footer,
body.spn26-job-single.spn26-hero-body .spn26-footer,
body.spn26-job-single.spn26-hero-body #wrapper .spn26-footer,
body.spn26-job-single.spn26-hero-body #page .spn26-footer {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    filter: none !important;
}

body.spn26-job-single.spn26-hero-body .spn26-footer-content,
body.spn26-job-single.spn26-hero-body #wrapper .spn26-footer-content {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border-top: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    filter: none !important;
}

body.spn26-job-single.spn26-hero-body .spn26-footer .spn26-accessibility-statement,
body.spn26-job-single.spn26-hero-body .spn26-footer .spn26-footer-links {
    background: transparent !important;
}

body.spn26-job-single.spn26-hero-body .spn26-footer::before,
body.spn26-job-single.spn26-hero-body .spn26-footer::after,
body.spn26-job-single.spn26-hero-body .spn26-footer-content::before,
body.spn26-job-single.spn26-hero-body .spn26-footer-content::after {
    display: none !important;
    content: none !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
}

body.spn26-job-single.spn26-hero-body .spn26-footer-content {
    margin-top: 0 !important;
}

body.spn26-job-single.spn26-hero-body #wrapper,
body.spn26-job-single.spn26-hero-body #page,
body.spn26-job-single.spn26-hero-body .site,
body.spn26-job-single.spn26-hero-body #main,
body.spn26-job-single.spn26-hero-body #content,
body.spn26-job-single.spn26-hero-body .site-content,
body.spn26-job-single.spn26-hero-body main.site-main,
body.spn26-job-single.spn26-hero-body .single_job_listing,
body.spn26-job-single.spn26-hero-body .job-listing,
body.spn26-job-single.spn26-hero-body .company-info-boxed,
body.spn26-job-single.spn26-hero-body .job-listing-tabs,
body.spn26-job-single.spn26-hero-body .workscout-apply-wrapper {
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

body.spn26-job-single.spn26-hero-body #wrapper > hr:last-of-type,
body.spn26-job-single.spn26-hero-body .site-content > hr:last-of-type,
body.spn26-job-single.spn26-hero-body #main > hr:last-of-type,
body.spn26-job-single.spn26-hero-body #content > hr:last-of-type {
    border: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    visibility: hidden !important;
}

body.spn26-job-single.spn26-hero-body #wrapper::before,
body.spn26-job-single.spn26-hero-body #wrapper::after,
body.spn26-job-single.spn26-hero-body #page::before,
body.spn26-job-single.spn26-hero-body #page::after,
body.spn26-job-single.spn26-hero-body #main::before,
body.spn26-job-single.spn26-hero-body #main::after,
body.spn26-job-single.spn26-hero-body #content::before,
body.spn26-job-single.spn26-hero-body #content::after,
body.spn26-job-single.spn26-hero-body .site-content::before,
body.spn26-job-single.spn26-hero-body .site-content::after {
    box-shadow: none !important;
    border: none !important;
    border-top: none !important;
    background: transparent none !important;
    background-image: none !important;
}

.spn26-footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.75rem;
}

.spn26-footer-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.65rem;
    margin: 0;
    border-radius: 0.5rem;
    color: var(--spn26-text-muted) !important;
    text-decoration: none !important;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.spn26-footer-link__icon {
    font-size: 1.05rem;
    opacity: 0.88;
    transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease;
}

.spn26-footer-link:hover {
    color: #1c98cb !important;
    background-color: rgba(28, 152, 203, 0.1);
    box-shadow: 0 2px 12px rgba(28, 152, 203, 0.12);
    transform: translateY(-1px);
}

.spn26-footer-link:hover .spn26-footer-link__icon {
    opacity: 1;
    transform: scale(1.08);
    color: #1c98cb;
}

.spn26-footer-link:focus-visible {
    outline: 2px solid #1c98cb;
    outline-offset: 3px;
    color: #1c98cb !important;
    background-color: rgba(28, 152, 203, 0.08);
}

/* Legacy: reine Text-Links ohne Wrapper-Klasse */
.spn26-footer-links a:not(.spn26-footer-link) {
    color: var(--spn26-text-muted) !important;
    text-decoration: none;
    font-size: 0.9rem;
}

.spn26-footer-links a:not(.spn26-footer-link):hover {
    color: #1c98cb !important;
}

.spn26-accessibility-statement {
    display: block !important;
    text-align: center;
    max-width: 1050px;
    font-size: 0.85rem;
    line-height: 1.6;
    margin-top: 1.5rem;
    color: var(--spn26-text-muted) !important;
    opacity: 1 !important;
}

.spn26-accessibility-statement strong {
    color: var(--spn26-text-dark) !important;
    font-weight: 700 !important;
}

/* Accessibility Tool */
.spn26-accessibility {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    background: var(--spn26-primary);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 1001;
}

/* Mobile Responsive */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Accessibility: Better Focus States */
:focus-visible {
    outline: 3px solid var(--spn26-primary-light);
    outline-offset: 3px;
}

/* Tablet/Mobile Breakpoints consolidated */
@media (max-width: 1200px), (hover: none) and (pointer: coarse) {
    .spn26-job-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Classic header: switch to hamburger already on tablets. */
    .spn26-nav,
    .spn26-nav-tools,
    .spn26-header-right {
        display: none;
    }

    .spn26-mobile-toggle {
        display: flex !important;
    }
}

@media (max-width: 768px) {
    .spn26-nav {
        display: none;
    }

    .spn26-nav-tools,
    .spn26-header-right {
        display: none;
    }

    .spn26-mobile-toggle {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        cursor: pointer;
        z-index: 1001;
        background: #fff;
        border-radius: 10px;
        border: 1px solid #eee;
        padding: 0;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(13, 77, 105, 0.2);
    }

    .spn26-mobile-toggle:focus:not(:focus-visible) {
        outline: none;
    }

    .spn26-mobile-toggle:focus-visible {
        outline: 3px solid var(--spn26-primary);
        outline-offset: 2px;
        box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px rgba(13, 77, 105, 0.45);
    }

    .spn26-mobile-toggle span {
        height: 3px;
        width: 24px;
        background: var(--spn26-primary);
        border-radius: 3px;
        transition: 0.3s;
        display: block;
    }

    /* Active Hamburger State Structure
     * Safari/WebKit: 100vh ≠ sichtbarer Bereich (URL-Leiste / Dynamic Island).
     * 100dvh + -webkit-overflow-scrolling verbessern Vollbild-Menü und Scroll. */
    .spn26-header.menu-open {
        flex-wrap: wrap;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        align-items: flex-start;
        align-content: flex-start;
    }

    .spn26-header.menu-open .spn26-logo {
        flex: 1;
        margin-bottom: 2rem;
    }

    .spn26-header.menu-open .spn26-mobile-toggle {
        position: fixed; /* Keep it always visible at the top right */
        top: max(15px, env(safe-area-inset-top, 0px));
        right: max(15px, env(safe-area-inset-right, 0px));
        margin: 0;
        z-index: 10000 !important;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        width: 48px;
        height: 48px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0; /* Gap reset for X state */
        border: 1px solid #ddd;
    }
    
    /* Ensure spans stay centered for the X appearance */
    .spn26-header.menu-open .spn26-mobile-toggle span {
        position: absolute;
    }

    /* Das Mobile-Menü ordentlich im Fluss unterordnen */
    .spn26-header.menu-open .spn26-nav-tools,
    .spn26-header.menu-open .spn26-header-right {
        display: flex;
        flex-direction: column;
        position: static;
        width: 100%;
        background: transparent;
        box-shadow: none;
        text-align: left;
        padding: 0;
    }

    .spn26-header.menu-open .spn26-user-nav {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 0;
    }

    /* Im geöffneten Mobile-Menü: CV Builder / Cover Letter wie normale Textlinks darstellen */
    .spn26-header.menu-open .spn26-nav-tools {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        gap: 0;
    }

    .spn26-header.menu-open .spn26-nav-tools a {
        color: var(--spn26-text-dark);
        font-weight: 500;
    }

    .spn26-header.menu-open .spn26-badge-new {
        display: none;
    }

    .spn26-header.menu-open .spn26-mobile-toggle span {
        position: absolute;
        width: 28px;
        height: 3px;
        left: 50%;
        top: 50%;
        background: var(--spn26-primary);
        border-radius: 2px;
    }

    .spn26-header.menu-open .spn26-mobile-toggle span:nth-child(1) {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .spn26-header.menu-open .spn26-mobile-toggle span:nth-child(2) {
        opacity: 0;
    }

    .spn26-header.menu-open .spn26-mobile-toggle span:nth-child(3) {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    /* Beide Menügruppen EXAKT identisch formatieren */
    .spn26-header.menu-open .spn26-user-nav a,
    .spn26-header.menu-open .spn26-nav-tools a {
        min-height: 44px;
        padding: 0.75rem 0;
        box-sizing: border-box;
        font-size: 1.05rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        color: var(--spn26-text-dark);
        text-decoration: none;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.5rem;
    }

    .spn26-header.menu-open .spn26-user-nav a:focus-visible,
    .spn26-header.menu-open .spn26-nav-tools a:focus-visible {
        outline: 3px solid var(--spn26-primary);
        outline-offset: -3px;
        border-radius: 6px;
        background-color: rgba(13, 77, 105, 0.06);
    }

    .spn26-header.menu-open .spn26-btn-post,
    .spn26-header.menu-open .spn26-btn-search {
        margin-top: 1rem;
        margin-bottom: 1rem;
        text-align: center;
        width: 100%;
        justify-content: center;
    }

    .spn26-header.menu-open .spn26-btn-search {
        margin-bottom: 3rem;
    }

    @media (prefers-reduced-motion: reduce) {
        .spn26-mobile-toggle span {
            transition: none !important;
        }
    }

    @media (prefers-contrast: more) {
        .spn26-mobile-toggle {
            border-color: #000000;
            border-width: 2px;
        }

        .spn26-header.menu-open .spn26-user-nav a,
        .spn26-header.menu-open .spn26-nav-tools a {
            border-bottom-color: rgba(0, 0, 0, 0.4);
        }
    }

    .spn26-hero h1 {
        font-size: 2.2rem;
    }

    .spn26-search-container {
        flex-direction: column;
        align-items: stretch;
        border-radius: 8px;
        padding: 1rem;
    }

    .spn26-smart-search-wrapper {
        flex-direction: column;
        background: transparent;
    }

    .spn26-smart-input {
        width: 100%;
        padding: 1rem;
        background: var(--spn26-hero-field-bg, #f1f5f9);
        color: var(--spn26-text-dark);
        -webkit-text-fill-color: var(--spn26-text-dark);
        border-radius: var(--spn26-hero-inner-radius, 4px);
    }

    .spn26-smart-btn {
        width: 100%;
        margin-top: 10px;
        margin-right: 0;
        border-radius: 8px;
        padding: 1rem;
    }

    /* Gegen WP-Desktop-!important: Hero-Suche wieder untereinander */
    main#spn26-main-content.spn26-hero form.spn26-search-container.spn26-smart-search-form,
    body.home .spn26-hero form.spn26-search-container.spn26-smart-search-form,
    body.spn26-hero-body .spn26-hero form.spn26-search-container.spn26-smart-search-form,
    html body .spn26-hero form.spn26-search-container.spn26-smart-search-form {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }

    main#spn26-main-content.spn26-hero form.spn26-search-container.spn26-smart-search-form > .spn26-smart-search-wrapper,
    body.home .spn26-hero form.spn26-search-container.spn26-smart-search-form > .spn26-smart-search-wrapper,
    body.spn26-hero-body .spn26-hero form.spn26-search-container.spn26-smart-search-form > .spn26-smart-search-wrapper,
    html body .spn26-hero form.spn26-search-container.spn26-smart-search-form > .spn26-smart-search-wrapper {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        align-content: stretch !important;
        grid-template-columns: unset !important;
        gap: 12px !important;
    }

    main#spn26-main-content.spn26-hero #spn26_hero_at_smart_input.spn26-smart-input,
    main#spn26-main-content.spn26-hero #spn26_results_smart_input.spn26-smart-input,
    body.spn26-hero-body .spn26-hero #spn26_hero_at_smart_input.spn26-smart-input,
    body.spn26-hero-body .spn26-hero #spn26_results_smart_input.spn26-smart-input,
    body.spn26-hero-body .spn26-hero #spn26_hero_at_smart_input.spn26-smart-input,
    body.spn26-hero-body .spn26-hero #spn26_results_smart_input.spn26-smart-input,
    html body .spn26-hero #spn26_hero_at_smart_input.spn26-smart-input,
    html body .spn26-hero #spn26_results_smart_input.spn26-smart-input {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        align-self: stretch !important;
        color: var(--spn26-text-dark) !important;
        -webkit-text-fill-color: var(--spn26-text-dark) !important;
        background-color: var(--spn26-hero-field-bg, #f1f5f9) !important;
    }

    main#spn26-main-content.spn26-hero .spn26-hero-filters,
    body.home .spn26-hero .spn26-hero-filters,
    body.spn26-hero-body .spn26-hero .spn26-hero-filters,
    html body .spn26-hero .spn26-hero-filters {
        flex: 1 1 auto !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }

    main#spn26-main-content.spn26-hero .spn26-smart-btn,
    body.home .spn26-hero .spn26-smart-btn,
    body.spn26-hero-body .spn26-hero .spn26-smart-btn,
    html body .spn26-hero .spn26-smart-btn {
        width: 100% !important;
        align-self: stretch !important;
        justify-self: stretch !important;
    }

    main#spn26-main-content.spn26-hero .spn26-hero-filters-fields,
    body.home .spn26-hero .spn26-hero-filters-fields,
    body.spn26-hero-body .spn26-hero .spn26-hero-filters-fields,
    html body .spn26-hero .spn26-hero-filters-fields {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        align-content: stretch !important;
        gap: 0.75rem !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    main#spn26-main-content.spn26-hero .spn26-bundesland-picker-inner,
    body.home .spn26-hero .spn26-bundesland-picker-inner,
    body.spn26-hero-body .spn26-hero .spn26-bundesland-picker-inner,
    html body .spn26-hero .spn26-bundesland-picker-inner {
        flex-direction: column !important;
        align-items: stretch !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    main#spn26-main-content.spn26-hero .spn26-filter-field,
    body.home .spn26-hero .spn26-filter-field,
    body.spn26-hero-body .spn26-hero .spn26-filter-field,
    html body .spn26-hero .spn26-filter-field {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    main#spn26-main-content.spn26-hero .spn26-jobtype-fieldset,
    body.home .spn26-hero .spn26-jobtype-fieldset,
    body.spn26-hero-body .spn26-hero .spn26-jobtype-fieldset,
    html body .spn26-hero .spn26-jobtype-fieldset {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    main#spn26-main-content.spn26-hero .spn26-jobtype-options,
    body.home .spn26-hero .spn26-jobtype-options,
    body.spn26-hero-body .spn26-hero .spn26-jobtype-options,
    html body .spn26-hero .spn26-jobtype-options {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        transform: translateY(1mm) !important;
    }

    main#spn26-main-content.spn26-hero .spn26-jobtype-chip,
    body.home .spn26-hero .spn26-jobtype-chip,
    body.spn26-hero-body .spn26-hero .spn26-jobtype-chip,
    html body .spn26-hero .spn26-jobtype-chip {
        flex: 1 1 auto !important;
        min-width: min(100%, 8.5rem) !important;
        max-width: 100% !important;
        padding: 0 8px !important;
        font-size: 0.85rem !important;
    }

    main#spn26-main-content.spn26-hero .spn26-jobtype-chip__text,
    body.home .spn26-hero .spn26-jobtype-chip__text,
    body.spn26-hero-body .spn26-hero .spn26-jobtype-chip__text,
    html body .spn26-hero .spn26-jobtype-chip__text {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    /*
     * Job-Ergebnisse (.spn26-search-toolbar--results): Formular liegt nicht unter .spn26-hero —
     * dieselben Chip-Regeln explizit für die Toolbar, sonst nowrap + Overflow auf Tablets.
     */
    .spn26-search-toolbar .spn26-jobtype-options {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .spn26-search-toolbar .spn26-jobtype-chip {
        flex: 1 1 auto !important;
        min-width: min(100%, 8.5rem) !important;
        max-width: 100% !important;
    }

    .spn26-search-toolbar .spn26-jobtype-chip__text {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    /* Kein legend-Transform mehr nötig — Beschäftigung liegt in .spn26-jobtype-row */

    .spn26-search-fields {
        flex-direction: column;
    }

    .spn26-search-input {
        padding: 0.6rem 1rem;
        font-size: 0.95rem;
    }

    .spn26-search-types {
        margin-left: 0;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px 16px;
    }

    .spn26-search-btn {
        width: 100%;
        margin-top: 0.5rem;
        padding: 1.2rem;
    }

    .spn26-section-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        text-align: left;
        padding-bottom: 0.5rem;
        margin-bottom: 2rem;
    }

    .spn26-btn-order {
        width: 100%;
        text-align: center;
        padding: 0.4rem 0.7rem;
        font-size: 0.72rem;
    }
}

/* ==========================================================================
   Custom Startseite – Header & Footer ausblenden + eigenes Styling
   ========================================================================== */

/* === WorkScout Header & Footer ausblenden (body.home + body.spn26-hero-body) === */
/* Wichtig: .container / .fullwidth.sticky.new nur mit :not(.spn26-job-results):not(.spn26-job-single), sonst Suchmaske unsichtbar. */
body.home .main-header,
body.spn26-hero-body .main-header,
body.home #tr-header,
body.spn26-hero-body #tr-header,
body.home header.site-header,
body.spn26-hero-body header.site-header,
body.home .header,
body.spn26-hero-body .header,
body.home .navbar,
body.spn26-hero-body .navbar,
body.home .navbar-default,
body.spn26-hero-body .navbar-default,
body.home .tr-header,
body.spn26-hero-body .tr-header,
body.home footer.site-footer,
body.spn26-hero-body:not(.spn26-stellenausschreibung-page) footer.site-footer,
body.home #footer,
body.spn26-hero-body:not(.spn26-stellenausschreibung-page) #footer,
body.home #footer-new,
body.spn26-hero-body:not(.spn26-stellenausschreibung-page) #footer-new,
body.home .main-footer,
body.spn26-hero-body:not(.spn26-stellenausschreibung-page) .main-footer,
body.home .footer,
body.spn26-hero-body:not(.spn26-stellenausschreibung-page) .footer,
body.home .new-header #header .left-side,
body.spn26-hero-body .new-header #header .left-side,
body.home .header-notifications.user-menu,
body.spn26-hero-body .header-notifications.user-menu,
body.home .header-notifications,
body.spn26-hero-body .header-notifications,
body.home .user-menu,
body.spn26-hero-body .user-menu,
body.home .left-side,
body.spn26-hero-body .left-side,
body.home .right-side,
body.spn26-hero-body .right-side,
body.home .footer-row,
body.spn26-hero-body:not(.spn26-stellenausschreibung-page) .footer-row,
body.home .footer-new-top-section,
body.spn26-hero-body:not(.spn26-stellenausschreibung-page) .footer-new-top-section,
body.home .footer-new-rows-container,
body.spn26-hero-body:not(.spn26-stellenausschreibung-page) .footer-new-rows-container,
body.home .footer-new-middle-section,
body.spn26-hero-body:not(.spn26-stellenausschreibung-page) .footer-new-middle-section,
body.home .footer-new-bottom-left,
body.spn26-hero-body:not(.spn26-stellenausschreibung-page) .footer-new-bottom-left,
body.home .footer-new-bottom-right,
body.spn26-hero-body:not(.spn26-stellenausschreibung-page) .footer-new-bottom-right,
body.home .container,
body.spn26-hero-body:not(.spn26-job-single):not(.spn26-job-results):not(.spn26-stellenausschreibung-page) .container,
body.home .footer-new-bottom-section,
body.spn26-hero-body:not(.spn26-stellenausschreibung-page) .footer-new-bottom-section,
body.home .fullwidth.sticky.new,
body.spn26-hero-body:not(.spn26-job-single):not(.spn26-job-results):not(.spn26-stellenausschreibung-page) .fullwidth.sticky.new,
body.home #footer-bottom,
body.spn26-hero-body:not(.spn26-stellenausschreibung-page) #footer-bottom,
body.home .footer-bottom,
body.spn26-hero-body:not(.spn26-stellenausschreibung-page) .footer-bottom,
body.home #bottom,
body.spn26-hero-body:not(.spn26-stellenausschreibung-page) #bottom,
body.home .bottom,
body.spn26-hero-body:not(.spn26-stellenausschreibung-page) .bottom,
/* Theme-/WP: nicht nur „Footer“, sondern oft Widget-Bereiche (mobil sichtbar) */
body.home #colophon,
body.spn26-hero-body:not(.spn26-stellenausschreibung-page) #colophon,
body.home .footer-widget-area,
body.spn26-hero-body:not(.spn26-stellenausschreibung-page) .footer-widget-area,
body.home .footer-widget-wrap,
body.spn26-hero-body:not(.spn26-stellenausschreibung-page) .footer-widget-wrap,
body.home .pre-footer,
body.spn26-hero-body:not(.spn26-stellenausschreibung-page) .pre-footer,
body.home .after-footer,
body.spn26-hero-body:not(.spn26-stellenausschreibung-page) .after-footer,
body.home footer:not(.spn26-footer),
body.spn26-hero-body:not(.spn26-stellenausschreibung-page) footer:not(.spn26-footer) {
    display: none !important;
}

/*
 * Headless-Global (Preise, Kontakt, FAQ, Stellenausschreibung, …): kein spn26-hero-body — WorkScout-Footer
 * ausblenden. NICHT #footer / .footer / #colophon pauschal — WorkScout packt oft den spn26-Footer in denselben
 * Wrapper; display:none auf dem Elternblock würde auch footer.spn26-footer verstecken.
 */
body.spn26-headless-header-global #footer-new,
body.spn26-headless-header-global footer.site-footer,
body.spn26-headless-header-global .footer-row,
body.spn26-headless-header-global .footer-new-top-section,
body.spn26-headless-header-global .footer-new-rows-container,
body.spn26-headless-header-global .footer-new-middle-section,
body.spn26-headless-header-global .footer-new-bottom-left,
body.spn26-headless-header-global .footer-new-bottom-right,
body.spn26-headless-header-global .footer-new-bottom-section,
body.spn26-headless-header-global #footer-bottom,
body.spn26-headless-header-global .footer-bottom,
body.spn26-headless-header-global .footer-widget-area,
body.spn26-headless-header-global .footer-widget-wrap,
body.spn26-headless-header-global .pre-footer,
body.spn26-headless-header-global .after-footer,
body.spn26-headless-header-global footer:not(.spn26-footer) {
    display: none !important;
}

/* Sicherheit: eigener Footer bleibt sichtbar (auch wenn er im Theme-.footer-Wrapper steht). */
body.spn26-headless-header-global footer.spn26-footer {
    display: block !important;
}

/*
 * Headless-Header: Hauptzeile .spn26-hh-bar (kein .navbar mehr — WorkScout-Ausblendregel oben trifft nicht zu).
 * Falls Theme trotzdem eingreift, Flex erzwingen.
 */
body.spn26-hero-body .spn26-header-headless .spn26-hh-bar {
    display: flex !important;
}

/*
 * Headless-Header: gleiche horizontale Spalte wie Suchfeld — Startseite: 20px + max. 90rem (wie .spn26-hero);
 * /jobs: wie .spn26-job-results-wrap (max-width + clamp-Padding). .spn26-hh-inner-row begrenzt die Inhaltsbreite.
 */
body.spn26-hero-body:not(.spn26-job-results) .spn26-header-headless .spn26-hh-inner,
body.spn26-headless-header-global .spn26-header-headless .spn26-hh-inner {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

body.spn26-hero-body:not(.spn26-job-results) .spn26-header-headless .spn26-hh-inner-row,
body.spn26-headless-header-global .spn26-header-headless .spn26-hh-inner-row {
    width: 100%;
    max-width: min(90rem, 100%);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

body.spn26-job-results .spn26-header-headless .spn26-hh-inner {
    width: 100%;
    max-width: min(90rem, calc(100vw - 2 * max(1rem, env(safe-area-inset-left, 0px))));
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(1rem, 3vw, 2rem);
    padding-right: clamp(1rem, 3vw, 2rem);
    box-sizing: border-box;
}

body.spn26-job-results .spn26-header-headless .spn26-hh-inner-row {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.spn26-header-headless .spn26-hh-mobile-panel {
    padding-left: 0;
    padding-right: 0;
}

/* Mobil-Panel: details/summary-Disclosure + Listenmarker (iOS/Android: störender Kreis/Punkt) */
.spn26-header-headless .spn26-hh-nav-mobile details > summary {
    list-style: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.spn26-header-headless .spn26-hh-nav-mobile details > summary::-webkit-details-marker,
.spn26-header-headless .spn26-hh-nav-mobile details > summary::marker {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
}

.spn26-header-headless .spn26-hh-nav-mobile details ul,
.spn26-header-headless .spn26-hh-nav-mobile details ul > li {
    list-style: none !important;
    list-style-type: none !important;
}

.spn26-header-headless .spn26-hh-nav-mobile details ul > li::marker {
    content: none !important;
    display: none !important;
}

.spn26-header-headless .spn26-hh-nav-mobile details > summary:focus,
.spn26-header-headless .spn26-hh-nav-mobile details > summary:focus-visible {
    outline: 2px solid #0d4d69 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px rgb(13 77 105 / 0.25) !important;
}

@media (max-width: 1024px) {
    .spn26-header-headless .spn26-hh-nav-mobile details > summary:focus,
    .spn26-header-headless .spn26-hh-nav-mobile details > summary:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }
}

.spn26-header-headless .spn26-hh-nav-mobile > li {
    list-style: none !important;
}

.spn26-header-headless .spn26-hh-nav-mobile > li::marker {
    content: none !important;
    display: none !important;
}

/* Desktop-Flyout-Trigger: kein sichtbarer Fokusring (häufig als Kreis/Ring wahrgenommen) */
.spn26-header-headless .spn26-hh-nav [role="button"]:focus,
.spn26-header-headless .spn26-hh-nav [role="button"]:focus-visible {
    outline: 2px solid #0d4d69 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px rgb(13 77 105 / 0.25) !important;
}

@media (min-width: 1025px) {
    .spn26-header-headless .spn26-hh-nav [role="button"]:focus,
    .spn26-header-headless .spn26-hh-nav [role="button"]:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }
}

/* Desktop-Flyout: Theme/Browser-Listenmarker unterbinden (hohler Kreis oben links im Panel) */
.spn26-header-headless .spn26-hh-flyout-list,
.spn26-header-headless .spn26-hh-flyout-list > li {
    list-style: none !important;
    list-style-type: none !important;
}

.spn26-header-headless .spn26-hh-flyout-list > li::marker {
    content: none;
    display: none;
}

/*
 * Hybrid-Header: Stacking + Box-Model; kein Bootstrap-Clearfix auf alter .navbar-Klasse.
 */
.spn26-header-headless {
    isolation: isolate;
    width: 100%;
    box-sizing: border-box;
}

.spn26-header-headless *,
.spn26-header-headless *::before,
.spn26-header-headless *::after {
    box-sizing: border-box;
}

.spn26-header-headless .spn26-hh-bar::before,
.spn26-header-headless .spn26-hh-bar::after {
    content: none !important;
    display: none !important;
}

.spn26-header-headless [x-cloak] {
    display: none !important;
}

/*
 * Headless header: force tablet/mobile nav switch independent from utility classes.
 * Includes coarse pointers so tablets in landscape still use hamburger reliably.
 */
@media (max-width: 1200px), (hover: none) and (pointer: coarse) {
    .spn26-header-headless .spn26-hh-center-desktop,
    .spn26-header-headless .spn26-hh-end-desktop {
        display: none !important;
    }

    .spn26-header-headless .spn26-hh-end-mobile {
        display: flex !important;
    }
}

@media (min-width: 1201px) and (hover: hover) and (pointer: fine) {
    .spn26-header-headless .spn26-hh-center-desktop {
        display: flex !important;
    }

    .spn26-header-headless .spn26-hh-end-desktop {
        display: flex !important;
    }

    .spn26-header-headless .spn26-hh-end-mobile {
        display: none !important;
    }
}

/* ==========================================================================
   Site-weiter Headless-Nav (normale WP-Seiten): Theme-Kopf aus, Footer sichtbar
   (kein spn26-hero-body — dort würde der Theme-Footer mit ausgeblendet.)
   Ohne die Hero-Body-Regeln bleibt WorkScout oft mit .fullwidth.sticky.new + padding
   auf .site-content/#main — großer weißer Streifen unter dem fixen spn26-Header.
   ========================================================================== */
html:has(body.spn26-headless-header-global) {
    margin-top: 0 !important;
    padding-top: 0 !important;
    height: 100%;
}

body.spn26-headless-header-global {
    margin-top: 0 !important;
    padding-top: 0 !important;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

body.spn26-headless-header-global > .spn26-header-headless {
    flex-shrink: 0;
}

/*
 * body.home .container{display:none} versteckt Theme-Container — nur im INHALTSbereich wieder anzeigen.
 * NIEMALS .container allein ohne .site-content/#content/.site-main: das zeigt auch Footer-/Widget-.container wieder
 * (z. B. „Jahre sozpaed.net“, „Stunden Online“ unter dem schwarzen spn26-footer).
 */
body.home.spn26-hero-body .site-content .container,
body.spn26-hero-body .site-content .container,
body.home.spn26-hero-body #content .container,
body.spn26-hero-body #content .container,
body.home.spn26-hero-body .site-main .container,
body.spn26-hero-body .site-main .container {
    display: block !important;
}

/* Redundante Resets wurden entfernt — Fokus liegt auf dem Nuclear-Block am Dateiende */

/* Canvas der Startseite an den Seitenhintergrund anbinden (kein erzwungenes Schwarz) */
html[data-spn26-template="1"] {
    background-color: #ffffff !important;
}

/* === Dein eigener Header Styling (anpassen!) === */
#custom-header {
    background-color: #2c3e50;
    /* dunkles Blau wie viele Job-Themes */
    color: white;
    padding: 1.2rem 0;
    position: relative;
    z-index: 100;
}

#custom-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

#custom-header .logo {
    font-size: 1.8rem;
    font-weight: bold;
    color: #18d26e;
    /* grün wie oft in Job-Themes */
    text-decoration: none;
}

#custom-header .main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.8rem;
}

#custom-header .main-navigation a {
    color: white;
    text-decoration: none;
    font-weight: 500;
}

#custom-header .main-navigation a:hover {
    color: #18d26e;
}

/* === Dein eigener Footer Styling (anpassen!) === */
#custom-footer {
    background-color: #2c3e50;
    color: #bdc3c7;
    padding: 2rem 0;
    text-align: center;
    font-size: 0.95rem;
}

#custom-footer a {
    color: #18d26e;
    text-decoration: none;
}

#custom-footer a:hover {
    text-decoration: underline;
}

/* Dein Hauptinhalt – z. B. mehr Abstand oben */
.custom-main-content {
    padding: 3rem 20px;
    min-height: 70vh;
}

/* === Cookie Consent Banner === */
.spn26-cookie-banner {
    position: fixed !important;
    bottom: max(20px, env(safe-area-inset-bottom, 0px)) !important;
    right: max(20px, env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
    top: auto !important;
    background: var(--spn26-white);
    color: var(--spn26-text-dark);
    padding: 20px 52px 20px 25px;
    border-radius: var(--spn26-border-radius);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 2147483647 !important;
    width: min(430px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 15px;
    transform: translate3d(0, 140%, 0);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.spn26-cookie-banner.show {
    transform: translate3d(0, 0, 0) !important;
}

.spn26-cookie-banner__title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    line-height: 1.35;
    color: var(--spn26-text-dark);
}

.spn26-cookie-banner p {
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.5;
}

.spn26-cookie-banner p a {
    color: var(--spn26-primary);
    text-decoration: underline;
    font-weight: 500;
}

.spn26-cookie-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(15, 23, 42, 0.18);
    border-radius: 9999px;
    background: #ffffff;
    color: #334155;
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.spn26-cookie-close:hover,
.spn26-cookie-close:focus-visible {
    border-color: #1c98cb;
    color: #1c98cb;
    background: #f0f9ff;
    outline: none;
}

/* Theme/icon-font side effects in cookie text/links neutralisieren. */
.spn26-cookie-banner a,
.spn26-cookie-banner button {
    font-family: inherit !important;
}

.spn26-cookie-banner a::before,
/* 
 * Cookie-Banner-Regeln (Deaktiviert um WP-Standard-Banner nicht zu stören)
7000: .spn26-cookie-banner a::after,
7001: .spn26-cookie-banner button::before,
7002: .spn26-cookie-banner button::after,
7003: .spn26-cookie-banner [class*="icon"]::before,
7004: .spn26-cookie-banner [class*="icon"]::after,
7005: .spn26-cookie-banner i {
7006:     content: none !important;
7007:     display: none !important;
7008: }
7009: 
7010: .spn26-cookie-banner :is(a, button)::before,
7011: .spn26-cookie-banner :is(a, button)::after {
7012:     content: none !important;
7013:     display: none !important;
7014: }
7015: 
7016: .spn26-cookie-banner :is(a, button) {
7017:     background-image: none !important;
7018: }
*/

.spn26-cookie-banner :is(ul, ol, li) {
    list-style: none !important;
    list-style-image: none !important;
}

.spn26-cookie-banner li::marker {
    content: none !important;
}

.spn26-cookie-banner svg {
    max-width: 2rem !important;
    max-height: 2rem !important;
}

.spn26-cookie-banner i {
    font-size: 1rem !important;
    line-height: 1 !important;
}

.spn26-cookie-banner :is([class*="header" i], [class*="title" i]) > svg:first-child {
    display: none !important;
}

/* Close "x" im Cookie-Popup oben rechts positionieren. */
.spn26-cookie-banner {
    position: fixed !important;
}

.spn26-cookie-banner :is(
    button[aria-label*="schlie" i],
    button[aria-label*="close" i],
    [class*="close" i],
    [id*="close" i]
) {
    position: absolute !important;
    top: 0.5rem !important;
    right: 0.5rem !important;
    left: auto !important;
    z-index: 5 !important;
}

/* Header-/Hamburger-Icons: Brand-Farbe sicherstellen (Desktop + Mobile-Menü). */
/* Header tools: Login CTA + font size controls. */
.spn26-hh-login-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.15rem;
    padding: 0.32rem 0.78rem;
    border-radius: 9999px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.spn26-hh-login-cta:hover,
.spn26-hh-login-cta:focus-visible {
    border-color: #1c98cb;
    color: #1c98cb;
    background: #f0f9ff;
    box-shadow: 0 4px 14px rgba(28, 152, 203, 0.16);
    outline: none;
}

.spn26-hh-font-tools {
    z-index: 20;
}

.spn26-hh-font-btn {
    border: 1px solid #94a3b8;
    background: #ffffff;
    color: #1e293b;
    min-height: 1.55rem;
    min-width: 1.95rem;
    padding: 0 0.34rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.spn26-hh-font-btn:hover,
.spn26-hh-font-btn:focus-visible {
    border-color: #1c98cb;
    background: #e0f2fe;
    color: #075985;
    outline: none;
}

.spn26-hh-font-popover {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    min-width: 132px;
    border: 1px solid #cbd5e1;
    border-radius: 0.65rem;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* Mobile: Font popover align left/expand right */
.spn26-hh-mobile-menu .spn26-hh-font-popover {
    right: auto;
    left: 0;
}

.spn26-hh-font-popover.hidden {
    display: none;
}

.spn26-hh-font-pop-btn {
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #334155;
    border-radius: 0.5rem;
    min-height: 1.95rem;
    padding: 0 0.55rem;
    font-size: 0.74rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}

.spn26-hh-font-pop-btn:hover,
.spn26-hh-font-pop-btn:focus-visible {
    border-color: #1c98cb;
    color: #075985;
    background: #e0f2fe;
    outline: none;
}

/* Headless menu icons: ensure FA <i> icons render sharply. */
.spn26-header-headless .spn26-hh-nav [aria-hidden="true"] i,
.spn26-header-headless .spn26-hh-nav-mobile [aria-hidden="true"] i,
.spn26-header-headless .spn26-hh-flyout-list i {
    font-size: 1.125rem !important; /* 18px sharp scaling */
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.spn26-header-headless .spn26-hh-flyout-list i {
    font-size: 1.25rem !important; /* 20px sharp scaling for flyout */
}

/* Legacy debug rules removed for production. */

/* Restore Font Awesome pseudo glyphs in headless header.
 * A broader header reset disables all ::before content and breaks FA icons.
 */
.spn26-header-headless i.fa-solid::before,
.spn26-header-headless i.fa-regular::before,
.spn26-header-headless i.fa-brands::before,
.spn26-header-headless i[class*=" fa-"]::before,
.spn26-header-headless i[class^="fa-"]::before {
    display: inline-block !important;
    line-height: 1 !important;
    font-style: normal !important;
}

.spn26-header-headless i.fa-solid::before {
    font: var(--fa-font-solid) !important;
}

.spn26-header-headless i.fa-regular::before {
    font: var(--fa-font-regular) !important;
}

.spn26-header-headless i.fa-brands::before {
    font: var(--fa-font-brands) !important;
}

@media (max-width: 900px) {
    .spn26-cookie-banner {
        right: max(10px, env(safe-area-inset-right, 0px)) !important;
        bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
        left: auto !important;
        top: auto !important;
        width: min(410px, calc(100vw - 20px)) !important;
        max-width: calc(100vw - 20px) !important;
        padding: 16px 44px 16px 16px !important;
    }
}

.spn26-cookie-buttons {
    display: flex;
    gap: 10px;
}

.spn26-cookie-btn {
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--spn26-transition);
    flex: 1;
    text-align: center;
}

.spn26-cookie-btn-accept {
    background: var(--spn26-primary);
    color: var(--spn26-white);
}

.spn26-cookie-btn-accept:hover {
    background: var(--spn26-primary-light);
}

.spn26-cookie-btn-decline {
    background: var(--spn26-bg-light);
    color: var(--spn26-text-muted);
}

.spn26-cookie-btn-decline:hover {
    background: #e2e8f0;
}

/* 1. Scroll Reveal Logic Base CSS */
.spn26-reveal-element {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.spn26-reveal-element.spn26-is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* CLEAN PREMIUM SPOTLIGHT CARDS */
.spn26-spotlight .spn26-job-card {
    border: 1px solid rgba(var(--spn26-primary-rgb), 0.15);
    /* Zarter blauer Rand, der es als "Spotlight" hervorhebt */
    display: flex;
    flex-direction: column;
}

/* 1. Sauber eingefasstes Firmenlogo */
.spn26-spotlight .spn26-company-logo {
    width: 65px;
    height: 65px;
    background: #fdfdfd;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

.spn26-spotlight .spn26-company-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* 2. Typografie & Abstände aufgeräumt */
.spn26-spotlight .spn26-spotlight-company {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--spn26-text-muted);
    /* Dunkelgrau statt Blau */
    margin-bottom: 8px;
    line-height: 1.3;
    /* Multiline allowed */
}

.spn26-spotlight .spn26-spotlight-title {
    font-size: 1.15rem;
    line-height: 1.4;
    font-weight: 700;
    margin: 0 0 20px 0;
}

.spn26-spotlight .spn26-spotlight-location {
    font-size: 0.95rem;
    /* Größer für den Ort */
    font-weight: 600;
    color: var(--spn26-text-muted);
    margin-bottom: 24px;
    margin-top: auto;
    /* Zwingt den Ort und den Button absolut ans untere Ende der Karte */
    display: flex;
    align-items: center;
}

.spn26-spotlight .spn26-spotlight-location::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 0;
    background-color: transparent;
    margin-right: 6px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%231e97cc" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Fix for Title Clipping caused by external or generic theme rules */
.spn26-spotlight .spn26-spotlight-title {
    height: auto !important;
    max-height: none !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    display: block !important;
    overflow: visible !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

/* 3. Sekundär-Link (Outline) — ohne Vollfläche; Karten-Variante oben unter .spn26-job-card */
.spn26-spotlight .spn26-btn-details {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: transparent;
    border: 1px solid rgba(var(--spn26-primary-rgb), 0.35);
    color: var(--spn26-primary);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 12px 0;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.spn26-spotlight .spn26-btn-details svg {
    margin-right: 6px;
    transition: transform 0.3s ease;
}

.spn26-spotlight .spn26-job-card:hover .spn26-btn-details {
    background: rgba(var(--spn26-primary-rgb), 0.08);
    color: var(--spn26-primary);
}

.spn26-spotlight .spn26-job-card:hover .spn26-btn-details svg {
    transform: translateX(4px);
}

/* ==========================================================================
   SPOTLIGHT CARDS REDESIGN (Hero Match Edition)
   ========================================================================== */

.spn26-job-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 0;
}

.spn26-premium-card-wrapper {
    perspective: 1000px;
}

.spn26-premium-card {
    position: relative;
    width: 100%;
    min-height: 460px;
    /* Reduced height */
    background: #f0f0f0;
    border-radius: var(--spn26-border-radius);
    margin: 0 auto;
    padding: 20px 20px 30px;
    /* Reduced bottom padding to move button down */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #333333;
    /* Dark Grey Text */
    border: 1px solid #e0e0e0;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.spn26-premium-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px -10px rgba(var(--spn26-primary-rgb), 0.3), 0 0 0 1px rgba(var(--spn26-primary-rgb), 0.4);
    border-color: rgba(var(--spn26-primary-rgb), 0.3);
}

/* Styles for child elements in light theme */
.spn26-card-company {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    color: #444444;
    /* Darkened for better contrast on light grey */
    line-height: 1.3;
    /* Compact line spacing */
    min-height: 2.8em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.spn26-card-logo-box {
    width: 100%;
    height: 180px;
    background: #ffffff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    /* Reduced margin */
    padding: 10px;
    overflow: hidden;
}

.spn26-card-logo-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Company box removed from main card scope to clean up progression */

.spn26-premium-card h3 {
    font-size: 19px;
    font-weight: 800;
    margin-bottom: 10px;
    /* Reduced margin */
    line-height: 1.2;
    /* Tightened line height */
    min-height: 2.5em;
    /* More compact height */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.spn26-card-content {
    width: 100%;
    flex-grow: 1;
}

.spn26-card-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.spn26-card-content ul li {
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Gemeinsames Layout (v1 + v2) — Farben pro Variante darunter */
.spn26-premium-link {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none !important;
    box-sizing: border-box;
    transition: background 0.3s, transform 0.2s, border-color 0.3s, filter 0.2s;
}

.spn26-premium-link .spn26-btn-icon,
.spn26-premium-link > i {
    font-size: 1.2em;
    flex-shrink: 0;
}

/* v1: Outline — Primär in der Sektion ist .spn26-btn-order */
.spn26-premium-card-v1 .spn26-premium-link {
    margin-top: 25px;
    background: transparent;
    color: var(--spn26-primary) !important;
    border: 2px solid var(--spn26-primary);
    box-shadow: none;
}

.spn26-premium-card-v1 .spn26-premium-link:hover {
    background: rgba(var(--spn26-primary-rgb), 0.08);
    transform: translateY(-2px);
}

/* Spotlight Version 2 (Weiterbildung) */
.spn26-premium-card.spn26-premium-card-v2 .spn26-card-logo-box {
    width: 300px;
    max-width: 100%;
    height: 240px;
}

.spn26-premium-card.spn26-premium-card-v2 .spn26-card-logo-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.spn26-premium-card.spn26-premium-card-v2 .spn26-card-company,
.spn26-premium-card.spn26-premium-card-v2 .spn26-card-content {
    display: none;
}

.spn26-premium-card.spn26-premium-card-v2 h3 {
    font-size: 16px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
    min-height: calc(1.25em * 4);
}

.spn26-premium-card.spn26-premium-card-v2 .spn26-premium-link {
    background: var(--spn26-v2-btn-bg, #4b1f6f);
    color: #ffffff !important;
    border: 2px solid transparent;
    box-shadow: 0 4px 12px rgba(75, 31, 111, 0.28);
}

.spn26-premium-card.spn26-premium-card-v2 .spn26-premium-link:hover {
    filter: brightness(0.88);
    transform: translateY(-2px);
}

@media (max-width: 1200px) {
    .spn26-job-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .spn26-job-grid {
        grid-template-columns: 1fr;
    }
}

/*
 * Job-Einzel: „NEU“/„NEW“ in der Titlebar ausblenden (Custom-Badge per PHP aus; Theme-Chips hier abfangen).
 * Wieder sichtbar: Filter `spn26_show_neu_badge_on_job_single` → Body-Klasse .spn26-job-single-neu-visible
 */
body.spn26-job-single.spn26-hero-body:not(.spn26-job-single-neu-visible) #titlebar .spn26-job-single-neu-slot,
body.spn26-job-single.spn26-hero-body:not(.spn26-job-single-neu-visible) #wrapper #titlebar .spn26-job-single-neu-slot,
body.spn26-job-single.spn26-hero-body:not(.spn26-job-single-neu-visible) #titlebar li.spn26-job-detail-neu-badge,
body.spn26-job-single.spn26-hero-body:not(.spn26-job-single-neu-visible) #wrapper #titlebar li.spn26-job-detail-neu-badge,
body.spn26-job-single.spn26-hero-body:not(.spn26-job-single-neu-visible) #titlebar h1 .new_job,
body.spn26-job-single.spn26-hero-body:not(.spn26-job-single-neu-visible) #wrapper #titlebar h1 .new_job,
body.spn26-job-single.spn26-hero-body:not(.spn26-job-single-neu-visible) #titlebar h1 li.new_job,
body.spn26-job-single.spn26-hero-body:not(.spn26-job-single-neu-visible) #wrapper #titlebar h1 li.new_job,
body.spn26-job-single.spn26-hero-body:not(.spn26-job-single-neu-visible) #titlebar h1 li.job-type.new,
body.spn26-job-single.spn26-hero-body:not(.spn26-job-single-neu-visible) #wrapper #titlebar h1 li.job-type.new,
body.spn26-job-single.spn26-hero-body:not(.spn26-job-single-neu-visible) #titlebar h1 li.listing-date.new,
body.spn26-job-single.spn26-hero-body:not(.spn26-job-single-neu-visible) #wrapper #titlebar h1 li.listing-date.new,
body.spn26-job-single.spn26-hero-body:not(.spn26-job-single-neu-visible) #titlebar h1 a.new_job,
body.spn26-job-single.spn26-hero-body:not(.spn26-job-single-neu-visible) #wrapper #titlebar h1 a.new_job,
body.spn26-job-single.spn26-hero-body:not(.spn26-job-single-neu-visible) #titlebar h1 a.job-type.new,
body.spn26-job-single.spn26-hero-body:not(.spn26-job-single-neu-visible) #wrapper #titlebar h1 a.job-type.new,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body:not(.spn26-job-single-neu-visible) #titlebar .listing-types li.new_job,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body:not(.spn26-job-single-neu-visible) #wrapper #titlebar .listing-types li.new_job,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body:not(.spn26-job-single-neu-visible) #titlebar ul.job-types li.new_job,
html[data-spn26-template="1"] body.spn26-job-single.spn26-hero-body:not(.spn26-job-single-neu-visible) #wrapper #titlebar ul.job-types li.new_job {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    position: absolute !important;
    pointer-events: none !important;
    border: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

/* 
 * ==========================================================================
 * UI/UX 2026: FINAL NUCLEAR OVERRIDES (Optimiert & Bereinigt)
 * ==========================================================================
 * Diese Regeln stehen am Ende, um alle Theme-Altlasten zu neutralisieren.
 */

/* 1. Globaler Hintergrund & Konsistenz */
html[data-spn26-template="1"],
html[data-spn26-template="1"] body,
body.spn26-measure-sticky-header,
body.spn26-hero-body {
    background-color: #fafafa !important;
}

/* 2. Footer-Einheitlichkeit (Wiederhergestellt) */

/* 3. Zentraler Spacer-Offset (Gegen die 3cm-Lücke) */
/* Titlebar etc. immer neutralisieren. #content/.site-content/main.site-main nur auf Hero/Jobs —
   sonst 0-padding + fehlende Wiederherstellung auf #content (z. B. FAQ) = Überschrift unter fixem Header. */
body.spn26-measure-sticky-header :is(#titlebar, .titlebar) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
body.spn26-measure-sticky-header:not(.spn26-headless-header-global) :is(#content, .site-content, main.site-main) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Job-Einzel: body.spn26-job-single ausnehmen — sonst überschreibt diese Zeile das #wrapper-padding-top aus dem Job-Einzel-Block (html[data-spn26-template] erhöht Spezifität). */
html[data-spn26-template="1"] body.spn26-measure-sticky-header:not(.spn26-job-single):not(.spn26-kontakt-page):not(.spn26-impressum-page):not(.spn26-preise-page) #wrapper,
html[data-spn26-template="1"] body.spn26-measure-sticky-header:not(.spn26-job-single):not(.spn26-kontakt-page):not(.spn26-impressum-page):not(.spn26-preise-page) #page,
body.spn26-measure-sticky-header:not(.spn26-job-single):not(.spn26-kontakt-page):not(.spn26-impressum-page):not(.spn26-preise-page) #wrapper,
body.spn26-measure-sticky-header:not(.spn26-job-single):not(.spn26-kontakt-page):not(.spn26-impressum-page):not(.spn26-preise-page) #page,
body.spn26-measure-sticky-header:not(.spn26-job-single):not(.spn26-kontakt-page):not(.spn26-impressum-page):not(.spn26-preise-page) .site {
    margin-top: 0 !important;
    padding-top: 0 !important; /* Gap eliminated */
    z-index: 10 !important;
    overflow: visible !important;
    min-height: 100vh !important;
}

/* 4. Theme-Header Altlasten ausblenden */
body.spn26-measure-sticky-header :is(
    .navbar, .navbar-default, .tr-header, .new-header #header .left-side, 
    .header-notifications, .user-menu, .left-side, .right-side
) {
    display: none !important;
}

/* 5. Navigation-Priorität (Z-Index Gottmodus) */
.spn26-header-headless {
    z-index: 999999 !important;
}

/* 6. NUCLEAR RESET: Beseitigung der 3cm-Lücke (Titlebars & Breadcrumbs) */
body.spn26-measure-sticky-header :is(#titlebar, .titlebar, #breadcrumbs, .page-title, .titlebar-container) {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
}

/* 7. Einheitlicher Hintergrund-Zwang */
html[data-spn26-template='1'] body.spn26-measure-sticky-header:not(.spn26-kontakt-page):not(.spn26-impressum-page):not(.spn26-preise-page) #wrapper,
html[data-spn26-template='1'] body.spn26-measure-sticky-header:not(.spn26-kontakt-page):not(.spn26-impressum-page):not(.spn26-preise-page) #page,
body.spn26-measure-sticky-header:not(.spn26-kontakt-page):not(.spn26-impressum-page):not(.spn26-preise-page) #wrapper,
body.spn26-measure-sticky-header:not(.spn26-kontakt-page):not(.spn26-impressum-page):not(.spn26-preise-page) #page {
    background-color: #fafafa !important;
}

/*
 * Headless auf normalen WP-Seiten: Nuclear-Block oben setzt .site-content / main.site-main auf padding-top 0.
 * Hier einheitlicher Abstand unter dem fixen Header (gleiche Messvariable wie Jobs — spn26-headless-header-measure.js).
 * Preise (.spn26-page--preise): eigene Kette in assets/css/pages/preise-page.css — sonst gewinnt diese Regel
 * wegen höherer Spezifität und kollidiert mit Preise-Layout / -3cm-Shift.
 */
body.spn26-headless-header-global.spn26-measure-sticky-header main#spn26-main-content:not(.spn26-page--preise):not(.spn26-page--stellenausschreibung):not(.spn26-page--kontakt):not(.spn26-page--impressum):not(.spn26-page--datenschutzerklaerung) {
    scroll-margin-top: calc(var(--spn26-measured-sticky-header-bottom, 5.25rem) + 1rem);
    padding-top: calc(var(--spn26-measured-sticky-header-bottom, 5.25rem) + 1.5rem) !important;
}

/*
 * Themes mit .site-main (z. B. FAQ): Offset unter fixem Header.
 * Früher: .site-main:not(:has(#spn26-main-content)) — ohne :has()-Support war die Regel ungültig → kein Padding → Überlappung.
 * Ausnahmen nur in @supports :has, sonst doppeltes Padding auf verschachtelten Hüllen.
 */
body.spn26-headless-header-global.spn26-measure-sticky-header .site-content {
    padding-top: calc(var(--spn26-measured-sticky-header-bottom, 5.25rem) + 1.5rem) !important;
}

body.spn26-headless-header-global.spn26-measure-sticky-header .site-main {
    padding-top: calc(var(--spn26-measured-sticky-header-bottom, 5.25rem) + 1.5rem) !important;
}

/* WorkScout: Inhalt oft in #content; Nuclear-Reset traf #content nicht mehr auf Headless — explizit auffüllen */
body.spn26-headless-header-global.spn26-measure-sticky-header #content {
    padding-top: calc(var(--spn26-measured-sticky-header-bottom, 5.25rem) + 1.5rem) !important;
}

/*
 * Fullwidth / VC-Seiten ohne #primary/.site-content (Live FAQ: #wrapper > .container.full-width > article, kein #content).
 * Theme-Kirki würde #wrapper.new-header padding-top setzen — Nuclear-Block setzt #wrapper auf 0; Offset muss hier ansetzen.
 * Nur .full-width: sonst mehrere direkte .container unter #wrapper möglich.
 */
body.spn26-headless-header-global.spn26-measure-sticky-header #wrapper > .container.full-width {
    padding-top: calc(var(--spn26-measured-sticky-header-bottom, 5.25rem) + 1.5rem) !important;
}

@supports selector(:has(*)) {
    body.spn26-headless-header-global.spn26-measure-sticky-header .site-content:has(.site-main),
    body.spn26-headless-header-global.spn26-measure-sticky-header .site-content:has(#spn26-main-content) {
        padding-top: 0 !important;
    }

    body.spn26-headless-header-global.spn26-measure-sticky-header .site-main:has(#spn26-main-content) {
        padding-top: 0 !important;
    }

    /* Nur eine der beiden Hüllen padded: .site-content oder inneres #content */
    body.spn26-headless-header-global.spn26-measure-sticky-header .site-content:has(#content) {
        padding-top: 0 !important;
    }

    /* Inneres Layout bringt den Offset schon — sonst doppelter Abstand unter dem Header */
    body.spn26-headless-header-global.spn26-measure-sticky-header #wrapper > .container.full-width:has(.site-content),
    body.spn26-headless-header-global.spn26-measure-sticky-header #wrapper > .container.full-width:has(main#spn26-main-content),
    body.spn26-headless-header-global.spn26-measure-sticky-header #wrapper > .container.full-width:has(#content) {
        padding-top: 0 !important;
    }
}

/*
 * Headless: Nuclear-Block setzt #wrapper/#page auf min-height:100vh — der spn26-Footer folgt danach im DOM
 * → Seite höher als Viewport trotz wenig Inhalt. Wrapper wächst mit flex:1 statt fester Mindesthöhe.
 */
body.spn26-headless-header-global.spn26-measure-sticky-header #page {
    display: flex !important;
    flex-direction: column !important;
}

body.spn26-headless-header-global.spn26-measure-sticky-header #wrapper,
body.spn26-headless-header-global.spn26-measure-sticky-header #page {
    min-height: 0 !important;
    flex: 1 1 auto !important;
}

/* Nuclear-Block: .site ebenfalls min-height:100vh — sonst wieder „Viewport + Footer“-Scroll */
body.spn26-headless-header-global.spn26-measure-sticky-header .site {
    min-height: 0 !important;
    flex: 1 1 auto !important;
}

body.spn26-headless-header-global footer.spn26-footer {
    flex-shrink: 0;
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* Kontakt / Impressum: Inhalt ~1,5 cm näher an den Headless-Header (eigene Kette, nicht FAQ-Padding) */
body.spn26-headless-header-global.spn26-measure-sticky-header main#spn26-main-content.spn26-page--kontakt,
body.spn26-headless-header-global.spn26-measure-sticky-header main#spn26-main-content.spn26-page--impressum {
    scroll-margin-top: calc(var(--spn26-measured-sticky-header-bottom, 5.25rem) + 0.35rem);
    padding-top: 0 !important;
}

/*
 * Kontakt / Impressum: Nuclear-Block + Headless-Flex — ohne diese Überschreibung oft Leer-Scroll unter kurzem Inhalt.
 */
body.spn26-kontakt-page.spn26-headless-header-global.spn26-measure-sticky-header #wrapper,
body.spn26-kontakt-page.spn26-headless-header-global.spn26-measure-sticky-header #page,
body.spn26-kontakt-page.spn26-headless-header-global.spn26-measure-sticky-header .site,
body.spn26-impressum-page.spn26-headless-header-global.spn26-measure-sticky-header #wrapper,
body.spn26-impressum-page.spn26-headless-header-global.spn26-measure-sticky-header #page,
body.spn26-impressum-page.spn26-headless-header-global.spn26-measure-sticky-header .site {
    min-height: 0 !important;
    flex: 0 1 auto !important;
}

body.spn26-kontakt-page.spn26-headless-header-global,
body.spn26-impressum-page.spn26-headless-header-global {
    min-height: 0 !important;
    height: auto !important;
}

/*
 * Headless: „Nach oben“ (footer.php → .spn26-global-back-to-top), über Cookie-Banner;
 * erst ab Scroll sichtbar (.show setzt spn26-back-to-top.js).
 */
body.spn26-headless-header-global .spn26-global-back-to-top {
    position: fixed !important;
    z-index: 2147483000 !important;
    right: max(1.25rem, env(safe-area-inset-right, 0px)) !important;
    bottom: max(1.5rem, env(safe-area-inset-bottom, 0px)) !important;
    pointer-events: none;
}

body.spn26-headless-header-global .spn26-global-back-to-top > .fixed {
    position: static !important;
    inset: auto !important;
    right: auto !important;
    bottom: auto !important;
    pointer-events: auto;
}

body.spn26-headless-header-global #backToTop {
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

body.spn26-headless-header-global #backToTop.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/*
 * Jobliste (/jobs): Body/Wrap bleiben #fafafa — Footer-Band explizit weiß (sonst wirkt die Zeile grau).
 */
body.spn26-job-results footer.spn26-footer,
body.spn26-hero-body.spn26-job-results footer.spn26-footer {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

body.spn26-job-results footer.spn26-footer .spn26-footer-content,
body.spn26-hero-body.spn26-job-results footer.spn26-footer .spn26-footer-content {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/*
 * Kontakt / Impressum: Nuclear-Block färbt body/#wrapper/#page global #fafafa — unter dem weißen Footer
 * wirkt die Seite dann „offen“/grau. Canvas einheitlich weiß; Grau nur im Main (Tailwind / Content).
 */
html:has(body.spn26-kontakt-page),
html:has(body.spn26-impressum-page),
html[data-spn26-template="1"]:has(body.spn26-kontakt-page),
html[data-spn26-template="1"]:has(body.spn26-impressum-page) {
    background-color: #ffffff !important;
}

body.spn26-kontakt-page.spn26-measure-sticky-header,
body.spn26-impressum-page.spn26-measure-sticky-header {
    background-color: #ffffff !important;
}

body.spn26-kontakt-page.spn26-measure-sticky-header #wrapper,
body.spn26-kontakt-page.spn26-measure-sticky-header #page,
body.spn26-kontakt-page.spn26-measure-sticky-header .site,
body.spn26-impressum-page.spn26-measure-sticky-header #wrapper,
body.spn26-impressum-page.spn26-measure-sticky-header #page,
body.spn26-impressum-page.spn26-measure-sticky-header .site {
    background-color: #ffffff !important;
}

/*
 * Einzelbeitrag (post): ~1,5 cm mehr Abstand unter dem fixen Headless-Header.
 * margin-top am Beitrags-Element — greift unabhängig von der :has()-Padding-Kette (.site-content / .site-main / #content).
 */
body.single-post.spn26-headless-header-global.spn26-measure-sticky-header article.post,
body.single-post.spn26-headless-header-global.spn26-measure-sticky-header .site-main > .post {
    margin-top: 1.5cm !important;
}

/*
 * Global form focus reset (requested): no dark-blue focus ring on inputs.
 */
html body :is(input, textarea, select):focus,
html body :is(input, textarea, select):focus-visible,
html body .spn26-bundesland-select:focus,
html body .spn26-search-input:focus,
html body .spn26-smart-input:focus {
    outline: none !important;
    box-shadow: none !important;
}

/*
 * Spotlight spacing hard-fix:
 * Keep clear distance between job title and location/button row.
 */
html body .spn26-spotlight #spotlight-cards-grid .spn26-premium-card-v1 .spn26-card-content,
html body .spn26-spotlight #spotlight-cards-grid .spn26-premium-card-v2.spn26-spotlight-card .spn26-card-content {
    margin-top: 0 !important;
}

html body .spn26-spotlight #spotlight-cards-grid .spn26-spotlight-v1-b3-jobtitle {
    margin-bottom: 1rem !important;
}

html body .spn26-spotlight #spotlight-cards-grid .spn26-top-job-location-row {
    padding-top: 1.15rem !important;
}