/*
 * site.css: hand-written, loaded last.
 * 1. Small overrides the old CMS shipped as webedition.css
 * 2. Replacements for what jQuery/Bootstrap JS, Owl Carousel, fancyBox and
 *    Font Awesome did on the old site (behaviour lives in ../js/site.js)
 */

/* ---------- 1. former webedition.css ---------- */
h3 a, .h3 a {
    text-decoration: none;
}

h3 a:hover, .h3 a:hover {
    color: inherit;
}

.home-box-container--white-border {
    border-color: #fff;
}

.home-box-container .content {
    padding-bottom: 10px;
}

.topics-container .owl-carousel.home-boxes .owl-dots span {
    background-color: #fff;
}

.header .main-navigation .nav-item.home .sx-navigation__entry-link--active::before {
    display: none;
}

/* Banner parallax: the only rule of the old 112 KB animate.css the pages used.
   :where() keeps it at zero specificity, because that file loaded before
   main.css and main.css overrides parts of it. */
:where(.sx-parallax-basic) {
    min-height: 300px;
    width: 100%;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* ---------- 2a. mobile navigation (was Bootstrap collapse) ---------- */
/* Closed by default below 1025px once JS runs; without JS everything stays visible. */
@media (max-width: 1024px) {
    .js .responsive-collapse:not(.is-open) {
        display: none !important;
    }
}

/* Sub-menu +/- toggles (were Font Awesome glyphs) */
.sx-navigation__subnavi-indicator::after {
    font: bold 17px/1 Arial, sans-serif;
}

@media (max-width: 1249px) {
    .sx-navigation--standard .sx-navigation__subnavi-indicator::after {
        content: "\2212";
    }

    .sx-navigation--standard .sx-navigation__subnavi-indicator.collapsed::after {
        content: "+";
    }
}

/* ---------- 2b. slider (was Owl Carousel) ---------- */
.owl-carousel {
    position: relative;
    width: 100%;
    z-index: 1;
}

.owl-carousel .slider-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.owl-carousel .slider-track::-webkit-scrollbar {
    display: none;
}

.owl-carousel .slider-item {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
}

.owl-carousel .owl-dots .owl-dot {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    line-height: 0;
    vertical-align: middle;
}

/* Image slider (Plexiglas, jobs): dots below, arrows on top of the picture. */
.image-slider .slider-item img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.image-slider .owl-dots {
    margin-top: 15px;
    text-align: center;
}

.image-slider .owl-dots .owl-dot span {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    border-radius: 50%;
    background-color: #d7d1cc;
}

.image-slider .owl-dots .owl-dot.active span {
    background-color: #a52024;
}

.image-slider .slider-arrow {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    margin-top: -32px;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.85);
    color: #323232;
    font-size: 0;
    cursor: pointer;
}

/* Chevrons drawn in CSS so they stay sharp (were text glyphs) */
.image-slider .slider-arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.image-slider .slider-arrow--next::before {
    transform: translate(-70%, -50%) rotate(45deg);
}

.image-slider .slider-arrow--prev::before {
    transform: translate(-30%, -50%) rotate(-135deg);
}

.image-slider .slider-arrow--prev {
    left: 10px;
}

.image-slider .slider-arrow--next {
    right: 10px;
}

/* ---------- 2c. image lightbox (was fancyBox) ---------- */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(16, 12, 12, 0.69);
}

.lightbox-overlay[hidden] {
    display: none;
}

.lightbox-frame {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.lightbox-frame img {
    display: block;
    width: auto;
    height: auto;
    max-width: calc(100vw - 70px);
    max-height: calc(100vh - 70px);
}

/* 44px touch target, drawn as a 34px dark disc with a white ring */
.lightbox-button {
    position: absolute;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background-color: #1b1b1b;
    color: #fff;
    font-size: 0;
    cursor: pointer;
}

/* Icons drawn in CSS so they stay sharp at any zoom (were text glyphs) */
.lightbox-button::before,
.lightbox-button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
}

