/*
Theme Name: fachexperten-jobs
Author: JobAdvice Swiss GmbH
Description: Theme fuer fachexperten-jobs.ch - Kopie von facharbeiter-jobs (30.10.2026), Farbwelt Dunkelblau/Orange.
Version: 0.1.1
Text Domain: fachexperten-jobs
*/

/* Poppins selbst gehostet (10.09.2026, PageSpeed): vorher Google Fonts = Kette Stylesheet (fonts.googleapis) -> woff2
   (fonts.gstatic), mobil 1,4 s Render-Blockierung. Dateien: assets/fonts/, Latin-Subset, ~8 KB je Schnitt.
   Die drei Hauptschnitte werden in functions.php per <link rel="preload"> vorgeladen. font-display: optional (10.09.2026 abends): mit swap wertete Google den spaeten Schriftwechsel der H1 als LCP (4,3 s mobil); optional = Schrift nur, wenn sie beim ersten Zeichnen da ist (dank preload fast immer), sonst Systemschrift ohne Wechsel. Kein Google-Aufruf mehr (auch
   datenschutzrechtlich sauberer). */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: optional; src: url('assets/fonts/poppins-400-latin.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: optional; src: url('assets/fonts/poppins-500-latin.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: optional; src: url('assets/fonts/poppins-600-latin.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: optional; src: url('assets/fonts/poppins-700-latin.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: optional; src: url('assets/fonts/poppins-800-latin.woff2') format('woff2'); }

:root {
    --navy: #0a1f3c;
    --navy-dark: #061428;
    --blue: #005bb5;
    --text: #101522;
    --muted: #586274;
    --line: #dfe5ec;
    --soft: #f3f7fb;
    --white: #ffffff;
    --max: 1360px;
    --warm: #f7901e;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    color: var(--text);
    font-family: 'Poppins', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #fff;
    line-height: 1.5;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

.site-shell {
    width: min(var(--max), calc(100% - 48px));
    margin: 0 auto;
}

.site-header {
    height: 72px;
    background: rgba(255,255,255,.9);
    border-bottom: 1px solid rgba(7,23,45,.08);
    position: sticky;
    top: 0;
    z-index: 30;
}

.site-header__inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 36px;
}

.brand {
    display: inline-flex;
    align-items: flex-start;
    min-width: 240px;
    font-weight: 900;
    letter-spacing: .5px;
    line-height: .8;
}

.brand__job {
    color: #0a1f3c;
    font-size: 31px;
}

.brand__advice {
    color: #20232a;
    font-size: 31px;
}

.brand__plus {
    color: #0a1f3c;
    font-size: 16px;
    margin: -7px 0 0 4px;
}

.brand__sub {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    margin-top: 8px;
    margin-left: 88px;
    color: #1f2630;
}

.main-nav {
    margin-left: auto;
    font-size: 14px;
}

.main-nav ul,
.main-nav__list {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 0;
    padding: 0;
}

.main-nav a {
    font-weight: 600;
    transition: color .2s ease;
}

.main-nav a:hover {
    color: var(--blue);
}

.header-actions {
    display: flex;
    gap: 12px;
    margin-left: 4px;
}

.main-nav__mobile-only {
    display: none;
}

.btn {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 0 28px;
    border-radius: 5px;
    border: 1px solid transparent;
    font-weight: 700;
    font-size: 14px;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn--primary {
    color: #fff;
    background: linear-gradient(135deg, #0a1f3c, #0b6fd1);
    box-shadow: 0 8px 24px rgba(10, 31, 60,.18);
}

.btn--outline {
    color: #0a1f3c;
    border-color: #0a1f3c;
    background: #fff;
}

.btn--light {
    color: #fff;
    border-color: rgba(255,255,255,.8);
    background: rgba(0,0,0,.16);
    backdrop-filter: blur(4px);
}

.btn--industrie {
    color: #fff;
    background: linear-gradient(135deg, #0a1f3c, #0b6fd1);
    box-shadow: 0 8px 24px rgba(10, 31, 60,.18);
}

.btn--bau {
    color: #fff;
    background: linear-gradient(135deg, #6b4508, #b6781b);
    box-shadow: 0 8px 24px rgba(90,58,8,.20);
}

.menu-toggle {
    display: none;
    margin-left: auto;
    border: 0;
    background: transparent;
    color: #0a1f3c;
    font-size: 28px;
    cursor: pointer;
}

/* Gateway Startseite */
.gateway {
    padding: 42px 0 58px;
    background:
        radial-gradient(circle at top left, rgba(0, 91, 181,.08), transparent 30%),
        radial-gradient(circle at bottom right, rgba(208,138,34,.08), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f2f5f8 100%);
}

.gateway__intro {
    max-width: 860px;
    margin: 0 auto 26px;
    text-align: center;
}

.gateway__eyebrow {
    margin: 0 0 10px;
    color: var(--blue);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.gateway h1 {
    margin: 0 0 12px;
    font-size: clamp(36px, 5vw, 62px);
    line-height: 1.06;
    letter-spacing: -1px;
    color: var(--navy-dark);
}

.gateway__intro p:last-child {
    margin: 0;
    color: #4e5968;
    font-size: 18px;
}

.gateway__visual {
    position: relative;
    min-height: 540px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(10,27,50,.12);
    background: #0a1b32;
}

.gateway__visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(208,138,34,.14) 0%, rgba(10, 31, 60,.08) 32%, rgba(10, 31, 60,.08) 68%, rgba(0, 91, 181,.14) 100%);
    pointer-events: none;
    z-index: 2;
}

.gateway__visual::after {
    content: "";
    position: absolute;
    top: 0;
    left: calc(50% - 120px);
    width: 240px;
    height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,.00) 0%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.00) 100%);
    filter: blur(22px);
    z-index: 2;
    pointer-events: none;
}

.gateway-side {
    position: relative;
    min-height: 540px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    color: #fff;
    isolation: isolate;
}

.gateway-side::before {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.03);
    transition: transform .35s ease;
    z-index: -2;
}

