/* Klon-Overrides (personell-service.de) — un-layered, statisch, wird in clientlayout.hbs
   NACH {{> head}} eingebunden und gewinnt damit per Source-Order gegen das Layers-CSS.
   Nur Korrekturen, die aus dem Zusammenspiel Klon-CSS ⇄ Layers entstehen. Kein !important. */

/* 1) Der Klon setzt html/body auf `height: 100%` (grid24.css). Layers' `.tms-app` traegt
   `tms:h-full tms:flex tms:flex-col` — aus `height:100%` wird damit eine HARTE Viewport-Hoehe
   statt `auto`, und alle Flex-Kinder (.main, footer) werden zusammengestaucht: auf /anmeldung
   ueberlappten Header, Formular und Footer. `height: auto` stellt den Fluss wieder her;
   `min-height: 100dvh` aus dem Utility bleibt aktiv (Sticky-Footer-Verhalten). */
#tms-layers-app {
    height: auto;
}

/* 2) Der geklonte Header ist `position: absolute` (navi.css) — auf der Kundenseite haelt ihn
   die Hero-Section (.headerArea) frei; die Kompensation `header + .main` greift nicht, weil der
   ctaPhone-Link zwischen header und .main steht (so auch im Original). Layers-Seiten ohne Hero
   (anmeldung, user, datenschutz, 404, sitemap, …) haetten den Header sonst ueber dem Content.
   Header in den Fluss holen loest den Platz responsiv ueber --headerHeight/--headerMobileHeight.
   Dunkler Grund ist dabei Pflicht, nicht Kosmetik: `#navi a` ist weiss (navi.css) und waere auf
   dem weissen Seitenhintergrund unsichtbar. #002337 = Footer-Blau des Kunden (weiss darauf 15:1). */
#tms-layers-app:not(:has(.headerArea)) > .main {
    position: relative;
}

#tms-layers-app:not(:has(.headerArea)) header.headerFix {
    position: relative;
    margin-top: 0;
    padding-top: 40px;
    background-color: #002337;
}

/* 3) Doppel-Containering: der WPBakery-Wrapper `.row` begrenzt und zentriert den Content schon
   (max-width 1440px via --maxWidth). Der Layers-Container wuerde ein zweites Mal auf max-w-7xl
   (1280px) begrenzen — die Jobliste stand dadurch 48px eingerueckt gegen Hero-Text und Footer. */
#tms-layers-app main#main .tms-component-container {
    max-width: none;
}

/* WCAG 2.4.7 Fokus — der Klon setzt `transition: .7s` (= all) auf Nav-Links/Logo (navi.css).
   Der Fokus-Ring animiert dadurch von 0 auf 2px; zum Messzeitpunkt (t=0) ist er 0px breit, und
   fuer Tastaturnutzer erscheint er verzoegert. `transition-property: none` nur im Fokus-Zustand
   laesst Hover-Animationen unberuehrt. Farbe kommt aus dem Theme-Token (--tms-color-outline). */
#tms-layers-app :is(a, button, input, select, textarea, [tabindex]):focus,
#tms-layers-app :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--tms-color-outline, #0033a0);
    outline-offset: 2px;
    transition-property: none;
}

/* WCAG 2.4.7, zweiter Teil: `transition-property` im :focus-Zustand allein reicht nicht — der
   Ring animiert weiterhin von 0 auf 2px, weil `transition: all` schon im Ruhezustand gilt
   (gemessen am Filter-Switch: 0px direkt nach dem Fokus, ohne Klon-CSS 3px). outline hier
   dauerhaft aus der Transition nehmen; Farb-/Deckkraft-Animationen des Klons bleiben erhalten. */
#tms-layers-app :is(a, button, input, select, textarea, [tabindex]) {
    /* !important ist hier unvermeidbar: die konkurrierende `transition: all`-Regel des
       TmsLibrary2-Widgets ist selbst !important (gemessen — ohne !important bleibt
       transition-property auf "all" und der Ring auf 0px). */
    /* stylelint-disable-next-line declaration-no-important */
    transition-property: color, background-color, border-color, opacity, transform !important;
}

/* WCAG 1.4.3 — TMS rendert Platzhalter mit `opacity: .6`. Zusammen mit der geklonten Textfarbe
   #002337 ergibt das effektiv #667b87 auf Weiss = 4.42:1, knapp unter AA. Volle Deckkraft plus
   ein etwas helleres Blaugrau haelt den Platzhalter-Charakter und kommt auf 5.5:1. */
#tms-layers-app :is(.tms-placeholder, .tms-place-enter-value, .tms-select-replacement-placeholder) {
    color: #5a6b76;
    opacity: 1;
}

/* WCAG 1.4.3 Kontrast — die globale Klon-Linkfarbe #e10024 ergibt auf dem dunkelblauen Footer
   (#002337) nur 3.26:1. Im Original sind Mail/Telefon dort unverlinkter Text; als Links brauchen
   sie die Textfarbe des Footers plus Unterstreichung als zweites Unterscheidungsmerkmal. */
#tms-layers-app footer .footer-upper a {
    color: #fff;
    text-decoration: underline;
}

/* WCAG 1.4.3 — dieselbe 3.26:1-Kombination beim aktiven Menuepunkt auf dem dunklen Header-Balken
   aus (2). Auf den Hero-Seiten liegt die Nav ueber dem Kundenbild und bleibt rot wie im Original. */
#tms-layers-app:not(:has(.headerArea)) #navi .current-menu-item > a {
    color: #fff;
    text-decoration: underline;
}

/* WCAG 1.4.10 Reflow @320px — das versteckte Off-Canvas-Menue parkt im Klon per
   `margin-right: -540px` rechts ausserhalb des Viewports und erzeugt damit horizontalen
   Scroll-Overflow (scrollWidth 374 > 320). Gleiche Optik/Animation ueber transform, das keinen
   Scroll-Bereich aufspannt. */
@media only screen and (max-width: 1200px) {
    #navi {
        margin-right: 25px;
        transform: translateX(calc(100% + 25px));
        transition:
            transform 1s ease-in-out,
            opacity 1s ease-in-out;
    }

    #navi.showNav {
        margin-right: 25px;
        transform: translateX(0);
    }

    /* Das geparkte Menue ist `position: fixed` — Chrome zaehlt es trotzdem in
       documentElement.scrollWidth (374 > 320), egal ob per margin oder transform geparkt.
       `overflow-x: clip` auf dem Dokument verhindert das horizontale Scrollen wirklich (statt es
       nur zu messen); `overflow-y: visible` bleibt bei `clip` erlaubt, vertikal wird nichts
       abgeschnitten. Bewusst NUR im Off-Canvas-Breakpoint, damit echter Content-Overflow auf
       Desktop weiterhin auffaellt und nicht still weggeclippt wird. */
    html {
        overflow-x: clip;
        overflow-y: visible;
    }
}

/* 4) Folge von (3): auf den Talent-Network-Seiten ist der Inhalt selbst schmal (Formular
   max-w-2xl) und klebte im entgrenzten Container am linken Rand. Container dort auf
   Formularbreite begrenzen und zentrieren — die Jobliste bleibt voll auf Kunden-Breite. */
#tms-layers-app main#main .tms-component--candidate-widget > .tms-component-container {
    max-width: 42rem;
    margin-inline: auto;
}