/* Inter 100 */
@font-face {
    font-family: 'Inter';
    font-weight: 100;
    src: url('../Fonts/Inter/Inter-Thin.woff2') format('woff2'),
        url('../Fonts/Inter/Inter-Thin.woff') format('woff');
}
/* Inter 200 */
@font-face {
    font-family: 'Inter';
    font-weight: 200;
    src: url('../Fonts/Inter/Inter-ExtraLight.woff2') format('woff2'),
        url('../Fonts/Inter/Inter-ExtraLight.woff') format('woff');
}
/* Inter 300 */
@font-face {
    font-family: 'Inter';
    font-weight: 300;
    src: url('../Fonts/Inter/Inter-Light.woff2') format('woff2'),
        url('../Fonts/Inter/Inter-Light.woff') format('woff');
}
/* Inter 400 */
@font-face {
    font-family: 'Inter';
    font-weight: 400;
    src: url('../Fonts/Inter/Inter-Regular.woff2') format('woff2'),
        url('../Fonts/Inter/Inter-Regular.woff') format('woff');
}
/* Inter 500 */
@font-face {
    font-family: 'Inter';
    font-weight: 500;
    src: url('../Fonts/Inter/Inter-Medium.woff2') format('woff2'),
        url('../Fonts/Inter/Inter-Medium.woff') format('woff');
}
/* Inter 700 */
@font-face {
    font-family: 'Inter';
    font-weight: 700;
    src: url('../Fonts/Inter/Inter-Bold.woff2') format('woff2'),
        url('../Fonts/Inter/Inter-Bold.woff') format('woff');
}


:root {
    /* Hue */
    --color-h: 162;
    /* Saturation */
    --color-s: 91%;
    /* Lightness  */
    --color-l: 8%;
    
    /* Variante */
    --variante-color-light: 100%;

    /* Color Variables */
    --secondary-color: #ffffff;

    /* Font Vaariables */
    --font-card: #ffffff;    
    --font-family: 'Inter';
    --font-family-header: var(--font-family);
    --font-weight-normal: 200;
    --font-weight-bold: 500;
    
    /* Menu */
    --menu-link-color: #fff;

    /*link variables */
    --link-color: var(--primary-color);
    
    /* button setup */
    --btn-color: var(--primary-color);
}


/* Hero Color themes */
.hero-primary-color {
    /* --bg-color-section: var(--primary-color); */
    /* change font color to --font-color if contrast is too weak */
    /* --font-color-section: var(--light-color); */
}
.hero-secondary-color {
    /* --bg-color-section: var(--secondary-color); */
    /* change font color to --font-color if contrast is too weak */
    /* --font-color-section: var(--dark-color); */
}

/* General
-------------------------------- */
a {
    text-decoration: underline;
}

/*
a:hover {
    color: white;
} */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--primary-color);
}

h1{font-size: 2.8em;}
h2{font-size: 2em; margin-bottom: 1.5vh;}
h3{font-size: 1.2em;}
h4{font-size: 1em;}
h5{font-size: 1em;}
h6{font-size: 1em;}


figcaption {
    font-style: italic;
    font-weight: var(--font-weight-normal);
}

hr {
    margin-top: 120px;
    margin-bottom: 80px;
}

.content-container {
    margin-bottom: 0;
    margin-top: 3vh;
}

.frame-space-before-small {
    margin-top: 10px;
}

.hero a {
    color: var(--secondary-color);
}

/* Nav
----------------------------------  */
.menu-container {
    z-index: 9;
    position: absolute;
    background: transparent;
}

#menu .menu_level_1 > li > a {
    font-weight: var(--font-weight-normal);
    color: var(--menu-link-color);
    font-size: 1.1rem;
    text-decoration: none;
    text-underline-offset: 8px;
}
#menu .menu_level_1 > li > a:hover {
    text-decoration: underline;
}

#menu a.aktiv {
    text-decoration: underline !important;
}

#menu .menu_level_1 .menu_level_2>li {
    margin-top: 0;
}

/* Buttons
----------------------------------- */
.btn-primary {
    background-color: var(--secondary-color);
    padding: 10px 30px;
    border: 1px solid var(--primary-color);
    font-weight: 300;
    transition: ease-in-out .3s;
    margin: 0;
}

.btn-primary:hover {
    background-color: var(--primary-color);
    color: var(--secondary-color) !important;
    border: 1px solid var(--primary-color) !important;
}

.btn-secondary {
    background-color: var(--light-color);
}

.btn-icon {
    max-width: 35px;
    height: auto;
    padding: 5px;
}

/* Tile
----------------------------------- */
.tile:hover .tile-img {
    filter: brightness(80%);
}

.tile.tile-link:hover .tile-img {
    transform: scale(1.05);
}

.tile.tile-nolink .tile-title {
    padding: 20px;
}

.tile-title {
    font-size: 25px !important;
    position: absolute;
    opacity: 0;
    height: 100%;
    width: 100%;
    transition: .3s ease-in-out;
    bottom: 0;
    padding: 20px;

    line-height: 100%;
}

.tile-container .tile:hover .tile-title {
    position: absolute;
    opacity: 1;
}