.gateway-side::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
}

.gateway-side:hover::before {
    transform: scale(1.07);
}

.gateway-side--bau::before {
    background-image:
        linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.08)),
        url("https://jobadvice.ch/wp-content/uploads/2026/08/bau-baunebenbereich.jpg");
}

.gateway-side--bau::after {
    background:
        linear-gradient(125deg, rgba(25,20,14,.42) 0%, rgba(208,138,34,.75) 58%, rgba(14,18,28,.56) 100%);
}

.gateway-side--industrie::before {
    background-image:
        linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.04)),
        url("assets/images/hero-industry.jpg");
}

.gateway-side--industrie::after {
    background:
        linear-gradient(125deg, rgba(4,17,36,.72) 0%, rgba(0, 91, 181,.48) 46%, rgba(4,17,36,.78) 100%);
}

.gateway-side__content {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 42px;
}

.gateway-side__label {
    display: inline-block;
    margin: 0 0 10px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,.36);
    background: rgba(255,255,255,.08);
}

.gateway-side h2 {
    margin: 0 0 12px;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.05;
}

.gateway-side p {
    max-width: 470px;
    margin: 0 0 24px;
    color: rgba(255,255,255,.90);
    font-size: 17px;
    min-height: 78px;
}

.gateway-side .btn {
    min-width: 220px;
}

.gateway-note {
    margin-top: 20px;
    text-align: center;
    color: #576173;
    font-size: 14px;
}

/* Allgemeine Sektorseiten */
.hero {
    position: relative;
    min-height: 390px;
    overflow: hidden;
    color: #fff;
}

.hero__inner {
    min-height: 390px;
    display: flex;
    align-items: center;
}

.hero__content {
    width: min(650px, 56%);
    padding: 48px 0 44px;
}

.hero h1 {
    margin: 0 0 6px;
    font-size: clamp(42px, 4vw, 62px);
    line-height: 1.08;
    letter-spacing: -.8px;
}

.hero__kicker {
    font-size: 21px;
    font-weight: 700;
    margin: 0 0 14px;
}

.hero__lead {
    max-width: 600px;
    margin: 0;
    font-size: 17px;
    color: rgba(255,255,255,.94);
}

.hero__actions {
    margin-top: 28px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.hero--industry {
    background:
        linear-gradient(90deg, rgba(0,14,34,.96) 0%, rgba(0,17,40,.87) 34%, rgba(0,19,45,.42) 58%, rgba(0,19,45,.16) 100%),
        url("assets/images/hero-industry.jpg") center right / cover no-repeat;
}

.hero--construction {
    position: relative;
    overflow: hidden;
}
.hero--construction::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("https://images.pexels.com/photos/38259276/pexels-photo-38259276/free-photo-of-construction-site-with-tower-cranes-under-clear-sky.jpeg?auto=compress&w=1920&h=1080&fit=crop") center center / cover no-repeat;
}
.hero--construction::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(45,28,6,.94) 0%, rgba(70,45,7,.82) 32%, rgba(87,61,16,.38) 57%, rgba(0,0,0,.16) 100%);
}
.hero--construction .hero__inner {
    position: relative;
    z-index: 2;
}

.benefit-bar {
    background: linear-gradient(90deg, #061f41, #005bb5);
    color: #fff;
}

.benefit-bar--construction {
    background: linear-gradient(90deg, #6c4708, #b6781b);
}

.benefit-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.benefit {
    min-height: 78px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 26px;
    position: relative;
}

.benefit:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 24%;
    height: 52%;
    width: 1px;
    background: rgba(255,255,255,.2);
}

.benefit__icon {
    flex: 0 0 38px;
    font-size: 30px;
    line-height: 1;
    opacity: .95;
}

.benefit__text {
    font-size: 13px;
    color: rgba(255,255,255,.96);
}

.section {
    padding: 22px 0 28px;
}

.section-title {
    margin: 0;
    text-align: center;
    font-size: 27px;
    line-height: 1.2;
}

.section-subtitle {
    margin: 2px 0 20px;
    text-align: center;
    color: #2f3742;
    font-size: 14px;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 14px;
}

.category-card {
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 14px rgba(10,29,56,.04);
    transition: transform .2s ease, box-shadow .2s ease;
}

.category-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(10,29,56,.10);
}

