/*
.image-embed-item {
    filter: drop-shadow(8px 8px 10px rgba(0, 0, 0, 0.5));
  }
*/




/******************* 01. Font Implementation *******************/
@font-face {
    font-family: 'Gabarito';
    font-style: normal;
    font-weight: normal;
    src: url('Fonts/Gabarito/Gabarito_wght_.woff2') format('woff2');
    /*src: url('Fonts/Inter/InterDisplay-Regular.woff2') format('woff2');*/
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: normal;
    src: url('/Fonts/Inter/InterDisplay-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter-Bold';
    font-style: normal;
    font-weight: normal;
    src: url('Fonts/Inter/InterDisplay-Bold.woff2') format('woff2');
}


/******************* 02. Variable Declarations *******************/
:root {

    /*** Fonts,see also Font Implementation at to top of this file ***/
    --font-family-normal: 'Inter', verdana, arial, helvetica, sans-serif;
    --font-weight-normal: 400;
    --font-variation-settings: 'wght' 400;

    --font-family-bold: 'Inter-Bold', verdana, arial, helvetica, sans-serif;
    --font-weight-bold: 500;
    --font-variation-settings-bold: 'wght' 500;

    --font-family-strong: 'Inter-Bold', verdana, arial, helvetica, sans-serif;
    --font-weight-strong: 400;
    --font-variation-settings-strong: 'wght' 600;

    /*** Colors begin ***/

    /* Links/Menus*/
    --color1: #0174B1;
    --color1a: #005e99;
    --color2: #D56062;
    /* Decoration*/
    --color3: #dddddd; /*#B8DBD9;*/
    --color4: #A7CCED;
    --color4a: #e5f0fa;
    --color5: #FFE66D;

    /*

      --color1: rgb(1, 106, 162);
      --color2: #EF767A;
      --color3: #C3D4B0;
      --color4: rgb(167, 204, 237);
      --color5: rgb(255, 230, 109);

      --color1: #017abc;
      --color2: #994A42;
      --color3: #C87A64;
      --color4: #9ABDE4;
      --color5: #FFE66D;
    */
    /* Gray Scale */
    --black: #000;
    --gray1: #14110F; /*#0C0F0A;*/
    --gray2: #694F5D; /*#34312D#363732;#463F3A;#5c5552ff;*/
    --gray3: #ded3cd; /*#aeb4b7;#827d7b;*/
    --gray4: #EAE0D7; /*#EAE0D7;(JS) #C5CACE;#ccc6c4;*/
    --gray5: #F8F4F1; /*#F7F6F5;#FBFBFF;#F4F6F5; #FAF0CA;#eef8f6*/
    --gray6: #555555; /* JS */
    --gray7: #3E3E3E; /* JS */
    --white: #fff;
    --white-opacity: rgba(255, 255, 255, 0.9);

    /* Message Colors */
    --error: #ba0202;
    --error-light: #fff2f2;
    --valid: #5abc55;
    --valid-light: #e8f6e7;
    --warning: #ffc800;
    --warning-light: #fffae8;
    --information: #2477cb;
    --information-light: #ecf5fe;

    /*** Colors end ***/

    /*** Basic Sizes ***/

    /* Basic horizontal spaces */
    --base-html-size: 16px;
    --body-font-size: 1rem; /* 16px*/

    --base-size: 1.5rem;
    --base-size-double: 3rem;
    --base-size-triple: 4.5rem;
    --base-size-half: 0.75rem; /*0.75rem;*/
    --base-size-quarter: 0.375rem;
    --base-size-eighth: 0.1875rem;
    --base-size-sibling: var(--base-size-quarter);

    /* Basic vertical spaces */
    --gutter: 1.5rem;
    --gutter-double: 3rem; /* JS 3rem */
    --gutter-triple: 4.5rem;
    --gutter-half: 0.75rem;
    --gutter-quarter: 0.375rem;
    --gutter-eighth: 0.1875rem;


    /* Borders */
    --border-width: 1px; /*JS 3px to 1px*/
    --border-radius: 3px;

    --transition: .3s ease-in-out;


    /******************* 03. Property Declarations, Individual Layout *******************/

    /* Max. Height of Logo in Header (--logo-height) on Website
    Rendered File height is defined in TypoScript Constants on Root Page. Adjust value if necessary
    Example: --logo-height: 150px;
    */
    --logo-height: calc(var(--base-size, 16px) * 3);

    /* Body */
    --font-color: var(--gray1);
    --font-color-light: var(--gray2);
    --body-bg-color: var(--white);

    /* Body links */
    --body-link-color: var(--color1);
    --body-link-hover-color: var(--font-color);
    --body-link-invers-color: var(--gray5);
    --body-link-invers-hover-color: var(--white);
    --body-link-text-decoration: underline;
    --body-link-text-decoration-color: var(--gray5);
    --body-link-text-decoration-thickness: 1px;
    --body-link-underline-offset: 3px;
    --body-link-text-decoration-hover-color: var(--color2);

    --horizontal-blocks-bg: var(--gray5);

    /* Page Header */
    --header-bg-color: var(--white);
    --header-bg-overlay: var(--white-opacity);
    --header-color: var(--font-color);
    --header-link-color: var(--body-link-color);
    --header-link-hover-color: var(--body-link-hover-color);
    --header-service-height: var(--logo-height);
    --mobile-logo-height: calc(var(--base-size) * 2);
    --nav-header-height: calc(var(--base-size) * 2);
    --header-height: calc(var(--base-size) * 4);
    --header-height-fixed: calc(var(--base-size) * 2);

    --header-button-color: var(--white);
    --header-button-hover-color: var(--white);
    --header-button-bg: var(--body-link-color);
    --header-button-hover-bg: var(--body-link-hover-color);
    --header-button-border: var(--body-link-color);
    --header-button-hover-border: var(--body-link-hover-color);

    /* Page Footers */
    --footer-bg: var(--gray7); /*--gray4*/
    --footer-color: var(--white); /*--font-color*/
    --footer-link-color: var(--color4);
    --footer-link-hover-color: var(--body-link-invers-hover-color);

    --footer2-bg: var(--gray6);
    --footer2-color: var(--white);
    --footer2-link-color: var(--body-link-invers-color);
    --footer2-link-hover-color: var(--body-link-invers-hover-color);

    /* Fonts sizes depending on display size */
    --base-html-size-small: var(--base-html-size);
    --base-html-size-medium: calc(var(--base-html-size) * 1.125);
    --base-html-size-large: calc(var(--base-html-size) * 1.1875);

    /* Font sizes - https://type-scale.com/*/
    --font-size1: 2.827rem; /* h1 */
    --line-height1: calc(var(--base-size) * 1.75);
    --font-size2: 1.999rem; /* h2 */
    --line-height2: calc(var(--base-size) * 1.5);
    --font-size3: 1.414rem; /* h3 */
    --line-height3: calc(var(--base-size) * 1.25);
    --font-size4: 1.125rem; /* h4 */
    --line-height4: var(--base-size);
    --font-size5: var(--body-font-size); /* h5 */
    --font-size-small: calc(var(--body-font-size) * 0.8);
    --line-height-small: calc(var(--body-font-size) * 0.8);

    --font-size-dt: var(--font-size3);
    --line-height-dt: var(--line-height3);

    /* Headers h1-h5 */
    --header-font-family: var(--font-family-bold);
    --header-font-weight: var(--font-weight-bold);
    --header-font-color: var(--font-color);
    --header-font-variation-settings: var(--font-variation-settings-bold);

    /* Buttons primary */
    --button-color: var(--white);
    --button-hover-color: var(--white);
    --button-bg: var(--body-link-color);
    --button-hover-bg: var(--body-link-hover-color);
    --button-border: var(--body-link-color);
    --button-hover-border: var(--body-link-hover-color);

    /* Buttons secondary */
    --button2-color: var(--body-link-color);
    --button2-hover-color: var(--font-color);
    --button2-bg: var(--white);
    --button2-hover-bg: var(--color4a);
    --button2-border: var(--body-link-color);
    --button2-hover-border: var(--body-link-color);

    /* Tables: border color and cell borders.*/
    --table-border-color: var(--gray3);
    --table-hover-color: var(--font-color);
    --table-hover-bg: var(--gray5);
    --table-header-bg: var(--gray5);
    --table-header-color: var(--font-color);
    --stripedblock-bg: var(--gray5);

    /* Default Border */
    --border-color: var(--gray4);
    --border-radius-up: 100% 0 / 10px 200px; /*100% 0 100% 0 / 7% 93% 7% 93%;*/

    /* Image Border Option for Editors*/
    --image-border-color: var(--border-color);
    --image-border-width: var(--border-width);

    /* Layout Option for Editors*/
    --layout-100-bg: var(--color3);
    --layout-100-link-color: var(--color1a);

    --layout-301-bg: linear-gradient(90deg, var(--white) 45%, var(--color3) 45%);

    /* Toggle Content Header Frame Option */
    --toggle-bg: var(--gray5);

    /* Paddíng for all boxes with background */
    --padding-boxes: var(--base-size-half) var(--gutter-half);
    /* Paddíng for boxes with siblings ex. image above */
    --padding-boxes-sibling: var(--base-size-sibling) var(--gutter-half);

    --box-shadow: rgba(0, 0, 0, 0.2);


    /***** Content Element: Hero Text over image options *****/
    --hero-text-light: var(--white);
    --hero-text-shadow-light: 1px 1px 1px var(--black);
    --hero-text-dark: var(--black);
    --hero-text-shadow-dark: 1px 1px 1px var(--white);
    --hero-text-bg-light: rgba(255, 230, 109, 0.8);
    --hero-text-bg-dark: rgba(126, 201, 187, 0.8);

    --maxtextwidth: 48rem;


    --menu-wrapper-card: var(--color1);

    /***** Navigation smartmenu *****/

    /* Navigation background over whole browser width */
    --menu-bg-100vw: var(--white);

    --menu-font-family: var(--font-family-normal);

    /*Mobile Items separators*/
    --collapsible-separators-color: rgba(0, 0, 0, 0.05);
    /*Toggle button (sub menu indicators)*/
    --collapsible-toggle-bg: var(--white-opacity);
    --collapsible-submenu-bg: rgba(var(--gray4), 0.1);

    /* 1.level menu */
    --menu-link-color: var(--body-link-color);
    --menu-link-hover-color: var(--font-color);
    --menu-bg: var(--white);
    --menu-hover-bg: var(--gray5);
    --menu-current-bg: var(--gray5);
    --menu-arrow-color: var(--menu-link-color);

    /* 2.level menu */
    --submenu-link-color: var(--body-link-color);
    --submenu-link-hover-color: var(--font-color);
    --submenu-current-color: var(--font-color);
    --submenu-bg: var(--gray5);
    --submenu-hover-bg: var(--white);
    --submenu-current-bg: var(--white);
    --submenu-arrow-color: var(--body-link-color);
    --desktop-submenu-border-color: var(--border-color);

    /* hamburger icon for mobile menu */
    --menu-icon-button: var(--body-link-color);

}

/* set linear gradient to bottom for navigation cards (JS) */
.header-image [class*=frame-type-menu_].frame-layout-252 .wrapper-card {
    background: linear-gradient(to bottom, rgba(1,116,177,0.8), rgba(1,116,177,1)) !important;
}

/* remove the background for navigation cards (JS) */
[class*=frame-type-menu_].frame-layout-251 .grid h3, [class*=frame-type-menu_].frame-layout-252 .grid h3 {
    background: none !important;
}

/* header h2 set horizontal position to 0 (JS) */
@media (min-width: 1400px) {
    .content-main .width-max h2.ce-headline-left {
        left: 0 !important;
    }}



/* picture shadowing */
@media (min-width: 300px) {
    .image-embed-item {
        filter: drop-shadow(3px 3px 3px #777) !important;
        max-width: 97% !important;
    }


    .news .article .news-img-wrap {
        filter: drop-shadow(3px 3px 3px #777) !important;
    }

    .wrapper-card figure {
        width: 103% !important;
        display: block;
    }

}

/* solr-search */
.results-highlight {
    background-color: var(--color5);
 }

/* picture shadowing */
@media (min-width: 1400px) {
    .image-embed-item {
        filter: drop-shadow(5px 5px 5px #777) !important;
        max-width: 97% !important;
    }


    .news .article .news-img-wrap {
        filter: drop-shadow(5px 5px 5px #777) !important;
    }

    .wrapper-card figure {
        width: 103% !important;
        display: block;
    }

}

@media (min-width: 1400px) {
    .content-main .width-max h2.ce-headline-left {
        left: 0 !important;
    }
}

.header-service .tx_solr.container {
    position: relative;
    z-index: 100;
}

.header-service:has(#main-menu-state:checked) .tx_solr.container {
    z-index: 1;
}