/*!
 * ZKI
 * 2018 Web-Services Ulrich Diehl
 * 2022 TRITUM GmbH
 */

body {
    color       : #000;
    font-size   : 1.1rem;
    hyphens     : none;
    font-family : Verdana, Arial, Helvetica, sans-serif;
}

#skiplinks ol {
    margin-bottom : 0;
}

.wrapper {
    display        : flex;
    flex-direction : column;
    min-height     : 100vh;
    /* 1, 3 */
}

.header,
.stickyFooter {
    flex : none;
    /* 2 */
}

#mainContent {
    flex  : 1 0 auto;
    /* 2 */
    width : 100%;
}

@media screen and (min-width : 1200px) {
    #mainContent {
        padding : 1.5em;
    }
}

.footer {
    border-top : 2px solid #707172;
    padding    : 20px 0
}

figcaption {
    display      : block;
    caption-side : bottom;
    font-size    : 0.9rem;
    font-style   : italic;
    text-align   : center;
}

figure.image {
    margin-bottom : 15px;
}

.frame-type-menu_subpages ul {
    margin     : 0;
    padding    : 20px 0 50px 15px;
    list-style : none;
}

.homelinkZKI {
    width         : 100px;
    height        : 150px;
    background    : #004768;
    position      : relative;
    border-bottom : 2px solid #fff;
    float         : left;
}

.homelinkZKI img {
    position    : absolute;
    left        : 50%;
    top         : 50%;
    margin-left : -22px;
    margin-top  : -22px;
}

#page-1 .colored {
    background : #eceded;
    padding    : 15px;
}

#page-3 .frame-layout-6,
.parent-3 .frame-layout-6 {
    background-color : rgba(254, 204, 0, 0.7);
}

.colored {
    background     : #eceded;
    padding-bottom : 15px;
}

.colored .ce-bodytext,
.colored .ce-uploads {
    padding : 0 15px;
}

.colored.news {
    padding : 25px 15px;
}

.astronaut {
    position : relative;
}

.overlay p {
    color      : #004768;
    font-style : italic;
}

@media screen and (min-width : 992px) {
    .astronaut .overlay {
        position : absolute;
        top      : 120px;
        left     : 50px;
    }

    .overlay h2,
    .overlay p {
        color : #fff;
    }

    .overlay p {
        text-align  : right;
        font-size   : 1.4rem;
        line-height : 1.4;
    }
}

@media screen and (min-width : 1200px) {
    .astronaut .overlay {
        top  : 150px;
        left : 180px;
    }
}

/*!
 * ZKI – Typographie
 */

h1,
h2,
h3 {
    color : #004768;
}

h1 {
    font-size : 2rem;
}

h2 {
    font-size : 1.6rem;
}

h3 {
    font-size   : 1.3rem;
    color       : #000;
    font-weight : 700;
}

#page-2 .main a:hover,
.parent-2 .main a:hover {
    color           : #ced400;
    text-decoration : none;
}

#page-3 .main a:hover,
.parent-3 .main a:hover {
    color           : #fecc00;
    text-decoration : none;
}

#page-3 .frame-layout-6 ul li a,
.parent-3 .frame-layout-6 ul li a {
    color : #004768;
}

#page-4 .main a:hover,
.parent-4 .main a:hover {
    color           : #3388bc;
    text-decoration : none;
}

#page-5 .main a:hover,
.parent-5 .main a:hover {
    color           : #d6394b;
    text-decoration : none;
}

.colored h3 {
    padding-left : 15px;
}

.colored div > header > h3 {
    padding-top : 15px;
}

.colored .ce-bodytext h3 {
    padding-left : 0;
}

.colored h3,
.colored p {
    color : #707172;
}

.colored a {
    color           : #707172;
    text-decoration : underline;
}

.colored h4 a {
    text-decoration : none;
    font-size       : 1.2rem;
}

.colored h4 a:hover {
    text-decoration : underline;
}

.colored h4 {
    line-height : 1.1;
}

.btn-accordion {
    border     : none;
    width      : 100%;
    font-size  : 20px;
    text-align : left;
    padding    : 0;
}

.btn-accordion:hover {
    color           : #ced400;
    text-decoration : none;
}

.btn-accordion:active, .btn-accordion:focus {
    box-shadow : none;
    text-decoration : none;
}

.btn-accordion:focus-visible {
    border: 1px dotted #3388bc;
}

/*!
 * ZKI – Navigation
 */

.language-nav li {
    padding : 0 3px;
}

.navbar {
    background      : #004768;
    padding         : 0;
    justify-content : flex-start;
}

.white {
    color : #fff;
}

.nav-link,
.nav-link:hover {
    color : #fff;
}