/* Buttons
----------------------------------- */
.button {
    background-color: var(--secondary-color);
    border: 1px solid var(--primary-color);
    padding: 10px 30px;
}


/* Hero Container
----------------------------------- */
.hero-image img {
    width: 600px;
}

.ce-textpic .ce-left .ce-above .ce-gallery .ce-row .row {
    width: 60%;
}

/* Logo
----------------------------------- */

/* masonry grid
----------------------------------- */
.masonry-grid {
    margin-top: 5vh;
}

/* Slider
----------------------------------- */
.slide-image img {
    max-height: 1000px;
    object-fit: cover;
}

.slide-image .text_slide {
    background-color: rgba(0, 0, 0, 0);
    text-align: center;
}
.slide-image .text_slide h2 {
    color: var(--menu-link-color);
    font-size: 3.2em;
}

.slide-image .text_slide h3 {
    color: var(--secondary-color);
}

.slider-container .slick-slider .slick-list .slide-image img {
    filter: brightness(60%);
}

/* Card
------------------------------------ */
.card .btn {
    background-color: transparent;
    color: var(--secondary-color) !important;
    border-radius: 0;
    padding: 10px 35px;
    transition: all .2s ease-in-out;
}

.card .btn:hover {
    background-color: var(--secondary-color);
    color: var(--primary-color) !important;
    border: 2px solid var(--primary-color);
    border-radius: 0;
    padding: 10px 35px;
    transition: all .2s ease-in-out;
}

.card {
    background-color: var(--primary-color);
    text-align: center;
    padding-bottom: 10px;
    box-shadow:
    1.9px 1.9px 0.8px rgba(0, 0, 0, 0.049),
    4.1px 4.1px 2.3px rgba(0, 0, 0, 0.067),
    6.2px 6.2px 5.4px rgba(0, 0, 0, 0.086),
    7px 7px 18px rgba(0, 0, 0, 0.14);
}

.card-body {
    color: var(--secondary-color);
}

.card .btn-container a {
    border: 1px solid var(--secondary-color);
    color: var(--secondary-color);

}

.card .btn-container a:hover {
    border: 1px solid var(--secondary-color);
    color: var(--primary-color);

}

.card-img {
    overflow: hidden;
    transition: ease-in-out .2s;
}

.card-img img {
    width: 100%;
}

.card-img img:hover {
    transform: scale(1.05);
}

/* Content
------------------------------------ */
.welcome-text {
    font-size: 1.8rem;
    color: var(--secondary-color);
    z-index: 1;
    position: absolute;
    color: var(--secondary-color);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* News
------------------------------------- */
.article-item {
    background-color: var(--primary-color);
    text-align: center;
    color: var(--secondary-color);
    padding-bottom: 10px;
    box-shadow:
    1.9px 1.9px 0.8px rgba(0, 0, 0, 0.049),
    4.1px 4.1px 2.3px rgba(0, 0, 0, 0.067),
    6.2px 6.2px 5.4px rgba(0, 0, 0, 0.086),
    7px 7px 18px rgba(0, 0, 0, 0.14);
}

.article-item a {
    color: var(--secondary-color);
    text-decoration: none;
}

.news-list-date {
    font-style: italic;
    font-weight: 100;
}

.teaser-text-detail p{
    font-weight: bold;
    font-size: 1.4rem;
}

.img-news-item {
    overflow: hidden;
}

.img-news-item img {
    transition: ease-in-out .3s;
}

.img-news-item img:hover {
    transform: scale(1.05);
}

a.more {
    border: 1px solid var(--secondary-color);
    padding: 10px 30px;
    transition: ease-in-out .3s;
}

a.more:hover {
    border: 1px solid var(--secondary-color);
    padding: 10px 30px;
    background: var(--secondary-color);
    color: var(--primary-color);
    text-decoration: none;
}

.item-body {
    padding: 10px;
}

.news-list-author {
    font-style: italic;
    font-weight: 100;
}

.news-list-category {
    font-weight: 400;
}

/* Form
------------------------------------- */
input, #kontakt-99-textarea-1 {
    box-shadow:
  1.9px 1.9px 0.8px rgba(0, 0, 0, 0.014),
  4.1px 4.1px 2.3px rgba(0, 0, 0, 0.019),
  6.2px 6.2px 5.4px rgba(0, 0, 0, 0.025),
  7px 7px 18px rgba(0, 0, 0, 0.04);
  border-radius: 5px;
  /* border: var(--primary-color);
; */
}

.teaser-text-detail p{
    font-weight: bold;
    font-size: 1.4rem;
}

/* Form
------------------------------------- */
input, #kontakt-99-textarea-1 {
    box-shadow:
  1.9px 1.9px 0.8px rgba(0, 0, 0, 0.014),
  4.1px 4.1px 2.3px rgba(0, 0, 0, 0.019),
  6.2px 6.2px 5.4px rgba(0, 0, 0, 0.025),
  7px 7px 18px rgba(0, 0, 0, 0.04);
  border-radius: 5px; 
}

/* Footer
------------------------------------- */
.footer-container {
    margin-top: 4vh;
    box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.50);
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

