/*! browserux.css 5.0.0 | 2026 MIT Licence | github.com/Effeilo/browserux.css */

/* ============================================================================
 *
 * ### Architecture - Layer declaration
 *
 * Explicit @layer hierarchy so every rule knows its priority and
 * can be overridden without specificity battles or !important.
 *
 * @layer bux.tokens         : Design tokens (custom properties)
 * @layer bux.preferences.   : User preference media queries
 * @layer bux.native-ui      : Harmonization of native browser UI elements
 * @layer bux.browser-default: Minimal targeted reset, Cross-browser normalization, ergonomic improvements
 *
 * The order here is the cascade priority, last wins.
 *
 * ============================================================================ */

 @layer bux.tokens, bux.browser-default, bux.preferences, bux.native-ui;

/* ============================================================================
 *
 * ### Design Tokens
 *
 * Four-level progressive enhancement strategy:
 *
 * Level 1: :root base (all browsers)
 * Hex values for palette, light-mode hex for semantic tokens,
 * computed hex for derived tokens. Never breaks.
 *
 * Level 2: @supports oklch (Chrome 111+, Firefox 113+, Safari 15.4+)
 * Upgrades palette tokens to perceptually-uniform OKLCH values.
 * Semantic and derived tokens automatically benefit via var() references.
 *
 * Level 3: @supports light-dark() (Chrome 123+, Firefox 120+, Safari 17.5+)
 * Upgrades semantic tokens to adaptive clair/sombre pairs.
 * All browsers that support light-dark() also support oklch, so
 * the var() references to palette tokens are already OKLCH at this point.
 *
 * Level 4: @supports color-mix() (Chrome 111+, Firefox 113+, Safari 16.2+)
 * Upgrades derived tokens to relational computed values.
 * When combined with level 3, these derive correctly from the
 * theme-adaptive semantic tokens.
 *
 * Dependency order is safe:
 * color-mix() support ≥ light-dark() support for every engine, so a browser
 * reaching level 3 always has color-mix() too, and derived tokens always
 * have a valid base to compute from.
 *
 * ============================================================================ */

 @layer bux.tokens {

    /* --------------------------------------------------------------------------
     * ## Level 1: Universal hex fallbacks
     *
     * Light-mode values throughout. Dark mode stays light-mode on unsupporting
     * browsers - readable, not broken.
     * -------------------------------------------------------------------------- */

    :root {

        /**
         * Color scheme: tells the browser which themes are supported.
         * Native UI elements (date pickers, file inputs, selects, scrollbars)
         * will automatically adapt to the active color scheme.
         */
        color-scheme: light dark;

        /**
         * Enables smooth transitions to and from intrinsic size keywords
         * (auto, min-content, max-content, fit-content) across the document.
         * Without this, animating height: auto or similar is not possible in CSS.
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size
         */
        interpolate-size: allow-keywords;

        /**
         * Global palette tokens (hex)
         * Approximate sRGB equivalents of the OKLCH target values.
         * Overridden at level 2 if oklch() is supported.
         */
        --bux-orange-600: #e8540e;
        --bux-blue-500:   #2b7ce8;
        --bux-green-600:  #1c7f44;
        --bux-red-600:    #c42b2b;

        /**
         * Semantic color tokens (light-mode hex)
         * Overridden at level 3 if light-dark() is supported.
         */
        --bux-color-bg:       #eaeaea;
        --bux-color-text:     #121212;
        --bux-color-muted:    #555555;
        --bux-color-border:   #cccccc;
        --bux-color-accent:   #e8540e;
        --bux-color-accent-2: #2b7ce8;
        --bux-color-valid:    #1c7f44;
        --bux-color-invalid:  #c42b2b;
        --bux-progress-track: #efefef;

        /**
         * Derived color tokens (precomputed hex)
         * Overridden at level 4 if color-mix() is supported.
         */
        --bux-color-accent-hover:        #c94a0c; /* accent darkened ~12% */
        --bux-color-accent-soft:         #f5ddd2; /* accent tinted toward bg ~88% */
        --bux-color-valid-surface:       #dff0e7; /* valid tinted toward bg ~88% */
        --bux-color-invalid-surface:     #f5dede; /* invalid tinted toward bg ~88% */
        --bux-focus-color:               #f3a47a; /* accent + white 45% */
        --bux-selection-bg:              #f8c9b0; /* accent + white 65% */
        --bux-selection-color:           #121212;
        --bux-search-text-bg:            #f5ddd2; /* accent tinted toward bg ~88% */
        --bux-search-text-color:         #121212;
        --bux-search-text-current-bg:    #e8540e;
        --bux-search-text-current-color: #121212;
        --bux-scrollbar-thumb:           #aaaaaa; /* muted gray — replaces color-mix transparent */
        --bux-scrollbar-thumb-hover:     #e8540e;

        /**
         * Focus tokens
         */
        --bux-focus-width:  3px;
        --bux-focus-offset: 2px;

        /**
         * Scrollbar tokens
         */
        --bux-scrollbar-bg:     transparent;
        --bux-scrollbar-track:  transparent;
        --bux-scrollbar-width:  10px;
        --bux-scrollbar-height: 10px;

        /**
         * Dialog tokens
         */
        --bux-dialog-backdrop-bg: rgba(0, 0, 0, 0.5);

        /**
         * Motions token
         */
        --bux-duration-fast: 140ms;
        --bux-duration-base: 220ms;
        --bux-easing:        cubic-bezier(0.2, 0, 0, 1);

        /**
         * Typography tokens
         */
        --bux-font-body:   system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
        --bux-font-mono:   ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
        --bux-font-size:   1.6rem;
        --bux-line-height: 1.6;

        /**
         * Progress - placeholder tokens
         */
        --bux-progress-fill:     var(--bux-color-valid);
        --bux-placeholder-color: var(--bux-color-muted);
    }

    /* --------------------------------------------------------------------------
     * ## Level 2: OKLCH palette (Chrome 111+, Firefox 113+, Safari 15.4+)
     *
     * Upgrades raw palette tokens to perceptually-uniform OKLCH values.
     * All tokens that reference these via var() automatically benefit.
     * -------------------------------------------------------------------------- */

    @supports (color: oklch(0% 0 0)) {
        :root {
            --bux-orange-600: oklch(62% 0.20 38);
            --bux-blue-500:   oklch(61% 0.20 256);
            --bux-green-600:  oklch(52% 0.17 150);
            --bux-red-600:    oklch(52% 0.20 25);
        }
    }

    /* --------------------------------------------------------------------------
     * ## Level 3: light-dark() (Chrome 123+, Firefox 120+, Safari 17.5+)
     *
     * Upgrades semantic tokens to adaptive clair/sombre pairs in one declaration.
     * All browsers that support light-dark() also support oklch(), so
     * var(--bux-orange-600) etc. already resolve to OKLCH values here.
     * -------------------------------------------------------------------------- */

    @supports (color: light-dark(white, black)) {
        :root {
            --bux-color-bg:       light-dark(#eaeaea, #121212);
            --bux-color-text:     light-dark(#121212, #eaeaea);
            --bux-color-muted:    light-dark(#555555, #999999);
            --bux-color-border:   light-dark(#cccccc, #444444);
            --bux-color-accent:   light-dark(var(--bux-orange-600), oklch(72% 0.17 38));
            --bux-color-accent-2: light-dark(var(--bux-blue-500),   oklch(73% 0.15 256));
            --bux-color-valid:    light-dark(var(--bux-green-600),  oklch(76% 0.11 150));
            --bux-color-invalid:  light-dark(var(--bux-red-600),    oklch(76% 0.12 25));
            --bux-progress-track: light-dark(#efefef, #2a2a2a);
            --bux-selection-color: var(--bux-color-text);
            --bux-search-text-color: var(--bux-color-text);
            --bux-search-text-current-bg: var(--bux-color-accent);
            --bux-search-text-current-color: #121212;
            --bux-scrollbar-thumb-hover: var(--bux-color-accent);
        }
    }

    /* --------------------------------------------------------------------------
     * ## Level 4: color-mix() (Chrome 111+, Firefox 113+, Safari 16.2+)
     *
     * Upgrades derived tokens to relational computed values.
     * When level 3 is also active, these compute from theme-adaptive tokens
     * so they stay correct in both clair and sombre modes automatically.
     * When level 3 is NOT active (e.g. Chrome 111–122), the hex semantic
     * tokens from level 1 or 2 are used as the base — still correct for
     * light mode.
     * -------------------------------------------------------------------------- */

    @supports (color: color-mix(in oklab, white, black)) {
        :root {
            --bux-color-accent-hover:    color-mix(in oklab, var(--bux-color-accent), black 12%);
            --bux-color-accent-soft:     color-mix(in oklab, var(--bux-color-accent), var(--bux-color-bg) 88%);
            --bux-color-valid-surface:   color-mix(in oklab, var(--bux-color-valid),   var(--bux-color-bg) 88%);
            --bux-color-invalid-surface: color-mix(in oklab, var(--bux-color-invalid), var(--bux-color-bg) 88%);
            --bux-focus-color:           color-mix(in oklab, var(--bux-color-accent), white 45%);
            --bux-selection-bg:          color-mix(in oklab, var(--bux-color-accent), white 65%);
            --bux-search-text-bg:        var(--bux-color-accent-soft);
            --bux-scrollbar-thumb:       color-mix(in oklab, var(--bux-color-text), transparent 65%);
        }
    }

}

/* ============================================================================
 *
 * ### Browser User Preferences
 *
 * This section centralizes the handling of user preferences exposed by the
 * browser and operating system in order to improve accessibility, visual comfort,
 * and overall user experience.
 *
 * Strategy: modify tokens at :root rather than overriding individual
 * component styles. Components that reference the tokens adapt automatically
 * without knowing which preference is active.
 *
 * Exception: some properties (scroll-behavior, forced-color system keywords)
 * cannot be expressed as tokens and require direct declarations.
 *
 * ============================================================================ */

@layer bux.preferences {

    /* ----------------------------------------------------------------------------
     * ## Animations Preferences
     * ---------------------------------------------------------------------------- */

    /**
     * # Smooth Motion (no-preference)
     *
     * If the user has not requested the system to minimize the amount of animation or movement.
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
     * 1. Defines a smooth scroll effect to the scrolling behavior for a scrolling box,
       when scrolling happens due to navigation or CSSOM scrolling APIs.
       @see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
     * 2. Enables smooth transition between Light Mode and Dark Mode only for users
       who have not requested reduced motion.
     */

    @media (prefers-reduced-motion: no-preference) {
        :root {
            scroll-behavior: smooth; 
        }

        body {
            transition:
                background-color var(--bux-duration-base) var(--bux-easing),
                color var(--bux-duration-base) var(--bux-easing);
        } 
    }

    /**
     * # Reduced motion
     *
     * Token approach: set motion tokens to 1ms instead of applying
     * `* { animation-duration: 0s !important }`.
     */

    @media (prefers-reduced-motion: reduce) {
        :root {
            --bux-duration-fast: 1ms;
            --bux-duration-base: 1ms;
        }

        html {
            scroll-behavior: auto; 
        }
    }

    /* ----------------------------------------------------------------------------
     * ## Contrast Preferences
     * ---------------------------------------------------------------------------- */

    /**
     * # High contrast (more)
     *
     * Strengthen the tokens that affect visual distinction: border colour,
     * muted text, focus ring width.
     * Typography: bold de-emphasised elements (em, i, small) so they remain
     * legible when colour contrast is the primary distinguishing factor.
     */

    @media (prefers-contrast: more) {
        /**
         * Hex fallbacks (light mode), active on all browsers.
         */
        :root {
            --bux-focus-width:       4px;
            --bux-color-border:      #555555;
            --bux-color-muted:       #333333;
            --bux-placeholder-color: rgba(16, 16, 16, 0.85);
        }

        /**
         * light-dark() upgrade, active when supported.
         */
        @supports (color: light-dark(white, black)) {
            :root {
                --bux-color-border:      light-dark(#555555, #bbbbbb);
                --bux-color-muted:       light-dark(#333333, #cccccc);
                --bux-placeholder-color: light-dark(rgba(16, 16, 16, 0.85), rgba(239, 239, 239, 0.9));
            }
        }

        /**
         * Placeholder: the token override covers most cases.
         * The rendering rule lives in bux.native-ui so there is a single source
         * for placeholder styling; this preference only strengthens the token.
         */

        /**
         * Disabled elements: use token colour rather than defaulting to
         * browser opacity which can result in near-invisible text.
         */

        [disabled] {
            color: var(--bux-placeholder-color);
        }

        /**
         * Selection: remove text-shadow to avoid blur on solid high-contrast
         * selection backgrounds.
         */

        ::selection {
            text-shadow: none;
        }

        /**
         * De-emphasised text: add bold weight so italics / small remain legible
         * when colour-only differentiation is insufficient.
         */

        :is(em, i, small) {
            font-weight: bold;
        }
    }

    /* ----------------------------------------------------------------------------
     * ## Transparency Preferences
     * ---------------------------------------------------------------------------- */

    /**
     * # Reduced Transparency
     *
     * Strengthens semi-transparent surfaces for users who have enabled
     * "Reduce Transparency" in their OS accessibility settings.
     *
     * - Dialog backdrop becomes near-opaque to maintain background blur replacement
     * - WebKit scrollbar background is set explicitly to avoid translucency artifacts
     *
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-transparency
     */

    @media (prefers-reduced-transparency: reduce) {
        /**
         * Token overrides:
         * - Dialog backdrop becomes near-opaque so dialog content remains clear.
         * - WebKit scrollbar background aligns with the page background.
         */

        :root {
            --bux-dialog-backdrop-bg: rgba(0, 0, 0, 0.9);
            --bux-scrollbar-bg: var(--bux-color-bg);
        }
    }

    /* ----------------------------------------------------------------------------
     * ##  Forced Colors (Windows High Contrast Mode)
     * ---------------------------------------------------------------------------- */

    /**
     * # Forced colors active
     *
     * In forced-color environments the browser replaces author colours with
     * system palette entries. Cooperate rather than override.
     *
     * CSS system color keywords used here:
     * Highlight : the system selection / accent color (focus rings)
     * ButtonText: text color on a button surface (form control borders)
     * Canvas.   : the default surface color (background)
     * CanvasText: the default text color
     *
     * Focus is adapted through tokens so the native-ui focus rules remain the
     * single rendering path while still using system colors.
     */

    @media (forced-colors: active) {

        /**
         * Focus ring: use the system Highlight color so it remains visible
         * regardless of which high-contrast palette the user has chosen.
         */

        :root {
            --bux-focus-color: Highlight;
        }

        /**
         * Form controls: restore a visible border using ButtonText.
         * Forced colors often remove box decorations; an explicit border ensures
         * the control boundary remains identifiable.
         */

        :is(button, input, select, textarea) {
            border: 1px solid ButtonText;
        }

        /**
         * Disabled elements: opacity provides the visual dimming
         * because colour is managed by the system palette.
         */

        :is([disabled], [aria-disabled="true"]) {
            opacity: 0.5;
        }

    }

}

/* ============================================================================
 *
 * ### Browser UI Theme
 *
 * This section defines the visual customization of native browser UI elements
 * to align them with the application's design system and branding.
 *
 * It enhances default browser rendering by applying consistent styles
 * to interactive and system-level elements while preserving usability
 * and accessibility.
 *
 * The goal is to create a cohesive user experience across browsers by
 * bridging the gap between native UI components and custom design tokens.
 *
 * All styles rely on design tokens defined in `:root`, ensuring consistency,
 * easy theming, and maintainability across the entire application.
 *
 * Wherever possible, native browser features (e.g. `accent-color`,
 * `:focus-visible`) are leveraged instead of fully custom components,
 * allowing for better performance and accessibility.
 *
 * ============================================================================ */

@layer bux.native-ui {

    /* ----------------------------------------------------------------------------
     * ##  Text Selection
     * ---------------------------------------------------------------------------- */

    /**
     * :root::selection (not *::selection) respects the special inheritance model
     * of highlight pseudo-elements. Applying *::selection can disrupt descendant
     * highlight pseudo-elements in unexpected ways.
     *
     * Always declare both background-color and color together; providing only
     * one leaves the contrast at the browser's mercy.
     */

    :root::selection {
        background-color: var(--bux-selection-bg);
        color: var(--bux-selection-color);
    }

    /* ----------------------------------------------------------------------------
     * ## Find-in-Page Highlight
     * ---------------------------------------------------------------------------- */

    /**
     * Styles the matches produced by the browser's in-page search (Ctrl+F / Cmd+F)
     * via the native CSS Highlight pseudo-element `::search-text`.
     *
     * Experimental: unsupported browsers safely ignore these selectors and keep
     * their native find-in-page highlight.
     *
     * Only a restricted set of properties is allowed on highlight pseudo-elements
     * (color, background-color, text-decoration, text-shadow, -webkit-text-stroke).
     * Layout-affecting properties (padding, border, box-shadow…) are ignored.
     *
     * @see https://drafts.csswg.org/css-pseudo-4/#highlight-pseudos
     */

    /**
     * # ::search-text - All Matches
     *
     * Applies a branded highlight to every occurrence found by the user's
     * find-in-page query, using the dedicated design tokens.
     */

    ::search-text {
        background-color: var(--bux-search-text-bg);
        color: var(--bux-search-text-color);
    }

    /**
     * # ::search-text:current - Active Match
     *
     * Highlights the currently focused match (the one the user navigates to with
     * Enter / arrows) with a stronger color for clear visual distinction.
     */

    ::search-text:current {
        background-color: var(--bux-search-text-current-bg);
        color: var(--bux-search-text-current-color);
    }

    /* ----------------------------------------------------------------------------
     * ##  Scrollbar Styling
     * ---------------------------------------------------------------------------- */

    /**
     * # Firefox Scrollbar (scrollbar-color)
     *
     * Applies standard scrollbar styling only in Firefox, allowing more advanced
     * customization with WebKit pseudo-elements in other modern browsers (Chrome, Safari, Edge).
     *
     * Without this block, `::-webkit-scrollbar` rules will be ignored in
     * Chrome > 120, Edge > 120, and Safari > 18.1, because `scrollbar-color`
     * overrides them if present globally.
     */

    @supports (-moz-appearance: none) {
        html {
            scrollbar-color: var(--bux-scrollbar-thumb) var(--bux-scrollbar-track);
            scrollbar-width: auto; 
        }
    }

    /**
     * # WebKit Scrollbar (::-webkit-scrollbar)
     *
     * Provides advanced scrollbar customization for all WebKit-based browsers
     * and engines (Chrome, Safari, Edge, Opera).
     *
     * Unlike Firefox, which uses the standardized `scrollbar-color` property,
     * WebKit browsers rely on a set of proprietary pseudo-elements to style
     * each part of the scrollbar individually (track, thumb, buttons, corner).
     *
     * These rules are scoped to WebKit only and remain fully effective because
     * `scrollbar-color` is explicitly limited to Firefox via `@supports`.
     *
     * This approach ensures:
     * - Consistent visual theming across browsers
     * - Fine-grained control over scrollbar appearance and interaction states
     * - No conflicts between standard and proprietary implementations
     *
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
     */

    /**
     * WebKit Scrollbar - Track Container
     * WebKit scrollbar pseudo-elements used for advanced customization
     * in all modern non-Firefox browsers. These styles are now fully active because
     * scrollbar-color is scoped to Firefox only.
     */

    ::-webkit-scrollbar {
        background: var(--bux-scrollbar-bg);
        height: var(--bux-scrollbar-height);
        width: var(--bux-scrollbar-width);
    }

    /**
     * WebKit Scrollbar - Increment/Decrement Buttons
     * Hides the up/down arrow buttons on the scrollbar ends
     * for a cleaner, minimal scrollbar appearance.
     */

    ::-webkit-scrollbar-button {
        display: none;
    }

    /**
     * WebKit Scrollbar - Track
     * Styles the track area (the groove the thumb moves along).
     */

    ::-webkit-scrollbar-track {
        background-color: var(--bux-scrollbar-track);
    }

    /**
     * WebKit Scrollbar - Thumb
     * Styles the draggable thumb element.
     * Border-radius is derived from the scrollbar width to create a pill shape.
     */

    ::-webkit-scrollbar-thumb {
        background-color: var(--bux-scrollbar-thumb);
        border-radius: calc(var(--bux-scrollbar-width) / 2);
    }

    /**
     * WebKit Scrollbar - Thumb Hover
     * Switches to the primary accent color on hover for interactive feedback.
     */

    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--bux-scrollbar-thumb-hover);
    }

    /**
     * WebKit Scrollbar - Corner
     * Makes the corner where vertical and horizontal scrollbars meet transparent
     * to avoid an awkward colored square.
     */

    ::-webkit-scrollbar-corner {
        background: transparent;
    }

    /* ----------------------------------------------------------------------------
     * ## Focus Management
     * ---------------------------------------------------------------------------- */

    /**
     * # :focus - Focus Fallback
     *
     * Provides a visible focus outline by default as a safe fallback for
     * browsers that do not support `:focus-visible`.
     * This fallback is then refined below so mouse focus does not show an
     * outline in browsers that support `:focus-visible`.
    */

    :where(a, button, input, select, textarea, summary, [contenteditable], [tabindex]):focus {
        outline: var(--bux-focus-width) solid var(--bux-focus-color);
        outline-offset: var(--bux-focus-offset);
    }

    /**
     * Removes the fallback outline when the element is focused but the browser
     * determines that a visible focus indicator is not necessary, typically
     * after mouse interaction.
     */

    :where(a, button, input, select, textarea, summary, [contenteditable], [tabindex]):focus:not(:focus-visible) {
        outline: none;
    }

    /**
     * # :focus-visible - Keyboard Focus Ring
     *
     * Applies a visible, branded focus indicator for keyboard and sequential
     * navigation when the browser determines focus visibility is necessary.
     */

    :where(a, button, input, select, textarea, summary, [contenteditable], [tabindex]):focus-visible {
        outline: var(--bux-focus-width) solid var(--bux-focus-color);
        outline-offset: var(--bux-focus-offset);
    }

    /* ----------------------------------------------------------------------------
     * ## Form UX Enhancements
     * ---------------------------------------------------------------------------- */

    /**
     * # Accent Color - Checkboxes, Radios, Ranges, Meters, Selects
     *
     * Uses `accent-color` to tint native browser UI controls
     * (checkbox checkmark, radio dot, range thumb, meter fill, select highlight)
     * with the primary brand color.
     */

    :is(input[type="checkbox"], input[type="radio"], input[type="range"], meter, select) {
        accent-color: var(--bux-color-accent);
    }

    /**
     * # Progress Accent Color
     *
     * Sets `accent-color` on `<progress>` separately because its filled portion
     * uses a distinct token (`--bux-progress-value-bg`) from the primary accent.
     */

    progress {
        accent-color: var(--bux-progress-fill);
    }

    /**
     * # Placeholder
     *
     * opacity: 1 counteracts the default opacity some browsers apply.
     * A placeholder is example text, not a label, keep it visibly secondary.
     */

    ::placeholder {
        color: var(--bux-placeholder-color);
        opacity: 1;
    }

    /**
     * # Caret Color
     *
     * Applies the primary accent color to the text cursor in editable fields,
     * providing a branded feel without affecting text color.
     *
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color
     */

    :is(input, textarea, [contenteditable]) {
        caret-color: var(--bux-color-accent);
    }

    /**
     * # Form Validation States
     *
     * Visual feedback for valid and invalid field states using :user-valid / :user-invalid.
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/:user-invalid
     */

    /**
     * Valid Field State
     * Applies a green tint to fields that have been interacted with and contain
     * valid input. Uses `:user-valid` (triggered only after user interaction,
     * unlike `:valid` which fires immediately on page load).
     */

    :is(input, textarea, select):user-valid {
        background-color: var(--bux-color-valid-surface);
        border-color: var(--bux-color-valid);
    }

    /**
     * Invalid Field State
     * Applies a red tint to fields that have been interacted with and contain
     * invalid input. Uses `:user-invalid` for the same post-interaction reason.
     */

    :is(input, textarea, select):user-invalid {
        background-color: var(--bux-color-invalid-surface);
        border-color: var(--bux-color-invalid);
    }

    /**
     * Invalid Placeholder Color
     * Tints the placeholder text red inside invalid fields to reinforce
     * the error state even before the user has typed anything.
     */

    :is(input, textarea):user-invalid::placeholder {
        color: var(--bux-color-invalid);
    }

    /**
     * # Progress Bar
     *
     * Cross-browser styling for the <progress> element track and filled value
     */

    /**
     * Progress Bar - WebKit Track
     * Styles the unfilled background track of `<progress>` in WebKit browsers.
     * Border-radius gives it a pill shape consistent with the filled portion.
     */

    progress::-webkit-progress-bar {
        background-color: var(--bux-progress-track);
        border-radius: 8px;
    }

    /**
     * Progress Bar - WebKit Value
     * Styles the filled portion of `<progress>` in WebKit browsers.
     */

    progress::-webkit-progress-value {
        background-color: var(--bux-progress-fill);
        border-radius: 8px;
    }

    /**
     * Progress Bar - Firefox Value
     * Styles the filled portion of `<progress>` in Firefox.
     * Firefox uses a separate pseudo-element from WebKit.
     */

    progress::-moz-progress-bar {
        background-color: var(--bux-progress-fill);
    }

    /**
     * Range input - WebKit & Firefox thumb
     *
     * A minimal thumb override: only background and border.
     * For full track + thumb customisation (appearance: none, rail drawing)
     * add those rules in the component or application layer, that level of
     * control is a design decision, not a base normalisation.
     */

    input[type="range"]::-webkit-slider-thumb,
    input[type="range"]::-moz-range-thumb {
        background: var(--bux-color-accent);
        border: none;
    }

}

/* ============================================================================
 *
 * ### Browser Default Styles
 *
 * This section establishes a consistent baseline across browsers by
 * normalizing and resetting default styles applied to HTML elements.
 *
 * It removes inconsistencies between user agents and provides a clean,
 * predictable base for building UI components.
 *
 * The goal is not to fully strip browser behavior, but to standardize it
 * while preserving accessibility, usability, and native capabilities.
 *
 * This layer acts as the base of the styling architecture,
 * ensuring all components start from a stable and consistent base.
 *
 * It is designed to work seamlessly with design tokens and higher-level
 * UI theming, without introducing opinionated visual styles.
 *
 * ============================================================================ */

@layer bux.browser-default {

    /* ----------------------------------------------------------------------------
     * ## [hidden] Attribute
     * ---------------------------------------------------------------------------- */

    /**
     * Ensures elements in the hidden state remain invisible even if another
     * stylesheet accidentally assigns them a display value.
     *
     * `hidden="until-found"` is intentionally excluded so the browser can keep
     * its native "hidden until found" behavior for in-page search and fragment
     * navigation. Only the classic hidden state is forced to `display: none`.
     *
     * @see https://html.spec.whatwg.org/multipage/rendering.html#hidden-elements
     */

    [hidden]:where(:not([hidden="until-found"])) {
        display: none !important;
    }

    /* ----------------------------------------------------------------------------
     * ## Box model
     * ---------------------------------------------------------------------------- */

    /**
     * # Box-Sizing Inheritance
     *
     * Propagates `box-sizing` from `<html>` to all elements via inheritance.
     * This pattern allows components to opt out by resetting `box-sizing` on
     * their own root without needing to override the universal selector.
     *
     * @see https://www.paulirish.com/2012/box-sizing-border-box-ftw/
     */

    *,
    ::before,
    ::after {
        box-sizing: inherit;
    }

    /**
     * # html — Border Box
     *
     * Sets `border-box` on the root element so all descendants inherit it
     * (via the rule above). Ensures padding and borders are included within
     * declared widths and heights.
     */

    html {
        box-sizing: border-box;
    }

    /* ----------------------------------------------------------------------------
    * ##  The Root Element
    * ---------------------------------------------------------------------------- */

    /**
     *  1. Improve consistency of default fonts in all browsers.
        @see https://github.com/sindresorhus/modern-normalize/issues/3
     *  2. Relative value unit refers to the size of the parent element.
        Browsers' font size default is 16px. For a 1em/10px report,
        we divide the size by the default size: 10/16 x 100 = 62.5%.
     *  3. Ensure the root element covers the full viewport height for consistent layouts.
     *  4. Fallback for browsers that do not support scrollbar-gutter: stable (see 9).
        Forces the vertical scrollbar to always be visible to prevent layout
        shifts between pages with and without enough content to scroll.
        @see https://css-tricks.com/snippets/css/force-vertical-scrollbar/
     *  5. Fonts on macOS will look more consistent with other systems that do not
        render text using sub-pixel anti-aliasing.
        @for macOS.
     *  6. Remove the highlighting effect when "tapped" action on webkit browsers.
        @for Androids.
     *  7. Use a more readable tab size.
     *  8. Prevent iOS text size adjust after orientation change, without disabling
        user zoom.
        @for iOS Safari 5.1+.
     *  9. Modern replacement for overflow-y: scroll (see 4) to prevent layout shifts
        caused by the scrollbar appearing or disappearing.
        Reserves space for the scrollbar gutter even when no scrollbar is displayed,
        without forcing a permanent visible scrollbar.
        Both rules are kept for full cross-browser coverage:
        scrollbar-gutter for modern browsers, overflow-y: scroll as fallback.
        @see https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter
    */

    html {
        font-family: var(--bux-font-body); /* 1 */
        font-size: 62.5%; /* 2 */
        min-height: 100%; /* 3 */
        overflow-y: scroll; /* 4 */
        -moz-osx-font-smoothing: grayscale; /* 5 */
        -webkit-font-smoothing: antialiased; /* 5 */
        -webkit-tap-highlight-color: transparent; /* 6 */
        tab-size: 4; /* 7 */
        -moz-tab-size: 4; /* 7 */
        text-size-adjust: 100%; /* 8 */
        -webkit-text-size-adjust: 100%; /* 8 */
        scrollbar-gutter: stable; /* 9 */
    }

    /* ----------------------------------------------------------------------------
     * ## Sections
     * ---------------------------------------------------------------------------- */

    /**
     * Applies the base typographic scale and page colors from design tokens.
     * 1. Initializes page background color.
     * 2. Initializes page color, font size and line height using CSS variables.
     * 3. Reset margin.
     * 4. Ensures the body element always fills at least the full viewport height,
       providing better structure for layouts and preventing collapsing pages.
     * 5. Prevents long words or URLs from overflowing their container,
       especially on narrow viewports.
     */

    body {
        background: var(--bux-color-bg); /* 1 */
        color: var(--bux-color-text); /* 2 */
        font-size: var(--bux-font-size); /* 2 */
        line-height: var(--bux-line-height); /* 2 */
        margin: 0; /* 3 */
        min-height: 100%; /* 4 */
        overflow-wrap: break-word; /* 5 */
    }

    /* ----------------------------------------------------------------------------
     * ## Headings
     * ---------------------------------------------------------------------------- */

    /**
     * 1. Tighter line-height for display text.
     * 2. Balances heading text across lines to avoid typographic widows
       (single short words alone on the last line).
       Gracefully ignored by browsers that don't support text-wrap: balance.
       @see https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap
     */

    :is(h1, h2, h3, h4, h5, h6) {
        line-height: 1.15;
        text-wrap: balance;
    }

    /* ----------------------------------------------------------------------------
     * ## Grouping content
     * ---------------------------------------------------------------------------- */

    /**
     * Prevents overflow from blockquote, pre, and code blocks.
     */

    :is(blockquote, pre) {
        max-width: 100%;
    }

    /**
     * Applies a consistent monospace font stack across browsers.
     *
     * @see https://github.com/sindresorhus/modern-normalize/issues/3
     */

    pre {
        font-family: var(--bux-font-mono);
    }

    /**
     * Normalizes the <hr> element across browsers.
     * 1. Removes the default border in favor of a controlled border-top.
     * 2. Sets height to 0 for consistent rendering across browsers.
     * 3. Inherits the current text color for easy theming.
     * 4. Ensures content is not clipped in overflow scenarios.
     */

    hr {
        border: none; /* 1 */
        border-top: 1px solid currentColor; /* 1 */
        color: inherit; /* 3 */
        height: 0; /* 2 */
        overflow: visible; /* 4 */
    }

    /* ----------------------------------------------------------------------------
     * ## Text-level semantics
     * ---------------------------------------------------------------------------- */

    /**
     * Resets anchor styles to a neutral baseline and applies UX-friendly defaults:
     * 1. Removes outline on links.
     * 2. Improves underline rendering by skipping descenders.
     * 3. Moves the underline slightly below the text baseline for improved legibility.
     *    @see https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset
     * 4. Removes 300ms delay on clickable elements on mobile.
     *    @see https://www.sitepoint.com/5-ways-prevent-300ms-click-delay-mobile-devices/
     */

    :where(a) {
        outline: 0; /* 1 */
        text-decoration-skip-ink: auto; /* 2 */
        text-underline-offset: 0.2em; /* 3 */
        touch-action: manipulation; /* 4 */
    }

    /**
     * 1. Shows help cursor for elements providing additional info on hover.
     * 2. Applies correct underline decoration for better readability.
     */

    :is(abbr[title], dfn[title]) {
        cursor: help;
        text-decoration: underline dotted;
    }

    /**
     * Ensures correct font weight on bold text across browsers.
     */

    :is(b, strong) {
        font-weight: bolder;
    }

    /**
     * 1. Prevents overflow from blockquote, pre, and code blocks.
     * 2. Displays code content with preserved white space and line breaks.
     */

    code {
        max-width: 100%; /* 1 */
        white-space: pre-wrap; /* 2 */
    }

    /**
     * Applies a consistent monospace font stack across browsers.
     *
     * @see https://github.com/sindresorhus/modern-normalize/issues/3
     */

    :is(code, kbd, samp) {
        font-family: var(--bux-font-mono);
    }

    /**
     * Ensures correct sizing for small text.
     */

    small {
        font-size: 80%;
    }

    /**
     * Fixes sub and sup rendering to prevent line-height issues.
     */

    :is(sub, sup) {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }

    sub { bottom: -0.25em; }
    sup { top: -0.5em; }

    /* ----------------------------------------------------------------------------
     * ## Embedded content
     * ---------------------------------------------------------------------------- */

    /**
     * Removes 300ms delay on area elements on mobile.
     *
     * @see https://www.sitepoint.com/5-ways-prevent-300ms-click-delay-mobile-devices/
     */

    area {
        touch-action: manipulation;
    }

    /**
     * Remove the gap between audio, canvas, iframes,
     * images, videos and the bottom of their containers.
     *
     * @see https:////github.com/h5bp/html5-boilerplate/issues/440
     */

    :is(audio, canvas, iframe, img, svg, video) {
        vertical-align: middle;
    }

    /**
     * Prevents selection highlight when dragging images.
     * Not all browsers apply ::selection on images consistently.
     *
     * @see https://stackoverflow.com/questions/6816080/how-to-disable-highlight-on-a-image
     */

    img::selection {
        background-color: transparent;
    }

    /**
     * 1. Ensures media elements do not overflow their container.
     * 2. Preserves aspect ratio for images.
     */

    :is(img, svg, video, canvas) {
        max-inline-size: 100%; /* 1 */
        block-size: auto; /* 2 */
    }

    /**
     * Ensures SVG fills match the text color for easier theming.
     */

    svg {
        fill: currentColor;
    }

    /* ----------------------------------------------------------------------------
     * ## Tabular data
     * ---------------------------------------------------------------------------- */

    /**
     * 1. Correct table border color inheritance in Chrome and Safari.
       @see https://bugs.chromium.org/p/chromium/issues/detail?id=935729
       @see https://bugs.webkit.org/show_bug.cgi?id=195016
     * 2. Remove text indentation from table contents in Chrome and Safari.
       @see https://bugs.chromium.org/p/chromium/issues/detail?id=999088
       @see https://bugs.webkit.org/show_bug.cgi?id=201297
     */

    table {
        border-color: inherit; /* 1 */
        text-indent: 0; /* 2 */
    }

    /**
     * Prevent tables and table cells from overflowing their container,
     * maintaining layout integrity on small screens.
     */

    :is(table, td) {
        max-width: 100%;
    }

    /* ----------------------------------------------------------------------------
     * ## Forms
     * ---------------------------------------------------------------------------- */

    /**
     * Resets the default border and padding of <fieldset> elements,
     * which browsers render inconsistently.
     */

    fieldset {
        border: none;
        padding: 0;
    }

    /**
     * Resets the default padding of <legend> elements.
     * Browsers add padding to <legend> by default, causing misalignment.
     */

    legend {
        padding: 0;
    }

    /**
     * 1. Resets the default appearance of buttons.
     * 2. Prevents accidental text selection on double-click.
     */

    button {
        appearance: none; /* 1 */
        border: none; /* 1 */
        background: none; /* 1 */
        user-select: none; /* 2 */
    }

    /**
     * Removes 300ms tap delay on clickable form elements on mobile.
     * @see https://www.sitepoint.com/5-ways-prevent-300ms-click-delay-mobile-devices/
     */

    :is(button, input, label, select, textarea, area) {
        touch-action: manipulation;
    }

    /**
     * Reset font styles to inherit in all form controls.
     */

    :is(button, input, optgroup, select, textarea) {
        font-family: inherit;
        font-size: 100%;
    }

    /**
     * Remove the text-transform inheritance in Edge and Firefox.
     */

    :is(button, select) {
        text-transform: none;
    }

    /**
     * Apply pointer cursor on clickable form elements.
     */

    :is(button, [type="button"], [type="reset"], [type="submit"], select):not(:disabled),
    label[for] {
        cursor: pointer;
    }

    /**
     * Apply not-allowed cursor on disabled elements to clearly communicate
     * that interaction is unavailable.
     */

    :is([disabled], [aria-disabled="true"]) {
        cursor: not-allowed;
    }

    /**
     * Correct clickable types styling on iOS and Safari.
     */

    :is(button, [type="button"], [type="reset"], [type="submit"]) {
        appearance: button;
        -webkit-appearance: button;
    }

    /**
     * Prevent inputs and textareas from overflowing their container.
     */

    :is(input, textarea) {
        max-inline-size: 100%;
    }

    /**
     * Ensure text can be selected in form inputs.
     */

    :is(input, select, textarea) {
        user-select: text;
    }

    /**
     * 1. Correct the appearance of search fields in Chrome and Safari.
     * 2. Correct the outline style in Safari.
     */

    [type="search"] {
        appearance: textfield; /* 1 */
        -webkit-appearance: textfield; /* 1 */
        outline-offset: -2px; /* 2 */
    }

    /**
     * Remove the inner decoration of search fields on Webkit browsers.
     */

    [type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
    }

    /**
     * Correct vertical alignment of progress elements.
     */

    progress {
        vertical-align: baseline;
    }

    /**
     * 1. Allow only vertical resizing of textareas for better UX.
     *    Kept as a fallback for browsers that do not support field-sizing.
     *    @for Firefox 5+, Chrome 4+, Safari 4+, Opera 12.1+.
     * 2. Automatically resizes the textarea to fit its content height,
     *    eliminating the need for JavaScript auto-resize solutions.
     *    Gracefully ignored by browsers that do not yet support field-sizing.
     *    @see https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing
     */

    textarea {
        resize: vertical; /* 1 */
    }

    @supports (field-sizing: content) {
        textarea {
            field-sizing: content; /* 2 */
        }
    }

    /**
     * File selector button, standard pseudo-element (replaces the
     * proprietary ::-webkit-file-upload-button from earlier browser versions).
     */

    ::file-selector-button {
        appearance: button;
        -webkit-appearance: button;
        font: inherit;
    }

    /**
     * Corrects the vertical alignment of spin buttons in number inputs on Safari.
     */

    ::-webkit-inner-spin-button,
    ::-webkit-outer-spin-button {
        height: auto;
    }

    /**
     * Remove inner border and padding on focus in Firefox.
     */

    ::-moz-focus-inner {
        border-style: none;
        padding: 0;
    }

    /**
     * Remove additional invalid styles in Firefox.
     *
     * @see https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
     */

    :-moz-ui-invalid {
        box-shadow: none;
    }

    /* ----------------------------------------------------------------------------
     * ## Interactive elements
     * ---------------------------------------------------------------------------- */

    /**
     * Ensures the <summary> element is correctly rendered as a list item.
     * This improves accessibility and ensures consistent behavior inside <details>.
     */

    summary {
        display: list-item;
    }

    /**
     * Prevents text selection on interactive elements that behave like buttons,
     * improving the user experience on touch devices and during rapid clicks.
     */

    :is([role="button"], summary, details[open] summary) {
        user-select: none;
    }

    /* ----------------------------------------------------------------------------
     * ## Dialog
     * ---------------------------------------------------------------------------- */

    /**
     * Normalizes the native <dialog> element across browsers.
     * 1. Inherits page background and text color for theme consistency.
     * 2. Removes the default browser border.
     * 3. Prevents the dialog from overflowing narrow viewports.
     * 4. Removes default padding to allow full layout control.
     */

    dialog {
        background: var(--bux-color-bg); /* 1 */
        border: none; /* 2 */
        color: var(--bux-color-text); /* 1 */
        margin: auto;
        max-width: 100%; /* 3 */
        padding: 0; /* 4 */
    }

    /**
     * Styles the native backdrop of the <dialog> element.
     * Provides a semi-transparent overlay behind the dialog.
     */

    dialog::backdrop {
        background: var(--bux-dialog-backdrop-bg);
    }

    /**
     * Entry animation for <dialog> when it opens.
     * Only applied when the user has not requested reduced motion.
     *
     * `@starting-style` defines the state the element transitions FROM
     * when it first becomes visible (i.e., just before the open animation starts).
     * `display allow-discrete` and `overlay allow-discrete` keep the dialog
     * and its backdrop visible throughout the transition so the animation
     * can fully complete before the element is hidden.
     *
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior
     */

    @media (prefers-reduced-motion: no-preference) {
        dialog {
            opacity: 1;
            transform: translateY(0);
            transition:
                display var(--bux-duration-base) allow-discrete,
                opacity var(--bux-duration-base) var(--bux-easing),
                overlay var(--bux-duration-base) allow-discrete,
                transform var(--bux-duration-base) var(--bux-easing);
        }

        /**
         * Defines the pre-open state: dialog starts invisible and shifted up
         */

        @starting-style {
            dialog[open] {
                opacity: 0;
                transform: translateY(-8px);
            }
        }

        dialog::backdrop {
            transition:
                background-color var(--bux-duration-base) var(--bux-easing),
                display var(--bux-duration-base) allow-discrete,
                overlay var(--bux-duration-base) allow-discrete;
        }

        /**
         * Defines the pre-open state for the backdrop: starts fully transparent
         */

        @starting-style {
            dialog[open]::backdrop {
                background-color: rgba(0, 0, 0, 0);
            }
        }
    }

    /* --------------------------------------------------------------------------
     * ## Print styles
     * -------------------------------------------------------------------------- */

    @media print {
        *,
        *::before,
        *::after {
            background: transparent !important;
            box-shadow: none !important;
            color: #000 !important;
            text-shadow: none !important;
        }

        a[href]::after {
            content: " (" attr(href) ")";
        }

        :is(img, figure) {
            page-break-inside: avoid;
        }
    }

}

@charset "UTF-8";


/*
 *
  ## Fonts (Inter / Hyperlegible-Next)
 *
*/


/* static fonts ## Inter */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100; font-display: swap; src: url("../../files/contao-theme/fonts/inter/Inter-Thin.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100; font-display: swap; src: url("../../files/contao-theme/fonts/inter/Inter-ThinItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 200; font-display: swap; src: url("../../files/contao-theme/fonts/inter/Inter-ExtraLight.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 200; font-display: swap; src: url("../../files/contao-theme/fonts/inter/Inter-ExtraLightItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url("../../files/contao-theme/fonts/inter/Inter-Light.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 300; font-display: swap; src: url("../../files/contao-theme/fonts/inter/Inter-LightItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../files/contao-theme/fonts/inter/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 400; font-display: swap; src: url("../../files/contao-theme/fonts/inter/Inter-Italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../../files/contao-theme/fonts/inter/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 500; font-display: swap; src: url("../../files/contao-theme/fonts/inter/Inter-MediumItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../../files/contao-theme/fonts/inter/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 600; font-display: swap; src: url("../../files/contao-theme/fonts/inter/Inter-SemiBoldItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../../files/contao-theme/fonts/inter/Inter-Bold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 700; font-display: swap; src: url("../../files/contao-theme/fonts/inter/Inter-BoldItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("../../files/contao-theme/fonts/inter/Inter-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 800; font-display: swap; src: url("../../files/contao-theme/fonts/inter/Inter-ExtraBoldItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 900; font-display: swap; src: url("../../files/contao-theme/fonts/inter/Inter-Black.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 900; font-display: swap; src: url("../../files/contao-theme/fonts/inter/Inter-BlackItalic.woff2") format("woff2"); }

@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 100; font-display: swap; src: url("../../files/contao-theme/fonts/inter/InterDisplay-Thin.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 100; font-display: swap; src: url("../../files/contao-theme/fonts/inter/InterDisplay-ThinItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 200; font-display: swap; src: url("../../files/contao-theme/fonts/inter/InterDisplay-ExtraLight.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 200; font-display: swap; src: url("../../files/contao-theme/fonts/inter/InterDisplay-ExtraLightItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 300; font-display: swap; src: url("../../files/contao-theme/fonts/inter/InterDisplay-Light.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 300; font-display: swap; src: url("../../files/contao-theme/fonts/inter/InterDisplay-LightItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../files/contao-theme/fonts/inter/InterDisplay-Regular.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 400; font-display: swap; src: url("../../files/contao-theme/fonts/inter/InterDisplay-Italic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 500; font-display: swap; src: url("../../files/contao-theme/fonts/inter/InterDisplay-Medium.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 500; font-display: swap; src: url("../../files/contao-theme/fonts/inter/InterDisplay-MediumItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 600; font-display: swap; src: url("../../files/contao-theme/fonts/inter/InterDisplay-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 600; font-display: swap; src: url("../../files/contao-theme/fonts/inter/InterDisplay-SemiBoldItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 700; font-display: swap; src: url("../../files/contao-theme/fonts/inter/InterDisplay-Bold.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 700; font-display: swap; src: url("../../files/contao-theme/fonts/inter/InterDisplay-BoldItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 800; font-display: swap; src: url("../../files/contao-theme/fonts/inter/InterDisplay-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 800; font-display: swap; src: url("../../files/contao-theme/fonts/inter/InterDisplay-ExtraBoldItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 900; font-display: swap; src: url("../../files/contao-theme/fonts/inter/InterDisplay-Black.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 900; font-display: swap; src: url("../../files/contao-theme/fonts/inter/InterDisplay-BlackItalic.woff2") format("woff2"); }



/* static fonts ## Hyperlegible-Next */
@font-face { font-family: "AtkinsonHyperlegibleNext"; font-style: normal; font-weight: 200; font-display: swap; src: url("../../files/contao-theme/fonts/hyperlegible-next/AtkinsonHyperlegibleNext-ExtraLight.woff2") format("woff2"); }
@font-face { font-family: "AtkinsonHyperlegibleNext"; font-style: italic; font-weight: 200; font-display: swap; src: url("../../files/contao-theme/fonts/hyperlegible-next/AtkinsonHyperlegibleNext-ExtraLightItalic.woff2") format("woff2"); }
@font-face { font-family: "AtkinsonHyperlegibleNext"; font-style: normal; font-weight: 300; font-display: swap; src: url("../../files/contao-theme/fonts/hyperlegible-next/AtkinsonHyperlegibleNext-Light.woff2") format("woff2"); }
@font-face { font-family: "AtkinsonHyperlegibleNext"; font-style: italic; font-weight: 300; font-display: swap; src: url("../../files/contao-theme/fonts/hyperlegible-next/AtkinsonHyperlegibleNext-LightItalic.woff2") format("woff2"); }
@font-face { font-family: "AtkinsonHyperlegibleNext"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../files/contao-theme/fonts/hyperlegible-next/AtkinsonHyperlegibleNext-Regular.woff2") format("woff2"); }
@font-face { font-family: "AtkinsonHyperlegibleNext"; font-style: italic; font-weight: 400; font-display: swap; src: url("../../files/contao-theme/fonts/hyperlegible-next/AtkinsonHyperlegibleNext-RegularItalic.woff2") format("woff2"); }
@font-face { font-family: "AtkinsonHyperlegibleNext"; font-style: normal; font-weight: 500; font-display: swap; src: url("../../files/contao-theme/fonts/hyperlegible-next/AtkinsonHyperlegibleNext-Medium.woff2") format("woff2"); }
@font-face { font-family: "AtkinsonHyperlegibleNext"; font-style: italic; font-weight: 500; font-display: swap; src: url("../../files/contao-theme/fonts/hyperlegible-next/AtkinsonHyperlegibleNext-MediumItalic.woff2") format("woff2"); }
@font-face { font-family: "AtkinsonHyperlegibleNext"; font-style: normal; font-weight: 600; font-display: swap; src: url("../../files/contao-theme/fonts/hyperlegible-next/AtkinsonHyperlegibleNext-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "AtkinsonHyperlegibleNext"; font-style: italic; font-weight: 600; font-display: swap; src: url("../../files/contao-theme/fonts/hyperlegible-next/AtkinsonHyperlegibleNext-SemiBoldItalic.woff2") format("woff2"); }
@font-face { font-family: "AtkinsonHyperlegibleNext"; font-style: normal; font-weight: 700; font-display: swap; src: url("../../files/contao-theme/fonts/hyperlegible-next/AtkinsonHyperlegibleNext-Bold.woff2") format("woff2"); }
@font-face { font-family: "AtkinsonHyperlegibleNext"; font-style: italic; font-weight: 700; font-display: swap; src: url("../../files/contao-theme/fonts/hyperlegible-next/AtkinsonHyperlegibleNext-BoldItalic.woff2") format("woff2"); }
@font-face { font-family: "AtkinsonHyperlegibleNext"; font-style: normal; font-weight: 800; font-display: swap; src: url("../../files/contao-theme/fonts/hyperlegible-next/AtkinsonHyperlegibleNext-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "AtkinsonHyperlegibleNext"; font-style: italic; font-weight: 800; font-display: swap; src: url("../../files/contao-theme/fonts/hyperlegible-next/AtkinsonHyperlegibleNext-ExtraBoldItalic.woff2") format("woff2"); }


/* EOF */
@charset "UTF-8";

::selection {
  background-color: rgba(255,244,147,0.8); 
  color: #2c3338;
}

.invisible { /* Contao Klasse */
  border: 0; 
  clip: rect(0 0 0 0); 
  height: 1px; 
  margin: -1px; 
  overflow: hidden; 
  padding: 0; 
  position: absolute; 
  width: 1px; 
}

a, *:focus {
  color: inherit; 
  outline: 0 none; 
  text-decoration: none;
}

a:has(> img) {display: block;}

img {border: 0 none;}


:root {  
  --color-text-light: #000000;
  --color-background-light: #ffffff;
  --color-text-dark: #ffffff;
  --color-background-dark: #121212;
  --color-primary: #00458b;
  --color-secondary: #b81a22;

  --color-gray0: #f6f7f7;
  --color-gray2: #f0f0f1;
  --color-gray5: #dcdcde;
  --color-gray10: #c3c4c7;
  --color-gray20: #a7aaad;
  --color-gray50: #646970;
  --color-gray80: #2c3338;
  
  --color-border: var(--color-gray20);
  
  --max-width-container: 1024px;
  
  --bux-color-bg: light-dark(#ffffff, #121212);
}

html {
  font-size: 100%;
}
body {
  font-size: 1rem;
  text-rendering: optimizeLegibility;
  word-spacing: 0.16em;
}

/* EOF */
@charset "UTF-8";


/**
 * ## Navigation Main
 */
:root {
  --nav-breakpoint:794;
  --nav-font-size: 18px;
  --nav-submenu-background: light-dark(var(--color-background-light), var(--color-background-dark));
}


/* nav-burger */
.nav-burger {margin-left: auto;}
.nav-burger .icon-line, .nav-burger .icon-line::after, .nav-burger .icon-line::before {background-color: light-dark(var(--color-text-light), var(--color-text-dark));}
.nav-burger.is-active .icon-line::after, .nav-burger.is-active .icon-line::before {background-color: var(--nav-burger-line-color);}

/* navigation-main */
body.nav-is-desktop .navigation-main a {color: light-dark(var(--color-text-light), var(--color-text-dark));}
body.nav-is-desktop .navigation-main a:hover {color: light-dark(var(--color-primary), var(--nav-active-color));}
body.nav-is-desktop .navigation-main .level_2 a:hover {background-color: light-dark(var(--color-gray2), var(--color-gray2));}
body.nav-is-desktop .navigation-main strong:not(.does-not-exist) {color: light-dark(var(--color-primary), var(--nav-active-color));}




/**
 * ## Navigation Sub
 */

#nav-sub {
	background-color: light-dark(var(--color-gray2), var(--color-background-dark));
	border-bottom: 1px solid var(--color-border);
	border-top: 1px solid var(--color-border);
	height: 100%; 
	display: none;
}
#nav-sub ul {
	align-items: end;
	display: flex;
	height: 100%;
	justify-content: flex-start;
	margin: 0 auto;
	max-width: var(--max-width-container);
	padding: 0 16px 0 10px; 
}
#nav-sub li {display: block;}
#nav-sub li.active strong {
	color: light-dark(var(--color-primary), var(--nav-active-color));
	font-weight: 600;
}
#nav-sub li.active strong::after {
	background-color: light-dark(var(--color-primary), var(--color-text-dark));
	content: "";
	display: block;
	height: 2px;
	position: relative;
	transition: width 0.5s ease;
	-webkit-transition: width 0.5s ease;
	-moz-transition: width 0.5s ease;
	-ms-transition: width 0.5s ease;
	width: 100%;
}
#nav-sub a, #nav-sub strong{
	color: light-dark(var(--color-text-light), var(--color-text-dark));
	display: block;
	font-weight: 600;
	letter-spacing: 1px;
	margin: 0;
	padding: 12px 10px;
	text-align: center;
}
#nav-sub a::after {
	background-color: var(--color-secondary);
	content: "";
	display: block;
	height: 2px;
	position: relative;
	transition: width 0.5s ease;
	-webkit-transition: width 0.5s ease;
	-moz-transition: width 0.5s ease;
	-ms-transition: width 0.5s ease;
	width: 0%;
}
#nav-sub a:hover::after, 
#nav-sub a:focus::after {
	background-color: var(--color-secondary);
	width: 100%;
}



/**
 * ## Navigation Breadcrumb
 */

#nav-breadcrumb {
/*  border-bottom: 1px solid var(--color-border); */
  display: flex;
  width: 100%;
  max-width: var(--max-width-container);
  margin: 0 auto;
  padding: 8px 25px 6px 25px;
}
#nav-breadcrumb ul {
  font-size: .875rem;
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin: 0;
  padding: .5rem 1rem;
  border-radius: 4rem;
  list-style: none;
}
#nav-breadcrumb li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  color: light-dark(var(--color-text-light), var(--color-text-dark));
}
#nav-breadcrumb a {
  transition: color .2s ease-in-out,text-decoration .2s ease-in-out;
  color: light-dark(var(--color-text-light), var(--color-text-dark));
  font-weight: 400;
  text-decoration: none;
  text-decoration: underline rgba(0,0,0,0) .0625rem;
  text-underline-offset: .4em;
}
#nav-breadcrumb li + li::before {
  display: block;
  width: 1rem;
  height: 1rem;
  margin-inline-start: -1.25rem;
  background: rgba(0,0,0,0) url("/files/contao-theme/img/icons/caret-right--gray.svg") center center no-repeat;
  content: "";
}
#nav-breadcrumb a::after {
  content: "";
  display: block;
  height: 2px;
  position: relative;
  transition: width 0.5s ease;
  -webkit-transition: width 0.5s ease;
  -moz-transition: width 0.5s ease;
  -ms-transition: width 0.5s ease;
  width: 0%;
}
#nav-breadcrumb a:hover::after {
  background-color: var(--color-secondary);
  width: 100%;
}
#nav-breadcrumb .active {
  padding-bottom: 2px;
}



/**
 * ## Navigation Service
 */
#nav-service {}
#nav-service ul {margin: 0; padding: 0;}
#nav-service li {
	border-top: 1px solid var(--color-border);
	display: block;
}
#nav-service li.active strong {
	color: light-dark(var(--color-primary), var(--nav-active-color));
	font-weight: 400;
}
#nav-service a, #nav-service strong{
	color: light-dark(var(--color-text-light), var(--color-text-dark));
	display: block;
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 1px;
	margin: 0;
	padding: 10px 10px;
	text-align: center;
}
#nav-service a:hover {color: var(--color-secondary);}



/*
 *
  ## Media-Queries
 *
*/

/* 400px = 25em */
@media handheld, screen and (min-width: 25em) {
  #nav-service {
    border-top: 1px solid var(--color-border);
		height: 100%;
  }
  #nav-service ul {
    align-items: end;
    display: flex;
    height: 100%;
    justify-content: center;
    margin: 0 auto;
    max-width: var(--max-width-container);
    padding: 0 16px 0 10px; 
  }
  #nav-service li {
    border-top: 0px solid var(--color-border);
  }
  #nav-service li.active strong::after {
    background-color: light-dark(var(--color-primary), var(--color-text-dark));
    content: "";
    display: block;
    height: 2px;
    position: relative;
    transition: width 0.5s ease;
    -webkit-transition: width 0.5s ease;
    -moz-transition: width 0.5s ease;
    -ms-transition: width 0.5s ease;
    width: 100%;
  }
  #nav-service a::after {
    background-color: var(--color-secondary);
    content: "";
    display: block;
    height: 2px;
    position: relative;
    transition: width 0.5s ease;
    -webkit-transition: width 0.5s ease;
    -moz-transition: width 0.5s ease;
    -ms-transition: width 0.5s ease;
    width: 0%;
  }
  #nav-service a:hover {
    color: light-dark(var(--color-text-light), var(--color-text-dark));
  }
  #nav-service a:hover::after, #nav-service a:focus::after {
    background-color: var(--color-secondary);
    width: 100%;
  }
}

