/* TT Hoves */
@font-face {
    font-family: 'TT Hoves';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/MSK_Pro_Regular.eot'); /* IE9 Compat Modes */
    src: local('TT Hoves Regular'), local('TT-Hoves_regular'),
    url('../fonts/MSK_Pro_Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/MSK_Pro_Regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/MSK_Pro_Regular.woff') format('woff') /* Modern Browsers */
}
@font-face {
    font-family: 'TT Hoves';
    font-style: normal;
    font-weight: bold;
    src: url('../fonts/MSK_Pro_DemiBold.eot'); /* IE9 Compat Modes */
    src: local('TT Hoves DemiBold'), local('TT-Hoves_DemiBold'),
    url('../fonts/MSK_Pro_DemiBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/MSK_Pro_DemiBold.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/MSK_Pro_DemiBold.woff') format('woff') /* Modern Browsers */
}
@font-face {
    font-family: 'TT Hoves';
    font-style: italic;
    font-weight: normal;
    src: url('../fonts/TT_Hoves_Pro_Italic.eot'); /* IE9 Compat Modes */
    src: local('TT Hoves Regular'), local('TT-Hoves_regular'),
    url('../fonts/TT_Hoves_Pro_Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/TT_Hoves_Pro_Italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/TT_Hoves_Pro_Italic.woff') format('woff') /* Modern Browsers */
}
@font-face {
    font-family: 'TT Hoves';
    font-style: italic;
    font-weight: bold;
    src: url('../fonts/TT_Hoves_Pro_Bold_Italic.eot'); /* IE9 Compat Modes */
    src: local('TT Hoves DemiBold'), local('TT-Hoves_DemiBold'),
    url('../fonts/TT_Hoves_Pro_Bold_Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/TT_Hoves_Pro_Bold_Italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/TT_Hoves_Pro_Bold_Italic.woff') format('woff') /* Modern Browsers */
}
.hide {
    display:none !important;
}

/* FONTS
------------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a,
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, .h1 a:hover, .h2 a:hover, .h3 a:hover, .h4 a:hover, .h5 a:hover, .h6 a:hover {
    color: #c5a500;
    font-family: 'TT Hoves', Arial, Helvetica, sans-serif;
    line-height: 1.1em;
    text-decoration: none;
    font-weight: 600;
    margin-bottom: 0.5em;
}
h2{
    font-size: 24px;
}
h3, h4{
    font-size: 24px;
}
a:not([class]) {
    text-decoration: none !important;
}
a {
    color: #006179;
    text-decoration: none;
}
a:focus,
a:active {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    color: #c5a500;
}

ol, ul {
    padding-left: 0.2rem;
}
ul li {
    list-style-type: none;
}
ul li:before {
    font-family: "Font Awesome 6 Free";
    content: "\f105";
    /*font-size: 0.8em;*/
    padding-right: 0.3em;
}

.item-page ul li,
.item-page ol li {
    line-height: 1.6em;
}

.clear {
    height: 0;
    width: 0;
    clear: both;
}

p {
    margin: 0 0 1em 0;
}

hr {
    border-color: #006179;
    border-image: none;
    border-right: 0 none;
    border-style: solid none none;
    border-width: 1px;
    margin-bottom: 1.5em;
    margin-top: 1.5em;
}

p {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

table {
    width: 100%;
}

table td {
    vertical-align: top;
}

i, em {
    font-family: 'TT Hoves', Arial, Helvetica, sans-serif;
    font-style: italic;

}

/* FRONTEND CSS
------------------------------------------------------------------------------- */
html {
    overflow-y: scroll;
}

body {
    background-color: #e5e5e5;
    text-align: center;
    font-family: 'TT Hoves', Arial, Helvetica, sans-serif;
    color: #006179;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5em;
}

b, strong {
    font-family: 'TT Hoves', Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-style: normal !important;
}

/* Grundlayout
------------------------------------------------------------------------------- */
#all {
    width: 100%;
}
#main {
    position: relative;
    z-index: 2;
}
.js body #all {
    opacity: 0;
}