.breadcrumbs .nav-link,
.breadcrumbs .nav-link:hover {
    color : #004768;
}

.nav-item-home img {
    padding : 0 10px 4px;
}

.js .dropdown-menu {
    display : none;
    margin  : 0.125rem 0 0;
}

.dropdown-item {
    color : #fff;
}

.dropdown-item:hover {
    background-color : transparent;
    text-decoration  : underline;
    color            : #fff;
}

.dropdown-menu .current .dropdown-item:hover {
    text-decoration : none;
}

.dropdown-item-2:hover {
    background-color : rgba(206, 212, 0, 1);
}

.dropdown-item-2 ul.dropdown-menu {
    background-color : rgba(206, 212, 0, 0.7);
}

.dropdown-item-3:hover {
    background-color : rgba(254, 204, 0, 1);
}

.dropdown-item-3 ul.dropdown-menu {
    background-color : rgba(254, 204, 0, 0.7);
}

.dropdown-item-4:hover {
    background-color : rgba(51, 136, 188, 1);
}

.dropdown-item-4 ul.dropdown-menu {
    background-color : rgba(51, 136, 188, 0.7);
}

.dropdown-item-5:hover {
    background-color : rgba(214, 57, 75, 1);
}

.dropdown-item-5 ul.dropdown-menu {
    background-color : rgba(214, 57, 75, 0.7);
}

.dropdown-menu {
    border        : 0 none;
    border-radius : 0;
}

.no-js nav ul ul {
    position  : absolute;
    top       : -9999px;
    left      : -9999px;
    display   : block;
    z-index   : 1000;
    min-width : 10rem;
}

.no-js nav ul ul li {
    float : none;
}

.no-js nav ul li:hover > ul {
    top  : 100%;
    left : 0;
}

.js #navbar-toggle-cbox {
    display : none !important;
}

.js .navbar-header {
    display : none !important;
}

#navbar-toggle-cbox:checked ~ .collapse {
    display : block;
}

#navbar-toggle-cbox {
    display : none
}

.no-js .navbar-toggler {
    display : none;
}

.breadcrumbs span.nav-link {
    color : #707172;
}

.zkiNavigation {
    display        : flex;
    flex-direction : column;
}

.zkiNavigationItem {
    background : #004768;
}

nav ul {
    margin      : 0;
    padding     : 0;
    list-style  : none;
    white-space : nowrap;
}

nav ul.firstLevel.flex-column {
    white-space : normal;
}

nav ul.firstLevel.flex-row li {
    width : 20%;
}

nav li {
    position  : relative;
    margin    : 0;
    flex-grow : 1;
}

@media screen and (max-width : 1199px) {

    .navbar .nav-link {
        display   : inline-block;
        font-size : 1rem;
    }

    .meta-mobile {
        background : #004768;
        text-align : center;
        padding    : 10px 0;
    }

    .meta-mobile ul.menu-sub.menu-subTwo a {
        color   : #fff;
        hyphens : auto;
    }

    ul.menu-sub {
        color      : #fff;
        padding    : 10px;
        margin     : 0;
        text-align : center;
    }

}

nav li.item-1 {
    background      : url("/typo3conf/ext/site_package/Resources/Public/Images/Frontend/Home.svg") center center no-repeat;
    background-size : 80px;
}

nav li.item-2 {
    background      : url("/typo3conf/ext/site_package/Resources/Public/Images/Frontend/ueber_ZKI.svg") center center no-repeat;
    background-size : 80px;
}

nav li.item-2:hover,
nav li.item-2.active,
nav li.item-2.current {
    background-color : #ced400;
    z-index          : 999;
}

nav li.item-3 {
    background      : url("/typo3conf/ext/site_package/Resources/Public/Images/Frontend/Top_Themen.svg") center center no-repeat;
    background-size : 80px;
}

nav li.item-3:hover,
nav li.item-3.active,
nav li.item-3.current {
    background-color : #fecc00;
    z-index          : 999;
}

nav li.item-4 {
    background      : url("/typo3conf/ext/site_package/Resources/Public/Images/Frontend/news.svg") center center no-repeat;
    background-size : 80px;
}

nav li.item-4:hover,
nav li.item-4.active,
nav li.item-4.current {
    background-color : #3388bc;
    z-index          : 999;
}

nav li.item-5 {
    background      : url("/typo3conf/ext/site_package/Resources/Public/Images/Frontend/Hochschulrechenzentren.svg") center center no-repeat;
    background-size : 80px;
}

nav li.item-5:hover,
nav li.item-5.active,
nav li.item-5.current {
    background-color : #d6394b;
    z-index          : 999;
}