.category-card img {
    width: 100%;
    aspect-ratio: 1.48 / 1;
    object-fit: cover;
}

.category-card__body {
    min-height: 62px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #0a1f3c;
    font-size: 16px;
    font-weight: 700;
}

.category-card__body span:not(.arrow) {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

.arrow {
    font-size: 18px;
    line-height: 1;
}

.category-placeholder {
    position: relative;
    width: 100%;
    aspect-ratio: 1.48 / 1;
    display: grid;
    place-items: center;
    padding: 22px;
    background:
        linear-gradient(145deg, rgba(108,71,8,.95), rgba(208,138,34,.76)),
        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,.05) 0,
            rgba(255,255,255,.05) 12px,
            transparent 12px,
            transparent 24px
        );
    color: #fff;
    text-align: center;
}

.category-placeholder__icon {
    display: block;
    margin-bottom: 8px;
    font-size: 34px;
    line-height: 1;
}

.category-placeholder__small {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,.76);
}

.process-jobs {
    background: linear-gradient(180deg, #f3f7fb 0%, #f8fafc 100%);
    border-top: 1px solid #edf1f5;
    padding: 18px 0 34px;
}

.process-jobs__grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 24px;
}

.panel {
    background: rgba(255,255,255,.84);
    border: 1px solid #e7ebf0;
    border-radius: 6px;
}

.panel__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 15px;
    padding: 0 0 12px;
}

.panel-title {
    margin: 0;
    font-size: 18px;
    color: #0a2a52;
}

.process {
    padding-top: 10px;
}

.process__box {
    padding: 26px 26px 24px;
    min-height: 154px;
}

.steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 32px;
}

.step {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 14px;
}

.step__num {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #0a1f3c;
    background: #e4eaf2;
    font-weight: 800;
    font-size: 18px;
}

.step h3 {
    margin: 2px 0 6px;
    font-size: 14px;
    color: #0a1f3c;
}

.step p {
    margin: 0;
    font-size: 12px;
    color: #4b5563;
}

.jobs {
    padding-top: 10px;
}

.jobs__box {
    padding: 6px 18px;
}

.job-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    padding: 10px 0;
    border-bottom: 1px solid #e5e9ef;
}

.job-row:last-child {
    border-bottom: 0;
}

.job-row h3 {
    margin: 0 0 2px;
    color: #0a2a52;
    font-size: 13px;
}

.job-row p {
    margin: 0;
    color: #6b7280;
    font-size: 11px;
}

.job-location {
    white-space: nowrap;
    font-size: 11px;
    color: #68707d;
}

.job-location::before {
    content: "⌖ ";
}

.jobs-link {
    color: #0a2a52;
    font-size: 12px;
    font-weight: 600;
}