.js body.fade-in #all {
    opacity: 1;
    transition: opacity 1s ease;
}

header {
    width: 100%;
}

header .wrapper {
    max-width: 1024px;
    margin: 0 auto;
    padding: 50px 22px 0 0;
    height: 100%;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
}

article {
    max-width: 1024px;
    margin: 0 auto;
    text-align: left;
}

footer {
    text-align: left;
    width: 100%;
}

/* Email + Tel Verschlüsselung
------------------------------------------------------------------------------- */
.obf {
    cursor:pointer;

}
/* Buttons
------------------------------------------------------------------------------- */
.btn {
    background-color: #c5a500 !important;
    color: #ffffff;
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
    -moz-user-select: none;
    background-image: none;
    border: 0 solid transparent;
    border-radius: 0;
    font-size: 18px;
    line-height: 1.1;
    margin-top: 0;
    text-align: left;
    white-space: wrap;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.btn.btn-secondary {
    background-color: transparent !important;
    color: #ffffff;
    padding:0;
    align-items: start;
}
.btn.ics {
    margin: 0 0 21px 42px;
    width:200px;
}
.btn a {
    color: #ffffff !important;
}

.btn:hover {
    background-color: #006179 !important;
    color: #ffffff !important;
}
.btn.btn-secondary:hover {
    background-color: transparent !important;
    color: #006179 !important;
}
.btn .fa-solid,
.btn .fa-regular {
    font-size: 2em;
    padding-right: 15px;
}

/* Header
------------------------------------------------------------------------------- */
.navbar {
    background-color: #fff;
    position: relative;
    display: block;
    margin-bottom: 0;
    min-height: 150px;
}
#logo.navbar-brand {
    padding: 0 0 10px 42px;
}

#logo.navbar-brand img {
    max-width: 270px;
}

#logo-msk.navbar-brand {
    padding: 0 0 30px 0;
}

#logo-msk.navbar-brand img {
    max-width: 150px;
}

/* Slider
------------------------------------------------------------------------------- */
#visual-home .wrapper {
    max-width: 1024px;
    margin: 0 auto;
}
#visual-home h1 {
    position: absolute;
    bottom: 126px;
    left: 26px;
    z-index: 1000;
    text-align: left;
}
#visual-home h1 span {
    padding: 0.1em 0.3em;
    text-align: left;
    color:#fff;
    font-size: 48px;
    font-weight: 600;
    background-color: #c5a500;
    line-height: 1.2em;
    -webkit-box-decoration-break: clone; /* für Safari */
    box-decoration-break: clone;
}
#visual-home {
    position: relative;
    height: 600px;
    background-color: #fff;
    text-align: center;
    overflow: hidden;
}

/* Slider-Layer */
#visual-home .vh-slide{
    position:absolute;
    inset:0;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    opacity:0;
    transition: opacity 1.2s ease-in-out;
    z-index:1;
}

/* aktiver Slide */
#visual-home .vh-slide.is-active{
    opacity:1;
}

/* Text-Ebene bleibt oben */
#visual-home .wrapper{
    margin:0 auto;
    max-width:1024px;
    position: relative;
    height:100%;
    z-index:3;
}
#visual-home .vh-slide{
    background-attachment: fixed;
}
@media (max-width: 1024px){
    #visual-home .vh-slide{ background-attachment: scroll; }
}

/* Counter
------------------------------------------------------------------------------- */
.countdown{
    width: calc(200px - 10px);
    /*height: calc(200px - 10px);*/
    margin: 0 0 21px 0;
    background-color: #c5a500;
    border-radius: 15px;
    padding:16px 21px 21px 21px;
    color: #fff;
}

/* Desktop Default */
.countdown .cd-top,
.countdown .cd-bottom{
    font-size: 36px;
    line-height: 1em;
    text-align: center;
    width:100%;
}

.countdown .cd-number{
    font-size: 100px;
    font-weight: 700;
    line-height: 0.9em;
    text-align: center;
    width:100%;
}

