/*
Theme Name: OceanWP Child Theme
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme. Sample child theme.
Author: OceanWP
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 1.0
*/

html {
    font-size: 100%;
}

/* manrope-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/manrope-v15-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

p {
    font-size: 1.125rem !important;
}

li{
    font-size: 1rem;
}
/* Damit die Linkfarbe bei dunklem Hitnergrund weiss wird */

a:hover{
    color: #95cae7 !important;
}

.whtielink a{
    color: white !important;
}

.whtielink a:hover{
    color: #95cae7;
}´

/* Ausnahme für Links im FAQ */
#faq div div div div div p a{
    color: #212427 !important;
}

/* Damit die Radien der Banner verkleinert werden */

#mega-menu-wrap-main_menu #mega-menu-main_menu > li.mega-menu-megamenu > ul.mega-sub-menu {
    margin-top: 1.2rem;
}

.elementor-icon-list-items {
    font-size: 1.125rem;
    cursor: pointer;
    color: white;
}


/* Damit der Text bei Aufzählungspunkten fetter wird */

.e-con-inner .elementor-icon-list-text {
    font-weight: 500 !important;
}


/*Damit der Text bei Bildern verschwindet wenn kein Hover*/
.bannertext{
    opacity: 0;
    transition: 0.5s ease-in-out;
}
.banner:hover .bannertext{
    opacity: 1;
}

.banner {
    cursor: pointer;
}


/* Damit der Aufzählungspunkt mit dem Dreieck nach links verschoben wird beim Hovern */

.e-fas-caret-right {
    transition: 0.2s ease-in-out !important;
}

.elementor-icon-list-item:hover .e-fas-caret-right {
    transform: translateX(0.35rem);
}

/* Icons unter Service & Informationen beim Hovern vergrößern */
.e-fas-shopping-basket, .e-fas-clock, .e-fas-question-circle, .e-fas-ticket-alt {
    transition: transform 0.2s ease-in-out !important;
}

.elementor-icon-list-item:hover .e-fas-shopping-basket,
.elementor-icon-list-item:hover .e-fas-clock,
.elementor-icon-list-item:hover .e-fas-question-circle,
.elementor-icon-list-item:hover .e-fas-ticket-alt {
    transform: scale(1.2);
}

/* Damit das Datum unter Events größer wird */

#datum .elementor-icon-list-text{
    font-weight: 700 !important;
    font-size: 1.2rem;
}

body:not(.elementor-editor-active) div.elementor-background-video-container.elementor-hidden-phone {
    display: block !important;
 }
 html,body
 {
     width: 100%;
     margin: 0px;
     padding: 0px;
     overflow-x: hidden; 
 }

.n2-ss-slider {
    height: 75vh;
}

#site-header, #site-header-elementor {
    z-index: 1000;
    padding-top: 30px !important;
    position:fixed !important;
    top:0;
    left:0;
    right:0;
    transition: background-color 0.5s ease; /* Übergang für Hintergrundfarbe */
    padding-bottom: 20px;
}

#logo-container img {
    transition: opacity 0.25s ease-in-out;
}

.hidden {
    opacity: 0;
}

#mega-menu-wrap-main_menu #mega-menu-main_menu > li.mega-menu-item > a.mega-menu-link:hover{
    color: #bbd184 !important;
    transition: color 0.5s ease-in-out; /* Übergang für Hintergrundfarbe */
}

/* Ursprüngliche Hintergrundfarbe für die Pseudo-Elemente */
.responsive-menu-pro-inner,
.responsive-menu-pro-inner::before,
.responsive-menu-pro-inner::after {
    background-color: #FFFFFF !important;
}

/* Hintergrundfarbe für die Pseudo-Elemente nach dem Scrollen */
.scrolled .responsive-menu-pro-inner,
.scrolled .responsive-menu-pro-inner::before,
.scrolled .responsive-menu-pro-inner::after {
    background-color: #3D3D3D !important;
}

.rmp-menu-title-image{
    width: 10rem !important;
}

.elementor-icon-box-content > h4,
.elementor-icon-box-content > p {
    color: white !important;
}

.n2-ss-slider .n2-ow, .n2-ss-slider .n2-ow-all {
    height: 105vh;
}

