/* ==========================================================================
   FRIESS METALLBAU — CUSTOM OVERRIDES
   Last-resort project-specific patches only. Anything that belongs to the
   site's own design system (colors, spacing, components, sections) should
   live in FriessMetallbauMain.css instead, using the tokens defined in its
   :root block. This file stays empty by default.
   Previous patches that lived here (SlideGlass dialog #js-dialog-90,
   .header position:relative, mobile nav slide-in) have been merged into
   Main.css next to their related components, as of this cleanup pass.
   ========================================================================== */
/* ==========================================================================
   Dialog Fade-in & Fade-out Transitions
   Dialog Fade-in & Fade-out Transitions (Dynamic Class .card-overlay)
   ========================================================================== */
.card-overlay[open] {
    animation: dialogFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.card-overlay[open]::backdrop {
    animation: backdropFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.card-overlay.dialog-closing {
    animation: dialogFadeOut 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}
.card-overlay.dialog-closing::backdrop {
    animation: backdropFadeOut 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}
@keyframes dialogFadeIn {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
@keyframes backdropFadeIn {
    from {
        background-color: rgba(0, 0, 0, 0);
    }
    to {
        background-color: rgba(0, 0, 0, 0.7);
    }
}
@keyframes dialogFadeOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to {
        opacity: 0;
        transform: scale(0.96) translateY(10px);
    }
}
@keyframes backdropFadeOut {
    from {
        background-color: rgba(0, 0, 0, 0.7);
    }
    to {
        background-color: rgba(0, 0, 0, 0);
    }
}
/* ==========================================================================
   Mobile Minimal Design for js-dialog-90 Card Overlay
   Mobile Minimal Design for .card-overlay Dialog
   ========================================================================== */
@media only screen and (max-width: 521px) {
    .card-overlay {
        width: calc(100vw - 32px) !important;
        max-height: calc(100vh - 32px) !important;
        padding: 24px !important;
        border-radius: 12px !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }
    .card-overlay .card-overlay__close {
        position: absolute !important;
        top: 16px !important;
        right: 16px !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        background-color: #f5f5f5 !important;
        border: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform: none !important;
        z-index: 10 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }
    
    .card-overlay .card-overlay__close:hover,
    .card-overlay .card-overlay__close:focus {
        background-color: #e5e5e5 !important;
    }
    .card-overlay .card-overlay__close svg {
        stroke: #333333 !important;
        width: 12px !important;
        height: 12px !important;
    }
    .card-overlay .card__header {
        margin: 0 0 16px 0 !important;
        padding-right: 32px !important;
    }
    .card-overlay .card__title {
        font-size: 2.4rem !important;
        text-align: left !important;
        color: #002346 !important;
        margin: 0 !important;
    }
    .card-overlay .card__body {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        align-items: stretch !important;
    }
    .card-overlay .card__media {
        order: -1 !important;
        width: 100% !important;
    }
    .card-overlay .card__img {
        width: 100% !important;
        border-radius: 8px !important;
        height: auto !important;
        display: block !important;
    }
    .card-overlay .card__desc {
        font-size: 1.5rem !important;
        line-height: 1.5 !important;
        color: #4a4a4a !important;
        margin: 0 0 16px 0 !important;
    }
    .card-overlay .card__cta {
        margin: 0 !important;
    }
    .card-overlay .card__cta .btn {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 12px !important;
        box-sizing: border-box !important;
        font-size: 1.5rem !important;
        background-color: #004183 !important;
        color: #ffffff !important;
        border-radius: 6px !important;
        border: 0 !important;
        font-weight: bold !important;
    }
    #js-dialog-90 .card__footer {
        margin-top: 20px !important;
        padding-top: 16px !important;
        border-top: 1px solid #eeeeee !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        text-align: center !important;
    }
    #js-dialog-90 .card__footer p {
        font-size: 1.3rem !important;
        color: #666666 !important;
        margin: 0 !important;
    }
    #js-dialog-90 .socialmedialinks {
        display: flex !important;
        justify-content: center !important;
        gap: 16px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}