/* 480px = 30em */
@media handheld, screen and (min-width: 30em) {
  #nav-service ul {justify-content: flex-end;}
}

/* 800px = 50em */
@media handheld, screen and (min-width: 50em) {
	#nav-sub {display: block;}
}


/* EOF */
@charset "UTF-8";

html {
  font-family:
/*  "AtkinsonHyperlegibleNext", */
  "Inter", 
    system-ui,
    /* macOS 10.11-10.12 */ -apple-system,
    /* Windows 6+ */ "Segoe UI",
    /* Android 4+ */ "Roboto",
    /* Ubuntu 10.10+ */ "Ubuntu",
    /* Gnome 3+ */ "Cantarell",
    /* KDE Plasma 5+ */ "Noto Sans",
    /* fallback */ sans-serif,
    /* macOS emoji */ "Apple Color Emoji",
    /* Windows emoji */ "Segoe UI Emoji",
    /* Windows emoji */ "Segoe UI Symbol",
    /* Linux emoji */ "Noto Color Emoji";
}
code,
kbd,
samp,
pre {
  font-family:
    ui-monospace,
    /* macOS 10.10+ */ "Menlo",
    /* Windows 6+ */ "Consolas",
    /* Android 4+ */ "Roboto Mono",
    /* Ubuntu 10.10+ */ "Ubuntu Monospace",
    /* KDE Plasma 5+ */ "Noto Mono",
    /* KDE Plasma 4+ */ "Oxygen Mono",
    /* Linux/OpenOffice fallback */ "Liberation Mono",
    /* fallback */ monospace,
    /* macOS emoji */ "Apple Color Emoji",
    /* Windows emoji */ "Segoe UI Emoji",
    /* Windows emoji */ "Segoe UI Symbol",
    /* Linux emoji */ "Noto Color Emoji";
}