/* Content SHOW/HIDE für Container Background */

.containerbackgorund {
    --text-position: -500px;
    --heading-position: -50px;
    --button-position: 70px;
}

.containerbackgorund, 
.containerbackgorund .single-card p, 
.containerbackgorund .single-card a, 
.containerbackgorund .single-card h3 {
    transition: .5s all ease-in-out;
}

.containerbackgorund .single-card p, 
.containerbackgorund .single-card a {
    position: relative;
    bottom: var(--text-position);
}

.containerbackgorund .single-card a {
    transition: 0.5s all linear;
    position: relative;
    top: 500px;
}

.containerbackgorund .single-card:hover p, 
.containerbackgorund .single-card:hover a {
    bottom: 0px;
}

.containerbackgorund .single-card:hover a {
    top: var(--button-position);
}

.containerbackgorund .single-card h3 {
    position: relative;
    bottom: var(--heading-position);
}

.containerbackgorund .single-card:hover h3 {
    bottom: 0px;
}

#card-one, #card-two {
    border-radius: 0px !important;
}

/* Media Query für mobile Ansicht */
@media only screen and (max-width: 768px) {
    .containerbackgorund {
        --button-position: 0px;
    }

    /* Damit die Überschrift in Mobil der Blogeinträge nicht zu groß ist */
    .single-post .entry-title {
        font-size: 1.5rem !important;
        text-align: left;
    }

    /* Damit der Abstand der Überschrift und des Beitragsbild in den Single Posts nicht zu groß ist */

    #main #content-wrap {
    padding-top: 0px !important; 
}

}

.single-header-ocean-3 {
    margin-bottom: 0px !important;
}

.kachel:hover img {
    transform: scale(2);
    transition: transform 0.5s ease-in-out;
}

/* Damit der Button des Sliders die Hintergrundfarbe ändert */

.elementor-325 .elementor-element.elementor-element-bd4019f .sina-content-slider .owl-prev, .elementor-325 .elementor-element.elementor-element-bd4019f .sina-content-slider .owl-next{
    background-color: #95cae7 !important;
}

/* Damit die Überschrift in den Singel Posts verschwindet */

.blog-post-title,
.avatar {
    display: none;
}

.single-header-ocean-3 {
    height: 50vh;
}

.blog-entry-comments {
    display: none;
}

/* Damit die volle Containerbreite genutzt wird */

.single-post.content-max-width .entry-header, .single-post.content-max-width ul.meta, .single-post.content-max-width .entry-content h1, .single-post.content-max-width .entry-content h2, .single-post.content-max-width .entry-content h3, .single-post.content-max-width .entry-content h4, .single-post.content-max-width .entry-content h5, .single-post.content-max-width .entry-content h6, .single-post.content-max-width .entry-content blockquote, .single-post.content-max-width .entry-content p, .single-post.content-max-width .wp-block-image, .single-post.content-max-width .wp-block-buttons, .single-post.content-max-width .wp-block-gallery, .single-post.content-max-width .wp-block-video, .single-post.content-max-width .wp-block-quote, .single-post.content-max-width .wp-block-text-columns, .single-post.content-max-width .wp-block-code, .single-post.content-max-width .entry-content ul, .single-post.content-max-width .entry-content ol, .single-post.content-max-width .wp-block-cover-text, .single-post.content-max-width .wp-block-cover, .single-post.content-max-width .wp-block-columns, .single-post.content-max-width .post-tags, .single-post.content-max-width .comments-area {
    max-width: 1200px !important;
}

.wp-post-image, .overlay{
    border-radius: 0.5rem;
}

/* Damit der Pfeil auf der Blogeintragseite grau wird */

.text::before {
    color: #3d3d3d !important;
}

/* Damit die Radien der Beitragsbilder unter "mehr" exisiteren */

.related-thumb {
    border-radius: 10px;
}

/* Damit das Titelbild der Beitragsseiten die volle Breite einnimmt und dabei eine vh von 45 hat */

#postthumbmail img {
    width: 100vw;
    height: 100%;
    object-fit: cover;

}

#postthumbmail div div{
    height: 60vh;
    overflow: hidden;
    
}

#overlay {
    height: 60vh;
}