/* ==========================================================================
   Form Builder Contact Form Styling (Live Site Exact Match)
   ========================================================================== */
.form-builder fieldset {
    border: 1px solid #767676 !important;
    padding: 1.5em !important;
    margin: 1.5em 0 !important;
    box-sizing: border-box !important;
}
.form-builder legend {
    font-size: 1.17em !important;
    font-weight: bold !important;
    color: #000000 !important;
    width: auto !important;
    float: none !important;
    margin-left: 0 !important;
}
.form-builder label,
.form-builder .form-option-lst-title {
    color: #002d5a !important;
    font-size: 1em !important;
}
.form-builder .required > label,
.form-builder .required .form-option-lst-title {
    color: #002d5a !important;
    font-weight: bold !important;
}
.form-builder input[type="text"],
.form-builder input[type="email"],
.form-builder input[type="tel"],
.form-builder input[type="number"],
.form-builder textarea,
.form-builder select {
    background-color: #ffffff !important;
    border: 1px solid #c5c5c5 !important;
    border-radius: 2px !important;
    padding: 4px 8px !important;
    font-size: 1em !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease !important;
}
.form-builder input[type="text"]:focus,
.form-builder input[type="email"]:focus,
.form-builder input[type="tel"]:focus,
.form-builder input[type="number"]:focus,
.form-builder textarea:focus,
.form-builder select:focus {
    border-color: #0e5faeb0 !important;
    outline: none !important;
}
.form-builder textarea {
    min-height: 80px !important;
}
/* Custom Pure White & Theme Blue Radio Buttons */
.form-builder input[type="radio"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 13px !important;
    height: 13px !important;
    border: 1px solid #767676 !important;
    border-radius: 50% !important;
    outline: none !important;
    background-color: #ffffff !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    margin-right: 8px !important;
    display: inline-block !important;
    position: relative !important;
    top: -1.5px !important;
    box-sizing: border-box !important;
    box-shadow: inset 0 0 0 2px #ffffff !important;
    transition: border-color 0.2s ease, background-color 0.2s ease !important;
}
.form-builder input[type="radio"]:hover {
    border-color: #004183 !important;
}
.form-builder input[type="radio"]:checked {
    border-color: #0077ff !important;
    background-color: #0077ff !important;
    box-shadow: inset 0 0 0 1.7px #ffffff !important;
}
.form-builder .form-option-lst li label {
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    color: #333333 !important;
    font-weight: normal !important;
}
/* Validation Error Styling */
.form-builder label.error {
    color: red !important;
    font-weight: normal !important;
    font-size: 0.92em !important;
    box-sizing: border-box !important;
}
/* Primary Submit Button Styling */
.form-builder .btn--primary,
.form-builder button[type="submit"] {
    background-color: #004183 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 8px 16px !important;
    font-size: 1em !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}
.form-builder .btn--primary:hover,
.form-builder button[type="submit"]:hover {
    background-color: #002d5a !important;
}
/* ==========================================================================
   Mobile Navigation Active State & Subtle Highlighting
   ========================================================================== */
/* Active Link (the current subpage) - Subtle background tint + left accent bar */
.mobilenav .govis-menu-node-item.active > a,
.mobilenav .govis-menu-node-item.page--active > a,
.mobilenav .govis-menu-node-item.IsActive > a,
.mobilenav .govis-menu-node-item > a.active,
.mobilenav .govis-menu-node-item > a.IsActive,
.mobilenav .govis-menu-node-item > a[aria-current="page"] {
    color: var(--color-primary) !important;
    font-weight: bold !important;
}
/* Parent Category Header (when a subpage is active) - Subtle text color & clean background */
.mobilenav .govis-menu-node-item.folder.active > a,
.mobilenav .govis-menu-node-item.folder.IsActive > a {
    color: var(--color-primary) !important;
    font-weight: bold !important;
}
/* Hover & Focus state */
.mobilenav .govis-menu-node-item > a:hover,
.mobilenav .govis-menu-node-item > a:focus {
    background-color: #f7f9fc !important;
    color: #004183 !important;
}
/* ==========================================================================
   Home Portrait Section Layout & Background Images Stacking Context
   ========================================================================== */