.lightbox-prev::before,
.lightbox-next::before {
    width: 10px;
    height: 10px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.lightbox-next::before {
    transform: translate(-70%, -50%) rotate(45deg);
}

.lightbox-prev::before {
    transform: translate(-30%, -50%) rotate(-135deg);
}

.lightbox-close::before,
.lightbox-close::after {
    width: 16px;
    height: 2px;
    background-color: currentColor;
    transform: translate(-50%, -50%) rotate(45deg);
}

.lightbox-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.lightbox-button:focus {
    outline: none;
}

.lightbox-button:hover,
.lightbox-button:focus-visible {
    background-color: #beb3ad;
    outline: none;
}

.lightbox-close {
    top: -20px;
    right: -20px;
}

.lightbox-prev,
.lightbox-next {
    top: 50%;
    transform: translateY(-50%);
}

.lightbox-prev {
    left: 12px;
}

.lightbox-next {
    right: 12px;
}

.lightbox-overlay.is-single .lightbox-prev,
.lightbox-overlay.is-single .lightbox-next {
    display: none;
}

body.lightbox-open {
    overflow: hidden;
}

/* ---------- 2d. contact map (was an embedded Google Map) ---------- */
.map-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 16px;
    background-color: #f5f3f2;
    text-align: center;
}

.map-link__marker {
    display: block;
    margin: 0 auto 16px;
}

.map-link__address {
    margin-bottom: 20px;
    color: #6d625c;
}

.map-link__button {
    min-height: 44px;
    white-space: normal;
}

/* ---------- 2e. layout fixes the old site needed too ---------- */
/* The hover menu of the last top-level item stuck out past the right edge,
   so every page scrolled sideways on desktop. Align it to the right instead. */
@media (min-width: 1025px) {
    .sx-navigation--standard > .sx-navigation__list > .sx-navigation__list-entry:last-child > .sx-navigation__sub-navigation {
        left: auto;
        right: 0;
    }
}

/* Long URLs in the legal texts pushed the page wider than a phone screen. */
.page-content a {
    overflow-wrap: anywhere;
}

/* ---------- 2f. section arrows follow the mouse ---------- */
/* site.js sets --arrow-x while the mouse moves over a section; the arrow stays where it was left. */
.triangle-bottom::before {
    left: var(--arrow-x, 50%);
    transition: left 0.6s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .triangle-bottom::before {
        transition: none;
    }
}

/* ---------- 2g. process wheel on the home page ---------- */
/* Without a mouse (phones, tablets) the step texts are a list under the wheel; with a mouse
   site.js adds .is-interactive and the text of the step under the mouse shows in the centre. */
.process-wheel {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
}

.wheel-disc {
    position: relative;
}

.process-wheel-graphic {
    display: block;
    width: 100%;
    height: auto;
}

.wheel-segment path {
    fill: #beb3ad;
    stroke: #fff;
    stroke-width: 4;
    stroke-linejoin: round;
    transition: fill 0.3s ease;
}

.wheel-segment .wheel-label-path {
    fill: none;
    stroke: none;
}

.wheel-segment text {
    fill: #fff;
    font-family: NewsGothic-Demi;
    font-size: 17px;
    letter-spacing: 0.05em;
    pointer-events: none;
}

.wheel-segment:hover path:not(.wheel-label-path),
.wheel-segment:focus-visible path:not(.wheel-label-path),
.wheel-segment.is-active path:not(.wheel-label-path) {
    fill: #a52024;
}

.wheel-segment:focus {
    outline: none;
}

.wheel-claim {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56%;
    margin: 0;
    transform: translate(-50%, -50%);
    font-family: ArbitraryOT-Regular;
    font-size: clamp(16px, 4.5vw, 24px);
    line-height: 1.3;
    letter-spacing: 0.125em;
    text-transform: uppercase;
    text-align: center;
    color: #bfb4ad;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px 30px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.process-steps .wheel-step {
    padding: 0;
}

.process-steps .wheel-step::before,
.process-steps .wheel-step::after {
    display: none;
}

.wheel-step strong {
    color: #bfb4ad;
}

.process-steps .wheel-step a,
.process-steps .wheel-step a:hover {
    color: #a52024;
}

.process-wheel.is-interactive .process-steps {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46%;
    margin: 0;
    gap: 0;
    grid-template-columns: 1fr;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 17px;
    line-height: 1.4;
    pointer-events: none;
}