/* Berufsunterseiten */
.profession-hero {
    background: linear-gradient(180deg, #f3f7fb 0%, #eaeff5 100%);
    border-bottom: 1px solid #e1e7ee;
    overflow-x: hidden;
}

.profession-hero__grid {
    min-height: 390px;
    display: grid;
    grid-template-columns: 1fr .9fr;
    align-items: center;
}

.profession-hero__content {
    padding: 70px 70px 70px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.profession-eyebrow {
    margin: 0 0 12px;
    color: var(--blue);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.profession-hero h1 {
    margin: 0 0 16px;
    color: var(--navy-dark);
    font-size: clamp(42px, 5vw, 64px);
    line-height: 1.04;
    letter-spacing: -1px;
    overflow-wrap: break-word;
    hyphens: auto;
}

.profession-hero__content > p:not(.profession-eyebrow) {
    max-width: 560px;
    margin: 0 0 28px;
    color: #4c5969;
    font-size: 18px;
}

.profession-hero__content .btn {
    align-self: flex-start;
}

.profession-hero__image {
    overflow: hidden;
    border-radius: 6px;
    aspect-ratio: 1.48 / 1;
}

.profession-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profession-content {
    padding: 58px 0 70px;
}

.profession-content__inner {
    max-width: 1040px;
}

.profession-intro {
    max-width: 860px;
    margin: 0 0 42px;
    color: #344052;
    font-size: 20px;
    line-height: 1.75;
}

.profession-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
    margin-bottom: 34px;
}

.profession-columns section {
    padding: 30px;
    background: #f3f7fb;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
}

.profession-columns h2 {
    margin: 0 0 18px;
    color: var(--navy);
    font-size: 23px;
}

.profession-columns ul {
    margin: 0;
    padding-left: 20px;
}

.profession-columns li {
    margin: 0 0 10px;
    color: #465162;
}

.profession-cta {
    margin-top: 30px;
    padding: 36px;
    color: #fff;
    background: linear-gradient(135deg, #061f41, #005bb5);
    border-radius: 8px;
}

.profession-cta.profession-cta--construction {
    background: linear-gradient(135deg, #6b4508, #b6781b);
}

.profession-cta h2 {
    margin: 0 0 8px;
    font-size: 28px;
}

.profession-cta p {
    max-width: 760px;
    margin: 0 0 24px;
    color: rgba(255,255,255,.9);
}

.profession-cta .btn--outline {
    margin-left: 8px;
    color: #fff;
    border-color: rgba(255,255,255,.85);
    background: transparent;
}

.profession-back {
    margin-top: 34px;
}

.profession-back a {
    color: var(--navy);
    font-weight: 700;
}

.site-footer {
    background: #061428;
    color: rgba(255,255,255,.85);
    padding: 28px 0;
    font-size: 13px;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

@media (max-width: 1180px) {
    .main-nav ul,
    .main-nav__list {
        gap: 22px;
    }

    .category-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .benefit-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .benefit:nth-child(3)::after {
        display: none;
    }
}

@media (min-width: 901px) and (max-width: 1180px) {
    .main-nav ul,
    .main-nav__list {
        gap: 20px;
    }
}

@media (max-width: 900px) {
    .site-header {
        height: auto;
        min-height: 70px;
    }

    .site-header__inner {
        height: auto;
        min-height: 70px;
        flex-wrap: wrap;
        gap: 24px;
        padding: 10px 0;
    }

    .brand {
        min-width: auto;
    }

    .brand__job,
    .brand__advice {
        font-size: 26px;
    }

    .brand__sub {
        margin-left: 73px;
    }

    .menu-toggle {
        display: block;
    }

    .main-nav {
        display: none;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .main-nav ul,
    .main-nav__list {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .main-nav a {
        min-height: 40px;
    }

    .main-nav__cta {
        padding: 10px 18px;
        border-radius: 5px;
        color: #fff !important;
        background: var(--blue);
    }

    .main-nav.is-open {
        display: block;
    }

    .main-nav__mobile-only {
        display: inline;
    }

    .header-actions {
        display: none;
    }

    .gateway__visual {
        grid-template-columns: 1fr;
    }

    .gateway__visual::after {
        display: none;
    }

    .gateway-side,
    .gateway-side__content {
        min-height: auto;
    }

    .gateway-side {
        min-height: 360px;
    }

    .hero {
        min-height: 440px;
    }

    .hero__inner {
        min-height: 440px;
    }

    .hero__content {
        width: 82%;
    }

    .benefit-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .benefit::after {
        display: none;
    }

    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .process-jobs__grid {
        grid-template-columns: 1fr;
    }

    .steps {
        grid-template-columns: 1fr;
    }

    .profession-hero__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .profession-hero__content {
        padding: 52px 0 38px;
    }

    .profession-hero__image,
    .profession-hero__image img {
        min-height: 280px;
        max-height: 360px;
    }

    .profession-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .site-shell {
        width: min(100% - 28px, var(--max));
    }

    .hero__content {
        width: 100%;
        padding: 44px 0;
    }

    .hero h1 {
        font-size: 40px;
    }

    .hero__kicker {
        font-size: 18px;
    }

    .benefit-grid {
        grid-template-columns: 1fr;
    }

    .category-grid {
        grid-template-columns: 1fr;
    }

    .hero__actions,
    .gateway-side__content .btn + .btn {
        flex-direction: column;
    }

    .btn {
        width: 100%;
    }

    .panel__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .profession-content {
        padding: 38px 0 52px;
    }

    .profession-intro {
        font-size: 17px;
    }

    .profession-columns section,
    .profession-cta {
        padding: 24px;
    }

    .profession-cta .btn {
        width: 100%;
    }

    .profession-cta .btn--outline {
        margin: 10px 0 0;
    }
}


/* Footer Legal Links */
/* 08.10.2026 (Jürgen, Bild Handy): die sechs Links standen ohne Umbruch in einer Zeile und waren breiter als das Display,
   dadurch rutschte der ganze Footer nach rechts («Fac…» abgeschnitten, Zeilen nicht mehr zentriert). Jetzt dürfen die
   Links umbrechen, jede Zeile bleibt zentriert und nichts wird breiter als der Footer. */
.site-footer { overflow-x: hidden; }
.footer-inner {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    max-width: 100%;
}
.footer-inner > div { max-width: 100%; overflow-wrap: anywhere; }
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
    margin-top: 4px;
    max-width: 100%;
}
.footer-legal a {
    color: rgba(255,255,255,.75);
    font-size: 12px;
}
.footer-legal a:hover {
    color: #fff;
}

/* Logo-Bild statt Text-Wortmarke (02.09.2026) */
.brand { min-width: 0; }
.brand__logo { height: 32px; width: auto; }
@media (max-width: 600px) { .brand__logo { height: 32px; } }

/* ---------- Ratgeber (inc-ratgeber.php, 11.09.2026) ---------- */
.rg-shell { max-width: 860px; padding: 34px 0 70px; }
.rg-crumb { font-size: 14px; color: #64748b; margin: 0 0 14px; }
.rg-crumb a { color: #005bb5; text-decoration: none; }
.rg-eyebrow { color: #005bb5; font-weight: 700; margin: 0 0 6px; font-size: 14px; text-transform: uppercase; letter-spacing: .5px; }
.rg h1 { font-size: clamp(30px, 4vw, 38px); line-height: 1.15; margin: 0 0 14px; color: #0a1f3c; hyphens: auto; overflow-wrap: break-word; } /* 27.10.2026 lange Wörter am Handy */
.rg-lead { font-size: 18px; color: #334155; margin: 0 0 14px; line-height: 1.55; }
.rg-meta { font-size: 13px; color: #64748b; margin: 0 0 26px; }
.rg-inhalt h2 { font-size: 26px; color: #0a1f3c; margin: 44px 0 12px; }
.rg-inhalt h3 { font-size: 19px; color: #005bb5; margin: 34px 0 8px; }
.rg-inhalt h2, .rg-inhalt h3 { hyphens: auto; overflow-wrap: break-word; } /* 27.10.2026 lange Wörter am Handy (Schlechtwetterentschädigung) */
.rg-inhalt p, .rg-inhalt li { line-height: 1.6; }
.rg-inhalt ul, .rg-inhalt ol { padding-left: 22px; } .rg-inhalt li { margin: 6px 0; }
.rg-inhalt table { width: 100%; border-collapse: collapse; margin: 18px 0 28px; font-size: 15px; display: block; overflow-x: auto; }
.rg-inhalt th, .rg-inhalt td { border: 1px solid #e1e7ed; padding: 10px 14px; text-align: left; vertical-align: top; line-height: 1.5; }
.rg-inhalt thead th { background: #0a1f3c; color: #fff; font-weight: 600; white-space: nowrap; }
.rg-inhalt tbody tr:nth-child(even) { background: #f3f7fb; }
.rg-inhalt tbody td:first-child { font-weight: 600; color: #0a1f3c; white-space: nowrap; }
.rg-frage { margin: 26px 0 0; }
.rg-frage h4 { font-size: 17px; margin: 0 0 6px; color: #0a1f3c; display: flex; gap: 10px; align-items: baseline; }
.rg-frage h4 .nr { display: inline-flex; min-width: 30px; height: 30px; align-items: center; justify-content: center; background: #0a1f3c; color: #fff; border-radius: 50%; font-size: 13px; flex: 0 0 auto; }
.rg-warum { color: #334155; margin: 0 0 8px; }
.rg-antwort { background: #f3f7fb; border-left: 4px solid #005bb5; padding: 10px 14px; border-radius: 0 8px 8px 0; margin: 0 0 8px; }
/* 24.10.2026: FAQ-Block der Ratgeber (ausklappbar, FAQPage-Schema aus Meta rg_faq), wie jobadvice.ch */
.rg-faq { border: 1px solid #e1e7ed; border-radius: 10px; margin: 0 0 10px; background: #fff; }
.rg-faq summary { cursor: pointer; padding: 12px 16px; font-weight: 600; color: #0a1f3c; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.rg-faq summary::-webkit-details-marker { display: none; }
.rg-faq summary::after { content: '+'; color: #005bb5; font-weight: 700; flex: 0 0 auto; }
.rg-faq[open] summary::after { content: '\2013'; }
.rg-faq .rg-faq-a { padding: 0 16px 12px; color: #334155; }
.rg-faq .rg-faq-a p { margin: 0; }
ul.rg-check { list-style: none; padding: 0; }
ul.rg-check li::before { content: '\2610'; margin-right: 10px; color: #005bb5; }
.rg-toc { background: #fff; border: 1px solid #e1e7ed; border-radius: 12px; padding: 16px 22px; margin: 0 0 10px; }
.rg-toc ol { margin: 6px 0 0; padding-left: 22px; } .rg-toc li { margin: 3px 0; } .rg-toc a { color: #005bb5; text-decoration: none; }
.rg-box { background: #f3f7fb; border: 1px solid #e1e7ed; border-radius: 12px; padding: 22px 24px; margin: 30px 0; }
.rg-box h2 { margin: 0 0 8px; font-size: 22px; color: #0a1f3c; }
.rg-box p { margin: 0 0 14px; color: #334155; }
.rg-box__ok { color: #166534; font-weight: 600; } .rg-box__fehler { color: #b91c1c; font-weight: 600; }
.rg-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rg-form__row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.rg-form__row input { flex: 1; min-width: 200px; padding: 12px 14px; border: 1px solid #d0d5dd; border-radius: 8px; font-size: 15px; font-family: inherit; }
.rg-form__row input[name=vorname] { flex: 0 1 200px; }
.rg-form__consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: #475569; margin: 12px 0 0; line-height: 1.5; cursor: pointer; }
.rg-form__consent input { margin-top: 3px; flex: 0 0 auto; }
.rg-form__consent a { color: #005bb5; }
.rg-form__msg { margin: 10px 0 0; font-size: 14px; min-height: 1.2em; }
.rg-form__msg.is-ok { color: #166534; font-weight: 600; } .rg-form__msg.is-fehler { color: #b91c1c; }
.rg-cta { background: linear-gradient(135deg, #0a1f3c, #0b6fd1); color: #fff; border-radius: 16px; padding: 34px 30px; margin-top: 48px; }
.rg-cta h2 { color: #fff; margin: 0 0 8px; font-size: 26px; } .rg-cta p { color: #d6dfec; margin: 0 0 18px; }
.rg-cta__btns { display: flex; gap: 12px; flex-wrap: wrap; }
.rg-cta .btn { background: #fff; color: #0a1f3c; box-shadow: none; }
.rg-cta .btn--outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.7); }
.rg-back { margin-top: 28px; } .rg-back a { color: #005bb5; font-weight: 600; text-decoration: none; }
.rg-liste { display: grid; gap: 18px; margin: 30px 0 10px; }
.rg-karte { display: block; border: 1px solid #e1e7ed; border-radius: 12px; padding: 22px 24px; text-decoration: none; color: inherit; background: #fff; transition: box-shadow .2s ease, transform .2s ease; }
.rg-karte:hover { box-shadow: 0 10px 28px rgba(10, 31, 60,.12); transform: translateY(-2px); }
.rg-karte__ziel { display: inline-block; font-size: 12px; font-weight: 700; color: #005bb5; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.rg-karte h2 { font-size: 22px; color: #0a1f3c; margin: 0 0 8px; } .rg-karte p { margin: 0 0 10px; color: #334155; }
.rg-karte__meta { font-size: 13px; color: #64748b; } .rg-karte__link { display: block; margin-top: 8px; color: #005bb5; font-weight: 600; }
@media (max-width: 640px) { .rg-box { padding: 18px; } .rg-cta { padding: 26px 20px; } }

/* ---------- Kurzbewerbung auf eine Stelle (inc-bewerbung.php, 11.09.2026) ---------- */
.bw-box { max-width: 640px; }
.bw-stelle { margin: 0 0 8px; color: #0a1f3c; }
.bw-hinweis { margin: 0 0 18px; color: #475569; font-size: 14px; line-height: 1.55; background: #f3f7fb; border-left: 4px solid #b49a5a; padding: 10px 14px; border-radius: 0 8px 8px 0; }
.bw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.bw-feld { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: #0a1f3c; }
.bw-feld input, .bw-feld select, .bw-feld textarea { width: 100%; padding: 10px 12px; border: 1px solid #d0d5dd; border-radius: 8px; font-size: 15px; font-family: inherit; font-weight: 400; color: #101522; background: #fff; box-sizing: border-box; }
.bw-feld input[type=file] { padding: 8px; font-size: 14px; }
.bw-feld--voll { grid-column: 1 / -1; }
.bw-klein { font-weight: 400; color: #64748b; }
.bw-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: #475569; margin: 16px 0 0; line-height: 1.5; cursor: pointer; }
.bw-consent input { margin-top: 3px; flex: 0 0 auto; } .bw-consent a { color: #005bb5; }
.bw-actions { margin: 16px 0 0; }
.bw-msg { margin: 10px 0 0; font-size: 14px; min-height: 1.2em; } .bw-msg.is-fehler { color: #b91c1c; }
.bw-danke { color: #166534; font-size: 16px; line-height: 1.6; margin: 10px 0; }
.bw-status { border-radius: 10px; padding: 14px 18px; margin: 0 0 20px; font-weight: 600; }
.bw-status--ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.bw-status--fehler { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
@media (max-width: 560px) { .bw-grid { grid-template-columns: 1fr; } }
/* Ratgeber: interne Verlinkung (11.09.2026) */
.rg-verwandt { margin-top: 40px; padding-top: 22px; border-top: 1px solid #e1e7ed; }
.rg-verwandt h2 { font-size: 22px; color: #0a1f3c; margin: 0 0 12px; }
.rg-verwandt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rg-verwandt li a { font-weight: 600; color: #005bb5; text-decoration: none; }
.rg-verwandt li a:hover { text-decoration: underline; }
.rg-verwandt li span { display: block; color: #64748b; font-size: 14px; line-height: 1.5; }
.rg-verwandt--stellen p { margin: 0; line-height: 1.8; color: #334155; }
.rg-verwandt--stellen a { color: #005bb5; text-decoration: none; font-weight: 600; }

/* ==========================================================================
   facharbeiter-jobs.ch (15.10.2026) - Farbwelt PETROL statt Bronze (Jürgen 15.10.2026).
   Grundgerüst = Stil der JobAdvice-Seite (oben unverändert übernommen), hier nur die Abweichungen.
   ========================================================================== */
:root {
    --petrol-dark: #0a1f3c;
    --petrol: #005bb5;
    --petrol-light: #0b6fd1;
    --petrol-soft: #e6eef8;
    --fa-orange: #f7901e;   /* Akzent aus dem Logo, sparsam (FX-Orange) */
    /* FX-Namen aus Webseite\fachexperten-jobs\fe-farben.css (SEO 30.10.2026), gleiche Werte wie die Variablen oben */
    --fe-orange: #f7901e;
    --fe-orange-text: #b85a00;
    --fe-orange-soft: #fff3e6;
    --fe-navy: #0a1f3c;
    --fe-navy-dark: #061428;
    --fe-blue: #005bb5;
    --fe-blue-light: #0b6fd1;
    --fe-sky: #00b8f5;
}

.site-header { height: 108px; }
.brand { min-width: 0; align-items: center; gap: 12px; }
.brand__logo { height: 96px; width: auto; display: block; }
.brand__name { font-weight: 800; font-size: 20px; color: var(--petrol-dark); letter-spacing: -.2px; line-height: 1.1; }
.brand__name span { color: var(--petrol-light); }
.main-nav a:hover { color: var(--petrol); }

.btn--primary,
.btn--petrol {
    color: #fff;
    background: linear-gradient(135deg, var(--petrol-dark), var(--petrol-light));
    box-shadow: 0 8px 24px rgba(10, 31, 60,.22);
}
.btn--outline { color: var(--petrol-dark); border-color: var(--petrol-dark); }

/* Kopfbereich: Bild + Petrol-Verlauf (wie hero--construction, nur Farbe) */
.hero--fa { position: relative; overflow: hidden; }
.hero--fa::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: url("assets/images/hero-fe.jpg") center right / cover no-repeat;   /* 18.10.2026: Bild ohne eingebaute Schrift (Jürgen) */
}
.hero--fa::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(4,22,46,.95) 0%, rgba(10, 31, 60,.84) 32%, rgba(0, 91, 181,.40) 57%, rgba(0,0,0,.14) 100%);
}
.hero--fa .hero__inner { position: relative; z-index: 2; }

.benefit-bar--fa { background: linear-gradient(90deg, var(--petrol-dark), var(--petrol-light)); }

.section-title, .panel-title { color: var(--petrol-dark); }
.step__num { background: var(--petrol); color: #fff; }
.jobs-link { color: var(--petrol); }
.jobs-empty { padding: 26px 22px; color: #3d4a52; font-size: 15px; line-height: 1.6; }
.jobs-empty strong { color: var(--petrol-dark); }

.site-footer a { color: inherit; }

/* Stellen (15.10.2026): Übersicht /stellen/ und Einzelseite */
.fa-eyebrow { margin: 0 0 8px; color: var(--petrol); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.fa-jobs__title, .fa-job__title { margin: 0 0 12px; color: var(--petrol-dark); font-size: clamp(26px, 3.4vw, 38px); line-height: 1.15; }
.fa-jobs__lead { margin: 0 0 24px; color: #3d4a52; font-size: 16px; line-height: 1.6; }
/* Übersicht wie jobadvice.ch/stellen/ (Jürgen 15.10.2026), Farbe Petrol */
.fa-jobs__h1 { font-size: 42px; margin: 0 0 20px; color: #111827; }
.fa-jobs__h1 small { font-weight: 400; font-size: .55em; color: #334155; }
.fa-jobs__suche { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.fa-jobs__suche input, .fa-jobs__suche select { padding: 10px 14px; border: 1px solid #d0d5dd; border-radius: 8px; font: inherit; font-size: 15px; background: #fff; }
.fa-jobs__suche #jf-titel { flex: 2; min-width: 200px; }
.fa-jobs__suche #jf-plz { flex: 0 0 100px; }
.fa-jobs__suche #jf-radius { flex: 0 0 160px; }
.fa-jobs__suche .btn { flex: 0 0 auto; }
.fa-jobs__reset { flex: 0 0 auto; background: none; border: 1px solid #d0d5dd; border-radius: 8px; padding: 10px 16px; cursor: pointer; font: inherit; }
.fa-jobs__status { color: #64748b; font-size: 14px; margin: -12px 0 20px; }
.fa-jobs__list .job-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 0; color: inherit; text-decoration: none; }
.fa-jobs__list .job-row h3 { font-size: 15px; color: var(--petrol-dark); }
.fa-jobs__list .job-row p { font-size: 12px; }
.job-row > div:first-child { flex: 1 1 0; min-width: 0; } /* 25.10.2026 Paritaet zu jobadvice.ch: linke Spalte darf schrumpfen, sonst rutscht Ort + Ansehen bei langen Kurztexten unter den Text */
.job-row__right { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; text-align: right; }
.job-ansehen { font-weight: 700; color: var(--petrol); white-space: nowrap; }
.fa-jobs__pager { margin-top: 24px; display: flex; justify-content: space-between; gap: 12px; }
.fa-jobs__pager a { display: inline-block; border: 1px solid #d0d5dd; border-radius: 8px; padding: 10px 18px; color: var(--petrol-dark); font-weight: 600; text-decoration: none; }
.fa-jobs__pager a:hover { background: #f3f7fb; }
@media (max-width: 600px) {
    .fa-jobs__h1 { font-size: 30px; }
    .job-row__right { flex: 1 1 100%; justify-content: flex-start; text-align: left; margin-top: 4px; }
    .fa-jobs__suche #jf-plz, .fa-jobs__suche #jf-radius { flex: 1 1 40%; }
}
.fa-job__back { margin: 0 0 18px; }
.fa-job__back a { color: var(--petrol); font-weight: 600; text-decoration: none; }
.fa-job__meta { margin: 0 0 20px; color: #5b6770; font-size: 15px; }
.fa-job__content { margin-top: 28px; color: #2f3a40; font-size: 16px; line-height: 1.65; }
.fa-job__content h3 { margin: 28px 0 10px; color: var(--petrol-dark); font-size: 19px; }
.fa-job__content ul { margin: 0; padding-left: 22px; }
.fa-job__content li { margin-bottom: 6px; }
.fa-job__cta { margin-top: 40px; padding: 26px; border-radius: 12px; background: #eaf1f9; }
.fa-job__cta h2 { margin: 0 0 8px; color: var(--petrol-dark); font-size: 22px; }
.fa-job__cta p { margin: 0 0 18px; color: #3d4a52; line-height: 1.6; }
.jobs__box .job-row { color: inherit; text-decoration: none; }
.jobs__box .job-row:hover h3 { color: var(--petrol); }

@media (max-width: 760px) {
    .site-header { height: 84px; }
    .brand__logo { height: 72px; }
    .brand__name { font-size: 17px; }
}

/* Kopfzeile beim Scrollen (16.10.2026, Jürgen: «verdeckt einen Teil des Logos»): deckend weiss statt leicht durchsichtig, und
   bei angemeldeten Benutzern unter der WordPress-Leiste kleben statt darunter (32 px, schmal 46 px; unter 600 px scrollt sie mit). */
.site-header { background: #fff; }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }

/* Mobilmenü (16.10.2026, Jürgen: «Menü öffnet mobil nicht ordentlich»): die festen Kopfhöhen oben (108/84 px) liessen das
   aufgeklappte Menü ohne Hintergrund über dem Kopfbild hängen. Jetzt wächst die Kopfzeile mit, Menü als weisse Liste mit
   grossen Tippflächen, darunter «Jobs entdecken». */
@media (max-width: 900px) {
    .site-header { height: auto; background: #fff; }
    .site-header__inner { row-gap: 0; padding: 6px 0; }
    .menu-toggle { padding: 6px 8px; line-height: 1; }
    .main-nav.is-open { display: block; padding: 4px 0 0; border-top: 1px solid #e1e7ed; }
    .main-nav.is-open .main-nav__list { gap: 0; }
    .main-nav.is-open li { width: 100%; }
    .main-nav.is-open a { display: flex; align-items: center; width: 100%; min-height: 50px; font-size: 17px; font-weight: 600; color: var(--petrol-dark); border-bottom: 1px solid #eef2f4; }
    .main-nav.is-open + .header-actions { display: block; width: 100%; padding: 14px 0 16px; }
    .main-nav.is-open + .header-actions .btn { display: flex; justify-content: center; width: 100%; }
}

/* ---------- Formularblöcke hellpetrol, Felder weiss (Jürgen 23.10.2026, wie Variante F auf jobadvice.ch) ----------
   "body" davor, damit die Regeln die Seiten-eigenen <style>-Blöcke überstimmen. Rückgängig: diesen Block löschen. */
body .fa-bw__gruppe { background: #eef2f7; border: 1px solid #d3dce8; border-radius: 12px; padding: 16px 18px 18px; }
body .fa-bw__gruppe legend { float: left; width: 100%; }
body .fa-bw__gruppe legend + * { clear: both; }
body .fa-bw__feld input:not([type=checkbox]):not([type=radio]):not([type=file]):not(.is-lv),
body .fa-bw__feld select, body .fa-bw__feld textarea,
body .fa-rm input:not([type=checkbox]):not([type=radio]):not([type=file]), body .fa-rm select, body .fa-rm textarea { background-color: #fff; }
@media (max-width: 600px) { body .fa-bw__gruppe { padding: 14px; } }
/* Seitenhintergrund hinter den Formularen hell (wie jobadvice.ch), die weisse Karte hebt sich ab */
body main.fa-bw, body main:has(.fa-rm), body main.fa-lr, body main.fa-an { background: #f3f7fb; }
/* Rückmeldeformular = weisse Karte auf hellem Grund (wie die Bewerbung) */
body .fa-rm form { background: #fff; border-color: #d3dce8; }
/* 30.10.2026 Berufsseiten am Handy: Überschrift wächst mit der Breite, damit lange Berufsnamen (Servicetechniker) nicht mitten im Wort umbrechen */
@media (max-width: 480px) { .profession-hero h1 { font-size: clamp(28px, 8.5vw, 42px); letter-spacing: -0.5px; } }