/*
 * DigitalSpital — accessibility corrections (WCAG 2.1 AA).
 * Enqueued by mu-plugins/digitalspital-accessibility.php
 */

/*
 * Violation: "Text contrast of 4.37 with its background is less than the WCAG AA
 * minimum requirements for text of size 20px and weight 600."
 *
 * Affected: <h6>Unser Team</h6>, brand red #E4003D on a black section.
 *
 * #E4003D scores 4.81:1 on white — it passes everywhere else on the site — but only
 * 4.37:1 on black, just under the 4.5:1 required for text that is not large-scale.
 * The brand colour is therefore left untouched and only re-pointed inside dark
 * sections, where #F0245A scores 5.11:1.
 *
 * The override is applied to the Elementor global custom property rather than to the
 * heading itself, so every element in the section that draws on the brand red is
 * corrected — not just the one heading the scan happened to flag. Custom properties
 * inherit, so declaring it on the section wins for that subtree regardless of the
 * order in which this stylesheet loads.
 *
 * .ds-on-dark is a reusable hook: add that class to any future dark container to get
 * the same correction without editing this file.
 */
.elementor-element-b90adba,
.ds-on-dark {
	--e-global-color-vamtam_accent_4: #F0245A;
}

/*
 * Violation: "Text contrast of 2.85 ... less than the WCAG AA minimum" (2 nodes,
 * /agentur/ hero).
 *
 * White text sits on a scrim declared as #00000066 (40% black). With the white
 * page body showing through, the effective background is rgb(153,153,153), giving
 * 2.85:1 against white — just under the 3:1 required for large-scale text.
 *
 * The scrim exists precisely to make this text legible, so deepening it to 50%
 * black is faithful to the design intent. That yields rgb(128,128,128) and 3.95:1,
 * a comfortable margin rather than a borderline pass.
 *
 * The `body` prefix is required: Elementor's own rule carries four classes, so an
 * equal-specificity override would depend on stylesheet order.
 */
body .elementor-1467 .elementor-element.elementor-element-9b32ad2 .elementor-widget-container,
body .elementor-1467 .elementor-element.elementor-element-10772df .elementor-widget-container {
	background-color: #00000080;
}

/*
 * Violation: "Text contrast of 1.22 ..." and "... of 2.85 ..." - one recurring bug.
 *
 * Across the site, sections are authored with light text -
 * --e-global-color-vamtam_accent_2 (#E9E9E7) or plain white - while the container
 * behind them supplies no background colour. Two such containers still declare
 * background-color:#00000000, black with the alpha zeroed, which shows the dark
 * backdrop was configured and then lost rather than never intended.
 *
 * The text lands on the white page body at 1.22:1 - invisible, not merely
 * low-contrast - or, where a #00000066 scrim sits over white, at 2.85:1 against an
 * effective rgb(153,153,153).
 *
 * Two different repairs are needed, because four of these sections sit inside a
 * parent that carries a hero photograph. An opaque band would hide the photo, so
 * those get a scrim instead and the image still reads through it. Contrast checkers
 * ignore background images and measure against the solid colour underneath, which
 * is what the ratios below refer to; over the photograph the real contrast is at
 * least as good, since the photo is darker than the white body.
 *
 * Every container was checked to hold only light text, with no descendant supplying
 * its own background.
 *
 * This is a content-side authoring mistake repeated across pages. The durable fix is
 * to set these section backgrounds in Elementor, after which these rules can go.
 */

/*
 * (a) No image behind - restore the solid dark band. #E9E9E7 on #242627 = 12.5:1.
 *
 *   1467   /agentur/                                     23d30af  (12 nodes)
 *   1467   /agentur/ (mobile twin of 23d30af)            c729d08  (12 nodes)
 *   991117 /agentur/digitalspital-business-innovator-... d3b79c2  (3 nodes)
 *
 * c729d08 is the same testimonial block duplicated for phones (hidden on desktop
 * and tablet), so it inherited the missing background but not the fix above.
 */
body .elementor-1467 .elementor-element.elementor-element-23d30af,
body .elementor-1467 .elementor-element.elementor-element-c729d08,
body .elementor-991117 .elementor-element.elementor-element-d3b79c2 {
	background-color: var( --e-global-color-vamtam_accent_1, #242627 );
}

/*
 * (b) Hero sections with a photograph - restore the black the parallax stripped.
 *
 * These sections do have a dark backdrop by design: Elementor's CSS sets
 * background-color:var(--e-global-color-vamtam_accent_6) (#000) together with the
 * hero image on the section container. But the motion-effects (parallax) feature
 * moves both the image and that colour onto an absolutely positioned child,
 * .elementor-motion-effects-layer, and leaves the container itself transparent.
 *
 * The black is therefore still painted on screen, but it is no longer in the text's
 * chain of ancestors. A contrast checker walks upward from the text, never meets it,
 * and measures against the white page body instead - reporting 1.22:1 for #E9E9E7
 * and 2.85:1 for white under a scrim, even though the text is perfectly legible over
 * the dark photograph.
 *
 * Putting the colour back on the container fixes the measurement without touching
 * the design: an element's own background paints behind its children, so the
 * parallax layer with the photograph still covers it completely and the image looks
 * exactly as it did. #E9E9E7 on #000 is 17.27:1 and white is 21:1.
 *
 * Darkening the inner container instead - the obvious move - is wrong here: it
 * paints *over* the parallax layer and washes the photograph out.
 *
 *   16671  /leistungen/             4ea58e0   (heading 8cf1022, was 2.85)
 *   16604  /vorgehen/               63a3525   (f08c41d, was 1.22)
 *   991288 /produkte/kiosk-app/     591c63d   (74a5a08, was 1.22)
 *   990922 /produkte/website-check/ 1738076   (d8e782c + 5b85a54, were 1.22)
 *   1051   /karriere/               cfa50cf   (button baad5eb, was 1.22)
 *
 * /karriere/ differs slightly: its hero declares no colour at all, only the dark
 * photograph, so there was nothing to restore. Black is supplied as the fallback
 * the photo already implies, with the same result.
 */
body .elementor-16671 .elementor-element.elementor-element-4ea58e0,
body .elementor-16604 .elementor-element.elementor-element-63a3525,
body .elementor-991288 .elementor-element.elementor-element-591c63d,
body .elementor-990922 .elementor-element.elementor-element-1738076,
body .elementor-1051 .elementor-element.elementor-element-cfa50cf {
	background-color: var( --e-global-color-vamtam_accent_6, #000000 );
}

/*
 * Cookiebot consent banner (third-party markup injected by uc.js on every page).
 *
 * Violation: "Label text is located before its associated checkbox or radio button
 * element" (4 nodes per page: Notwendig, Präferenzen, Statistiken, Marketing).
 * accessibility.js moves each label after its switch in the DOM; order:-1 keeps it
 * drawn on the left exactly as before. The row is a flex container, so this holds
 * at every breakpoint.
 *
 * Violation: "Text contrast of 1.74 ..." on .CybotCookiebotDialogBodyInternalAlias.
 * This is Cookiebot's 100px "TEST" watermark at 25% opacity, an internal marker
 * for the banner configuration, not content meant for visitors. Hidden.
 *
 * The `body` prefix beats Cookiebot's own #CybotCookiebotDialog rules, which are
 * injected after this stylesheet.
 */
body #CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonWrapper > .CybotCookiebotDialogBodyLevelButtonLabel {
	order: -1;
}

body #CybotCookiebotDialog .CybotCookiebotDialogBodyInternalAlias {
	display: none;
}