.process-wheel.is-interactive .wheel-step {
    grid-area: 1 / 1;
    align-self: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.process-wheel.is-interactive .wheel-step strong {
    color: #a52024;
    letter-spacing: 0.08em;
}

.process-wheel.is-interactive .wheel-step.is-active {
    opacity: 1;
    pointer-events: auto;
}

.process-wheel.is-interactive.has-active .wheel-claim {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .wheel-segment path,
    .wheel-claim,
    .process-wheel.is-interactive .wheel-step {
        transition: none;
    }
}

/* ---------- 2h. contact persons on the home page ---------- */
.home-contact {
    scroll-margin-top: 120px; /* the fixed header must not cover the heading */
}

/* Four people in a row: equal card heights, names and e-mail addresses on one line. */
.home-contact .team-member {
    display: flex;
    flex-direction: column;
}

.home-contact .team-member .content {
    flex: 1;
    background-color: #fff;
    padding: 30px 18px 25px;
}

.home-contact .team-member h3 {
    font-size: 20px;
}

.home-contact .team-member-infos {
    font-size: 14px;
    white-space: nowrap;
}

/* ---------- 2i. language switch next to the menu (desktop) ---------- */
/* The DE | FR pair the mobile menu already has becomes a small pill switch at the height of the
   main menu, just right of it; the globe dropdown is hidden. Phones keep their own list. */
@media (min-width: 1025px) {
    .header .desktop-container {
        position: relative;
    }

    .header .service-navigation,
    .header.shrink .service-navigation {
        position: absolute;
        right: 0;
        bottom: 29px;
        margin: 0;
        z-index: 2;
    }

    .header.shrink .service-navigation {
        bottom: 24px;
    }

    /* Keeps the menu where it was when the switch still sat above it. */
    .header .main-navigation {
        margin-top: 77px;
        margin-right: 100px;
        transition: margin-top 0.4s;
    }

    .header.shrink .main-navigation {
        margin-top: 6px;
    }

    .header .custom-lang-select-box.d-lg-block {
        display: none !important;
    }

    .header .moble-lang-select.d-lg-none {
        display: block !important;
    }

    .header .moble-lang-select .nav {
        display: flex;
        flex-wrap: nowrap;
        padding: 2px;
        border: 1px solid #d7d1cc;
        border-radius: 999px;
    }

    .header .service-navigation .moble-lang-select li a {
        position: static;
        display: block;
        padding: 5px 10px 4px;
        font-size: 13px;
        letter-spacing: 0.1em;
        color: #beb3ad !important;
        border-radius: 999px;
        text-decoration: none;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .header .service-navigation .moble-lang-select li a::after {
        content: none;
    }

    .header .service-navigation .moble-lang-select li a:not(.active):hover {
        color: #a52024 !important;
        text-decoration: none;
    }

    .header .service-navigation .moble-lang-select li a.active {
        color: #fff !important;
        background-color: #beb3ad;
        text-decoration: none;
    }
}

/* ---------- 2j. one text size for running text ---------- */
/* Intro texts (.lead, .special-font-1), paragraphs and list items share one size on every page.
   :where() keeps this weaker than any component's own size (cards, wheel, map, footer). */
.page-content .lead,
.page-content .special-font-1,
:where(.page-content) :is(p, li) {
    font-size: 19px;
    line-height: 1.5;
}

@media (max-width: 1024px) {
    .page-content .lead,
    .page-content .special-font-1,
    :where(.page-content) :is(p, li) {
        font-size: 18px;
    }
}

:where(.page-content) .team-member p {
    font-size: 16px;
}

.process-wheel.is-interactive .wheel-step {
    font-size: 17px;
    line-height: 1.4;
}

/* ---------- 2k. footer company name ---------- */
/* Same size as the address lines below it (was 19px); stays bold. */
.footer p.title {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 0;
}

/* ---------- 2l. one text colour, privacy page, small buttons ---------- */
.page-content .lead,
.page-content .special-font-1 {
    color: #323232;
}

/* The French privacy page uses plain <div>s and <h4>s: same size as everywhere else. */
:where(.page-content) div:not([class]) {
    font-size: 19px;
    line-height: 1.5;
}

.page-content h4 {
    font-size: 1.5rem;
}

.page-content .btn {
    font-size: 13px;
}

/* ---------- 2m. contact page: cards, opening hours, holidays ---------- */
.contact-card {
    width: 100%;
    padding: 35px 30px;
    background-color: #fff;
    text-align: left;
}

.contact-card h3 {
    margin-bottom: 20px;
}

.contact-card .btn {
    margin-top: 10px;
}

.hours {
    padding: 30px 40px;
}

.hours-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* These lists sit inside .styled-list: drop its arrows and lines. */
.page-content .hours-list li::before,
.page-content .hours-list li::after,
.page-content .dates-list li::before,
.page-content .dates-list li::after {
    display: none;
}

.page-content .dates-list li {
    padding-left: 0;
}

/* One slim line per group of days: days | times | thin bar from 7 to 18 h. */
.page-content .hours-row {
    display: grid;
    grid-template-columns: 280px 310px 1fr;
    align-items: center;
    gap: 20px;
    padding: 12px 0;
    border-bottom: 2px solid #f5f3f2;
}

.page-content .hours-row:last-child {
    border-bottom: 0;
}

.hours-day {
    font-family: NewsGothic-Demi;
}

.hours-today {
    display: none;
    color: #a52024;
}

.hours-row.is-today .hours-today {
    display: inline;
}

.hours-track {
    position: relative;
    height: 8px;
    border-radius: 4px;
    background-color: #f5f3f2;
}

.hours-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--from);
    width: calc(var(--to) - var(--from));
    border-radius: 4px;
    background-color: #beb3ad;
}