.home-portrait {
    position: relative;
    z-index: 0;
    overflow: hidden;
    background-color: #004183 !important;
    padding: 70px 0 100px !important;
    color: #002D5A !important;
}
.home-portrait .bg-images {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.home-portrait .bg-main {
    position: absolute;
    top: -13px;
    left: 10.95%;
    height: 100%;
    width: auto;
    margin: 0;
    object-fit: none;
    mix-blend-mode: screen;
    opacity: 0.95;
}
@media only screen and (max-width: 1347px){
    .home-portrait .bg-main {
        left: 5%;
    }
}
@media only screen and (max-width: 768px){

    .home-portrait .bg-main {
        left: 50%;
        transform: translateX(-50%);
    }
}
.home-portrait .bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    mix-blend-mode: normal;
    pointer-events: none;
    z-index: -1;
}
.home-portrait .container {
    position: relative;
    z-index: 1;
}
.home-portrait .inner {
    padding: 0 8% 0 25% !important;
}
.home-portrait h2 {
    font-size: 2.1875em !important;
    font-weight: normal !important;
    margin-bottom: 1em !important;
    color: #002D5A !important;
}
.home-portrait p {
    font-size: 1.375em !important;
    color: #002D5A !important;
}
@media only screen and (max-width: 60em) {
    .home-portrait .inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .home-portrait h2 {
        font-size: 1.8em !important;
    }
    .home-portrait p {
        font-size: 1.1em !important;
    }
}
/* [id^="contactForm-"] {
    background-color: #dfeed2;
    color: #3c6b1f;
    padding: 20px 24px;
    border-radius: 2px;
    margin: 20px 0;
    display: block;
}

[id^="contactForm-"] p {
    margin: 0;
    font-size: 15px;
} */

/* ==========================================================================
   Conact form css (monday 27-july 2:00)
   ========================================================================== */
.form-pair {
    box-sizing: border-box !important;
    float: left !important;
    margin-bottom: 15px !important;
}
.form-pair-first {
    width: 74% !important;
    margin-right: 2% !important;
}
.form-pair-second {
    width: 24% !important;
    margin-right: 0 !important;
}
.form-pair label {
    display: block !important;
    width: 100% !important;
}
.form-pair input {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* pair pachi navi row barobar shroo thay tema mate clear */
.form-pair-second + .form-pair-first,
.form-pair-second + .co-form__section:not(.form-pair) {
    clear: both !important;
}












/* ==========================================================
   Form Confirmation Message — success box styling
   ========================================================== */

.confirmation-text {
    background: #dff0d8;
    color: #3c763d;
    padding: 35px 32px;
    margin: 30px 0;
    font-size: 15px;
    line-height: 20px;
    box-sizing: border-box;
}

.confirmation-message {
    background-color: #dcecd7;
    padding: 1.5rem 2rem;
    margin: 1.5rem 0;
}

.confirmation-message p {
    color: #2c5530;
    font-size: 1rem;
    margin: 0;
}


.service-page-section .main-content .js-cookie-settings{
    display: inline-block;
    border: 0;
    padding: .5em 1em;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    line-height: inherit;
    background-color: #004183;
    border-radius: 3px;
    cursor: pointer;
}

.footer a::before{
    padding-right: .25em;
}

.card-overlay .card-overlay__close svg{
    display: block !important;
    width: 22.56px !important;
    height: 22px !important;
}
.card-overlay .card-overlay__close svg path{
    fill: black;
    stroke: black;
}

#contactForm-24 .confirmation-text{
    padding: 32px;
    margin: 0 0 24px;
}

#contactForm-24 .confirmation-text p{
    margin: 0;
    line-height: 1.6;
    font-size: 16px;
}

.zertifikate-section .content-grid .main-content p a::before{
    padding-right: 0;
}