/* Speakers
------------------------------------------------------------------------------- */
.content.speak {
    display:flex;
    flex-wrap: wrap;
    gap: 21px;
    justify-content: space-between;
}
.content.speak .links {
    width:70%;
}
.rechts {
    width:20%;
}
/*.content.speak .rechts h2 {
    font-size: 24px;
    margin-top: 0.8em
}*/
.speakers {
    display:flex;
    flex-wrap: wrap;
    gap: 21px;
    justify-content: flex-start;
}
.speakers p {
    margin: 0;
}
.speaker  {
    width: 200px;
    margin: 0 0 21px 0;
    flex-grow:initial;
}
.speaker .speaker-image img {
    border-radius: 15px;
    width: 100%;
    height:auto;
}
.speaker .speaker-info {
    font-size: 14px;
    line-height: 1.4em;
    padding: 0.5em 0 0 0;
}

/* Inhalt
------------------------------------------------------------------------- */
.content {
    max-width: 100%;
    margin: 42px auto;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 31px 41px 41px 41px;
    font-weight: 400;
    line-height: 1.5em;
}
.content.top {
    margin: -84px auto 42px auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.content.top .links {
    width:70%;
}

/* Portrait
------------------------------------------------------------------------------- */
.custom_portrait {
    max-width: 100%;
    margin: 0 auto 42px auto !important;
    background-color: #c5a500;
    padding: 41px;
    display: flex;
    flex-direction: row-reverse;
    align-content: stretch;
    justify-content: space-between;
    gap: 42px;
    list-style: none;
    text-align: left;
    color: #006179;
    font-size: 18px;
}

.custom_portrait p:last-child {
    margin: 0;
}

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

.custom_portrait a {
    color: #c5a500;
}
.custom_portrait a:hover {
    color: #006179;
}
.custom_portrait .rechts,
.custom_portrait .links {
    width: 50%;
}

/* Pressekontakt
------------------------------------------------------------------------------- */
.pressekontakt {
    margin: 42px auto 42px auto !important;
    padding:42px !important;
    display: flex;
    flex-direction: row;
    align-content: stretch;
    justify-content: space-between;
    gap: 42px;
}
.pressekontakt .links {
    flex-grow:0;
}
.pressekontakt .rechts {
    flex-grow:2;
}
.pressekontakt img {
    width: 250px;
    height:auto;
}

/* Footer
------------------------------------------------------------------------------- */
#footer {
    background-color: #006179;
    width: 100%;
    border-top: 1px solid #fff;
    position: relative;
    height: 100%;
    font-weight: 400;
}

#footer #sitemap {
    max-width: 1024px;
    margin: 0 auto;
    padding: 42px 52px 21px 42px;
}

#footer #sitemap a#logo-footer {
    background: url("../images/logo_aktuare2.png") top left no-repeat;
    width: 39px;
    height: 38px;
    position: absolute;
    right: 42px;
    top: 42px;
}

#footer a {
    background: transparent;
    color: #fff;
    text-decoration: none !important;
}

#footer li > a.dropdown-toggle {
    color: #99c0c9;
}

#footer li.active > a {
    color: #c5a500;
}

#footer a:hover,
#footer a:active,
#footer a:focus,
#footer li.active a:hover {
    color: #c5a500;
}

#footer .custom p {
    color:#fff;
    margin: 0;
}

#footer .custom a:hover {
    text-decoration: none;
}

#footer a {
    font-weight: 400;
}

#footer #impressum {
    max-width: 1178px;
    margin: 0 auto;
    position: relative;
    background-color: #006179;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: baseline;
    align-content: baseline;
    flex-direction: row;
}

#footer #impressum .mod-custom {
    gap: 0 !important;
}

#footer #impressum .mod-custom {
    margin: 21px 0 42px 42px;
    position: relative;
}

#footer .line {
    border-top: 1px #6da9c6 solid;
    width: 100%;
}

#footer a#msk:hover {
    text-decoration: none;
}

#footer a#logo-footer {
    background: url("../images/logo_aktuare2.png") top left no-repeat;
    width: 39px;
    height: 38px;
    position: relative;
    float: right;
}