.hours-row.is-today .hours-bar {
    background-color: #a89c95;
}

.hours-now {
    display: none;
    position: absolute;
    top: -5px;
    bottom: -5px;
    left: var(--now);
    width: 2px;
    background-color: #a52024;
}

.hours-row.is-today .hours-now.is-visible {
    display: block;
}

.page-content .hours-note {
    margin: 15px 0 0;
    font-size: 16px;
    color: #6e625a;
}

.dates-list {
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

.page-content .dates-list li {
    padding: 7px 0 7px 0;
    border-bottom: 2px solid #f5f3f2;
}

.dates-when {
    font-family: NewsGothic-Demi;
}

/* Company holidays: name on its own line, then the dates, with a little air. */
.page-content .dates-list--vacation li {
    line-height: 1.6;
}

.dates-list--vacation .dates-when {
    display: inline-block;
    margin-bottom: 4px;
}

.page-content .dates-more {
    margin: 10px 0;
    color: #a52024;
    font-size: 16px;
}

@media (max-width: 991px) {
    .hours {
        padding: 20px;
    }

    .page-content .hours-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .hours-track {
        margin-top: 6px;
    }
}

/* Opening hours in a narrow column: days, times and bar stacked. */
.hours--compact {
    padding: 35px 30px;
}

.page-content .hours--compact .hours-row {
    grid-template-columns: 1fr;
    gap: 2px;
}

.hours--compact .hours-track {
    margin-top: 6px;
}

.contact-card--bordered {
    border: 2px solid #f5f3f2;
}

/* Even line breaks: headings and centred intro texts get balanced lines (no lone word on the
   last line, e.g. "DE MÉTIER."); running text avoids very short last lines. Browsers without
   support simply wrap as before. */
.page-content :is(h1, h2, h3),
.page-content .lead p,
.page-content .special-font-1 p[style*="center"] {
    text-wrap: balance;
}

.page-content :is(p, li) {
    text-wrap: pretty;
}

/* ---------- 2n. key facts (apprenticeship page) ---------- */
.fact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    padding: 25px 15px;
    border: 2px solid #f5f3f2;
    text-align: center;
}

.fact-value {
    font-family: ArbitraryOT-Regular;
    font-size: 26px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a52024;
}

.fact-label {
    margin-top: 6px;
    font-size: 16px;
    color: #323232;
}

@media (max-width: 575px) {
    .fact {
        padding: 20px 8px;
    }

    .fact-value {
        font-size: 18px;
        letter-spacing: 0.04em;
        overflow-wrap: anywhere;
    }
}

/* ---------- 2o. misc ---------- */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ---------- 2p. tile headings fit their column (DINish runs wider) ---------- */
.overview-box h3 {
    overflow-wrap: break-word;
    hyphens: manual;
}
.overview-box p {
    overflow-wrap: break-word;
    hyphens: auto;
    hyphenate-limit-chars: 14 6 6;
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    .overview-box h3 {
        letter-spacing: 1px;
    }
}

/* ---------- 2q. footer links: white, level with the last address line ---------- */
.footer-navigation li a {
    color: #fff;
}

@media (min-width: 992px) {
    .footer .row > .col-lg-5 {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .footer .if-comment-mb-40 {
        margin-bottom: 0;
    }

    .footer-navigation li a {
        display: block;
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.5;
    }
}

/* ---------- 2r. contact persons: name on one line ---------- */
.team-member .content h3 {
    white-space: nowrap;
    letter-spacing: 1.5px;
}

/* Four narrow cards per row on small desktops */
@media (min-width: 1025px) and (max-width: 1279.98px) {
    .team-member .content h3 {
        font-size: 16px !important;
        letter-spacing: 1px;
    }

    .team-member .team-member-infos a {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* Key facts: long words fit the four narrow boxes on small desktops */
@media (min-width: 992px) and (max-width: 1279.98px) {
    .fact-value {
        font-size: 22px;
    }
}