/* ==========================================================================
   Browser Autofill Color Override
   Browsers block background-color on :-webkit-autofill directly.
   The inset box-shadow trick paints over their default yellow/blue.
   ========================================================================== */
/* Base: all autofill states — light blue background + persist after blur */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 9999px #E8F0FE inset !important;
    box-shadow: 0 0 0 9999px #E8F0FE inset !important;
    -webkit-text-fill-color: #000 !important;
    caret-color: #000 !important;
    transition: background-color 9999s ease-in-out 0s, box-shadow 9999s ease-in-out 0s;
}

/* Focus: autofill + focused — same background + soft blue focus box-shadow ring */
input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus {
    border-color: #0074a9 !important;
    -webkit-box-shadow: 0 0 0 9999px #E8F0FE inset, 0 0 0 5px rgba(21, 156, 228, 0.31) !important;
    box-shadow: 0 0 0 9999px #E8F0FE inset, 0 0 0 5px rgba(21, 156, 228, 0.31) !important;
    -webkit-text-fill-color: #000 !important;
    caret-color: #000 !important;
}
[type=date]:focus,
[type=datetime]:focus,
[type=datetime-local]:focus,
[type=email]:focus,[type=file]:focus,
[type=month]:focus,[type=number]:focus,
[type=password]:focus,[type=search]:focus,
[type=tel]:focus,
[type=text]:focus,
[type=time]:focus,
[type=url]:focus,
[type=week]:focus,
select:focus,
textarea:focus,
button:focus,
[type="button"]:focus,
[type="reset"]:focus,
[type="submit"]:focus,
summary:focus {
    outline: 3px solid transparent;
    border-color: #0074a9;
    box-shadow: 0 0 0 5px rgba(21,156,228,0.4) !important;
}

@media only screen and (max-width: 1200px) {
    .cta-section .cta-container .wrapper {
        padding-left: 0;
        padding-right: 0;
    }
}


.mobilenav .govis-menu-node-controller .icon,
.mobilenav .js-mobilenav-back .icon {
    stroke: none !important;
    stroke-width: 0 !important;
}

/* iOS Chrome / Safari Cookie Consent Modal bottom cut-off fix */
.tx-we-cookie-consent,
#klaro,
#klaro .klaro.we_cookie_consent,
.klaro .cookie-modal {
    max-height: 100dvh !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
}

.klaro .cookie-modal .cm-modal,
#klaro .cm-modal {
    max-height: 88vh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
    margin-bottom: env(safe-area-inset-bottom) !important;
    box-sizing: border-box !important;
}

.klaro .cookie-modal .cm-modal .cm-footer,
#klaro .cm-footer {
    padding-bottom: max(15px, env(safe-area-inset-bottom)) !important;
}

@media only screen and (max-width: 768px){
    .klaro.we_cookie_consent .cookie-modal .cm-modal.cm-klaro .cm-footer{
        padding: 22px;
    }
    .klaro.we_cookie_consent .cookie-modal .cm-modal.cm-klaro .cm-footer{
        position: static !important;
        inset: initial !important;
        height: fit-content !important;
    }
    .klaro.we_cookie_consent .cookie-modal .cm-modal.cm-klaro .cm-footer{
        padding-top: 0 !important;
    }
    .klaro.we_cookie_consent .cookie-modal .cm-modal.cm-klaro .cm-footer > *{
        max-height: unset;
        height: unset !important;
    }
    .klaro .cookie-modal .cm-modal, #klaro .cm-modal{
        padding-bottom: 0 !important;
        inset: initial;
        top: 50%;
        transform: translateY(-50%);
    }
    .klaro.we_cookie_consent .cookie-modal .cm-modal.cm-klaro .cm-footer .cm-powered-by{
        margin: 0 !important;
    }
    .klaro.we_cookie_consent .cookie-modal .cm-modal.cm-klaro .cm-header{
        padding-bottom: 0 !important;
    }
    body:has(.cookie-modal),
    html:has(.cookie-modal){
        overflow: hidden !important;
    }
}