#footer img {
    min-width: 15px;
}

#footer a {
    color: var(--secondary-color);
    text-decoration: none;
}

#footer a:hover {
    text-decoration: underline;
}

#footer h1, #footer h2, #footer h3 {
    color: var(--secondary-color);
}

#logo-footer a img {
    width: 50px;
    margin-bottom: 15px;
}

.footer-container img {
    padding-bottom: 15px;
}

.social-icon img {
    height: 30px;
    width: auto;
  }

#footer .social-icon img {
	height: 40px !important;
	width: auto;
} 

/* Mobile nav
------------------------------------- */
.slicknav_menu {
    background-color: var(--primary-color) !important;
}

.slicknav_menu .slicknav_open.aktiv {
    background-color: var(--primary-color);    
}

.slicknav_open .slicknav_arrow {
    transform: rotate(-90deg);    
}

.slicknav_nav {
    height: 100vh;
}

.slicknav_icon, .slicknav_icon::before, .slicknav_icon::after {
    background-color: var(--secondary-color) !important;
}

.slicknav_nav a {
    margin: 0;
    padding: 25px 10px;
}

.slicknav_nav .slicknav_row,
.slicknav_nav a,
.slicknav_nav a a.aktiv,
.slicknav_nav a.aktiv {
    background-color: transparent;
    color: var(--secondary-color) !important;
}

.slicknav_nav .slicknav_row:hover,
.slicknav_nav a:hover,
.slicknav_nav a:hover a.aktiv,
.slicknav_nav a.aktiv:hover {
    background-color: transparent !important;
    color: var(--secondary-color) !important;
    text-decoration: none !important;
}
.slicknav_item:hover > a {
    color: var(--secondary-color);
}

.slicknav_arrow {
    right: 24px;
    position: absolute;
}

/* Nav */
.menu_level_1 {
    text-align: center;
    margin-bottom: 10px;
}

.menu_level_1 li {
    text-align: initial;
}

.menu_level_1 li a {    
    font-size: 1.5rem;
}

.menu_level_1 li a.aktiv {
    margin-top: 50px;
    color: var(--secondary-color);
    text-decoration: underline 1px solid;
}

#menu .menu_level_1 > li:hover .menu_level_2 {
    background-color: rgb(255, 255, 255, 0);
    text-align: initial;
    border-radius: 5px;
}

.menu_level_2 li {
    padding: 10px 0px;
    border-bottom: 1px solid var(--secondary-color);
    background-color: rgb(255, 255, 255, 0.15);
    transition: ease-in-out .2s;
    margin-top: 0px;
}

.menu_level_2 li:hover {
    padding: 10px 0px;
    border-bottom: 1px solid var(--secondary-color);
    background-color: rgb(255, 255, 255, 0.3);
}

.menu_level_2 li a {
    padding: 10px 15px;
    color: var(--secondary-color);
    font-size: 1.1rem;
    font-weight: 200;
    text-decoration: none;
}

.menu_level_2 li a:hover {
    text-decoration: none;
}

.slicknav_nav .slicknav_row, .slicknav_nav a  {
    color: var(--secondary-color);
}

/* Quotes
------------------------------------- */
.otro-blockquote {
    background-color: var(--primary-color-light);
    color: var(--primary-color);
}

.otro-blockquote span {
    color: var(--primary-color);
}

/* Tabs
------------------------------------- */
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

.tab-container ul.nav-tabs .nav-link {
    color: var(--primary-color);
}

.tab-container ul.nav-tabs .nav-link:hover {
    color: var(--secondary-color);
    background-color: var(--primary-color);
}




/*  @media, media-queries
---------------------------------------------------------------------------------------------------------------------------------------- */

/*  @media: Breakpoint Large (lg)»
---------------------------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {

}

/* end @media - Breakpoint Large (lg)» */


/*  @media: Breakpoint «Medium (md)»
---------------------------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

}
/* end @media - Breakpoint «Medium (md)» */


/*  @media: Breakpoint «Small (sm)»
---------------------------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

    .tile-title {
        font-size: 25px;
        position: absolute;
        opacity: 1;
        height: 100%;
        width: 100%;
        transition: .3s ease-in-out;
        bottom: 0;
        padding: 20px;
        line-height: 100%;
    }

    .menu_level_2 li {
        padding: 10px 0px;
        border-bottom: 0px solid var(--secondary-color);
        background-color: rgb(255, 255, 255, 0.25);
        margin-top: 3px;        
    }
    .menu_level_1 li a.aktiv {
        margin-top: 0px;
        color: var(--secondary-color);
        text-decoration: underline 1px solid;
    }

    .slide-image .text_slide h2 {
        font-size: 2em;
    }

    #content > .row {
        margin-top: 10px;
    }

    #footer h1, #footer h2, #footer h3 {
        margin-top: 15px;
    }
}

/* end @media - Breakpoint «Small (sm)» */


/*  @media: Breakpoint «X-Small (xs)»
---------------------------------------------------------------------------------------------- */
@media (max-width: 575.98px) {

}

/* end @media - Breakpoint «X-Small (xs)» */