nav .flex-row li.item-1,
nav .flex-row li.item-2,
nav .flex-row li.item-3,
nav .flex-row li.item-4,
nav .flex-row li.item-5 {
    background-position : 50% 85%;
    background-size     : 60px;
}

.flex-row .nav-subtitle {
    color     : #fff;
    font-size : 1rem;
}

.flex-row a {
    text-decoration : none;
}

.navbar-toggler-icon {
    background-image : url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/*!
 * ZKI – Breadcrumbs
 */

ul.breadcrumbs a::after {
    content      : "\203A";
    padding-left : 8px;
}

.breadcrumbs {
    color : #707172;
}

.breadcrumbs a {
    color : #004768;
}

.nav-link {
    padding : 0.5rem 0.3rem 0.5rem 0;
}

/*!
 * ZKI – Mobile Navigation
 */

.subnavheader {
    font-weight : 700;
    display     : block;
}

ul.menu-sub.menu-subTwo {
    color : #707172;
}

ul.menu-sub li {
    display : inline;
    padding : 5px 0 5px 0;
    hyphens : none;
}

ul.menu-sub li::after {
    content : "\00b7";
}

@media screen and (max-width : 550px) {
    ul.menu-subTwo li {
        display : block;
    }

    ul.menu-subTwo li::after {
        content : "";
    }
}

ul.menu-sub li:last-child::after {
    content : "";
}

ul.menu-sub a {
    color : rgba(255, 255, 255, 0.7);
}

ul.menu-sub.menu-subTwo a {
    color : #707172;
}

#page-2 ul.subitem,
.parent-2 ul.subitem {
    background-color : #ced400;
}

#page-3 ul.subitem,
.parent-3 ul.subitem {
    background-color : #fecc00;
}

#page-4 ul.subitem,
.parent-4 ul.subitem {
    background-color : #3388bc;
}

#page-5 ul.subitem,
.parent-5 ul.subitem {
    background-color : #d6394b;
}

/*!
 * ZKI – Forms
 */

.form-control::placeholder {
    color : #004768;
}

.form-control {
    border        : 1px solid #004768;
    border-radius : 0;
    width         : 95%;
}

.form-control:focus {
    color            : #004768;
    background-color : #fff;
    border-color     : #004768;
    outline          : none;
    box-shadow       : 0 0 0 0.1rem rgba(0, 71, 104, 0.5);
}

.logoZKI a img {
    margin : 20px 30px;
}

@media screen and (max-width : 550px) {
    .logoZKI a img {
        margin : 20px auto;
    }
}

/*!
 * ZKI – News Pagination
 */
.news .news-list-view .f3-widget-paginator li {
    margin-right : .5rem;
}

.news .news-list-view .f3-widget-paginator li a {
    padding          : .3rem .8rem;
    color            : #000;
    background-color : #b0bdca;
    border           : none;
    text-align       : center;
    display          : inline-block;
}

.news .news-list-view .f3-widget-paginator li a:hover {
    color            : #fff;
    background-color : #004768;
    cursor           : pointer;
    text-decoration  : none;
}

.news .news-list-view .f3-widget-paginator li.current a {
    color            : #fff;
    background-color : #004768;
}

/*!
 * ZKI – Desktop Anpassungen
 */

@media screen and (min-width : 1200px) {
    .searchboxZKI {
        margin-top : 97px;
        width      : 300px;
        color      : #004768;
    }

    .language-nav {
        margin-top   : 104px;
        padding-left : 5px;
    }

    .navbar-nav {
        flex : 1;
    }

    .navbar .nav-link {
        display : inline-block;
    }

    /*!
     * ZKI – News
     */
    .news-list-item h3 a {
        color   : #004768;
        hyphens : none;
    }

    .news-text-wrap {
        hyphens : auto;
    }

    .news-list-item h3 {
        font-size : 1.4rem;
    }

    .lead {
        font-size   : 1.2rem;
        font-weight : 300;
        color       : #000;
    }

    #page-2 .astronaut img,
    .parent-2 .astronaut img {
        filter : sepia(1) hue-rotate(55deg);
    }

    #page-3 .astronaut img,
    .parent-3 .astronaut img {
        filter : saturate(5) sepia(1) hue-rotate(330deg);
    }

    #page-4 .astronaut img,
    .parent-4 .astronaut img {
        filter : saturate(5) sepia(1) hue-rotate(160deg);
    }

    #page-5 .astronaut img,
    .parent-5 .astronaut img {
        filter : saturate(2) sepia(1) hue-rotate(270deg);
    }
}

a,
area,
button,
[role="button"],
input:not([type="range"]),
label,
select,
summary,
textarea {
    -ms-touch-action : manipulation;
    touch-action     : manipulation;
}