/**
 * ## Container Header
 */
#container-header {
  padding: 0 15px;
}
#container-header .container-inside {
  align-items: center;
  display: grid;
  grid-template-columns: 220px auto;
  margin: 0 auto;
  max-width: var(--max-width-container);
  padding: 15px 0;
}
#container-header .container-logo {
  padding: 10px 0; 
  text-align: center;
}
#container-header .container-nav {
  padding-left: 25px; 
  padding-right: 10px;
}


/**
 * ## Seitenbild
 */
#seitenbild {border-bottom: 1px solid var(--color-border);}
#seitenbild .image_container {margin: 0; padding: 0;}
#seitenbild .image_container img {
  display: block;
  margin: 0 auto;
  object-fit: contain;
  width: auto;
}

#main .inside {
  min-height: 360px; 
  padding-bottom: 2rem;
}

.mod_article {
  padding: 2rem 1rem;
}



#footer {
  padding-bottom: 1rem;
}

/**
 * ## Copyright
 */
#copyright {border-top: 1px solid var(--color-border);}
#copyright p {
  font-size: 0.75rem; 
  letter-spacing: 1px; 
  margin: 0 auto; 
  padding: 15px 8px; 
  text-align: center;
}


/*
 *
  ## Media-Queries
 *
*/

/* 400px = 25em */
@media handheld, screen and (min-width: 25em) {}

/* 480px = 30em */
@media handheld, screen and (min-width: 30em) {}

/* 768px = 48em */
@media handheld, screen and (min-width: 48em) {}

/* 800px = 50em */
@media handheld, screen and (min-width: 50em) {}


@media print {
  @page {
    size: A4 portrait;
    margin: 15mm;
    font-family: arial, Helvetica, sans-serif;
    marks: crop cross;
    prince-trim: 0mm;
    prince-bleed: 0mm;
  }
}



/*
@media print {
  @page {
    @bottom-center {
      content: "Seite " counter(page) " von " counter(pages);
      font-size: 10pt;
    }
    .chapter h1 {page-break-before: always; string-set: chapter-title content();}
    h2, h3 {page-break-after: avoid;}
    p {
      orphans: 3;
      widows: 3;
    }
  }
}
*/


/* EOF */
@charset "UTF-8";

/* CSS fuer Content */



/* EOF */