#footer a {
    font-weight: 400;
}

#footer #impressum {
    max-width: 1024px;
    margin: 0 auto;
    position: relative;
    width: 100%;
    background-color: #006179;
}
#footer #sitemap {
    max-width: 1024px;
    margin: 0 auto;
    padding: 42px 52px 21px 42px;
}

#footer .line {
    border-top: 1px #6da9c6 solid;
    width: 100%;
}

#footer #msk {
    position: absolute;
    right: 46px;
    bottom: 42px;
    height: auto;
    width: auto;
    text-align: right;
}

#footer a#msk:hover {
    text-decoration: none;
}

/* to-top button
------------------------------------------------------------------------------- */
.back-to-top-link {
    position: fixed;
    bottom: 20px;
    right: 42px;
    z-index: 100000;
    font-size: 1em;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 7px 10px;
    border-radius: 4px;
    width: 40px;
    height: 40px;
    background-color: #c5a500;
    color: #fff;
}
.back-to-top-link:active,
.back-to-top-link:focus,
.back-to-top-link:hover {
    background-color: #c5a500;
    color: #fff;
}

.back-to-top-link .icon-fw {
    width: auto !important;
}

/* Media Queries
*********************************************/
@media screen and (max-width: 767px) {
    h1, h2, h3 {
        hyphens: auto;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
    }
    .btn.ics {
        margin: 21px 0 21px 0;
    }
    header .wrapper {
        padding: 50px 0 0 0;
    }
    #logo.navbar-brand {
        padding: 0 0 10px 21px;
    }
    #visual-home {
        height: 400px;
        background-image: url("../images/Flora-Koeln-1.jpg");
        background-color: #fff;
        text-align: center;
        overflow: hidden;
    }
    #visual-home h1 {
        bottom: 16px;
        left: 16px;
    }
    #visual-home h1 span {
        font-size: 36px;
    }
    #main {
        width: 100%;
    }
    .startseite .content.top {
        margin: 0 auto 42px auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .content.top .links {
        width: 100%;
    }
    .content.speak {
        flex-direction: column;
    }
    .content.speak .links,
    .content.speak .rechts {
        width:100%;
    }
    .countdown {
        width: 200px;
        height: 200px;
        margin: 21px 0;
        background-color: #c5a500;
        border-radius: 15px;
        padding: 16px 21px 21px 21px;
        color: #fff;
    }
    .startseite .content {
        padding: 21px;
    }
    .custom_portrait {
        padding: 21px;
        flex-direction: column;
        gap: 21px;
    }
    .custom_portrait .rechts, .custom_portrait .links {
        width: 100%;
    }
    .pressekontakt {
        padding: 21px !important;
        flex-direction: column;
        gap: 21px;
    }
    .pressekontakt p {
        margin:0;
    }
    #footer {
        padding-bottom: 21px;
    }
    #footer #sitemap {
        max-width: 1024px;
        margin: 0 !important;
        padding: 21px;
    }
    address {
        margin-bottom: 0;
    }

    #footer #sitemap a#logo-footer {
        right: 21px;
        top: 21px;
    }
    #footer #impressum .mod-custom {
        margin: 21px 0 10px 21px;
        position: relative;
    }
    #footer #msk {
        position: relative;
        right: auto;
        bottom: auto;
        text-align: left;
        margin: 10px 0 21px 21px;
    }
    .back-to-top-link {
        bottom: 20px;
        right: 21px;;
    }
}
@media screen and (max-width: 490px) {
    .navbar {
        min-height: 90px;
    }
    header .wrapper {
        gap: 0;
    }
    header .wrapper {
        padding: 30px 0 0 0;
    }
    #logo-msk.navbar-brand {
        padding: 0 0 25px 0;
    }
    #logo.navbar-brand {
        padding: 0 0 10px 16px;
    }
    #logo.navbar-brand img {
        max-width: 190px;
    }
    #logo-msk.navbar-brand img {
        max-width: 120px;
    }
    #footer #sitemap a#logo-footer {
        position: relative !important;
        right: auto;
        top: auto;
    }
}