/* 
Theme Name: Stiftung Kinderhospiz Schweiz
Text Domain: stikiho-text
Version: 2.5.1
Description: WP Theme für die Website der Stiftung Kinderhospiz Schweiz
Author: Sandro Beti
Author URI: https://sandrobeti.ch
*/

/* Fonts */
@font-face {
    font-family: 'FavoritPro';
    /* The font family name you want to use */
    src: url('./assets/fonts/FavoritPro-Regular.otf') format('truetype');
    /* URL to your font file */
}

@font-face {
    font-family: 'FavoritLining';
    /* The font family name you want to use */
    src: url('./assets/fonts/ABCFavoritLining-Regular.otf') format('truetype');
    /* URL to your font file */
}

/* Variables */
:root {
    --font-size-desktop: 24px; 
    --font-size-mobile: 20px;
    --gradient_landing: linear-gradient(
        #EE7DBB,
        #F3FB99,
        #80C38C,
        #96F6F6,
        #EE7C61,
        #F7CDDC,
        #DFFC5D,
        #C4B9F4,
        #EC4D45);
}

/* General Settings */
html{
    scroll-behavior: smooth;
    scroll-padding-top: var(--scroll-padding, 8rem);
    
}
body {
    font-family: 'FavoritPro';
    font-size: var(--font-size-mobile);
    line-height: 2rem;
    margin: 0;
    background: rgb(255, 255, 255);
    max-width: 100%;
    color: 3c0dff;
    }
header {
    position: fixed;
    width: 100vw;
    z-index: 999;
    transition: 0.2s all;
}
footer {
    z-index: 999;
}
.footer_main{
background-color: #3c0dff;
}
ul {
    list-style-type: none;
}
a {
    color: #3c0dff;
    text-decoration: none;
    cursor: pointer;
    
}
p{
    margin-block-start: 1.5rem;
    margin-block-end: 1.5rem;
}
    p a{
    display: inline-flex;
    color: #3c0dff;
    font-family: 'FavoritLining';
    text-shadow: #3c0dff 0 0 0px;
    margin: 0rem 0 0rem 0;
    transition: 0.2s all;
}
p a:hover{
    color: white;
    text-shadow: #3c0dff 0 0 5px;
}
a:hover {
    text-decoration: none;
}
img,
picture{
    max-width: 100%;
    display: block;
}
h1{
    font-family: 'FavoritLining';
    font-size: var(--font-size-mobile);
    color: #3c0dff;
    font-weight: 100;
}
.wp-block-separator{
    color: rgba(0, 0, 0, 0);
}
.mc4wp-form-basic input[type="submit"], .mc4wp-form-basic button, .mc4wp-form-basic input[type="button"]{
    font-size: var(--font-size-mobile);
}
button {
    border: none;
    background: none;
    font-family: 'FavoritPro';
    font-size: var(--font-size-desktop);
    margin: 0;
}
.video{
    display: flex;
}
.video iframe{
    aspect-ratio: 16 / 9;
    width: 100%;
    height: 100%;
    border-radius: 1rem;
}

.wp-block-embed-youtube{
}
.wp-block-embed-youtube iframe{
    aspect-ratio: 16 / 9;
    width: 100%;
    height: 100%;
    border-radius: 1rem;
}

/* Front-Box */
.front-notification{
    background: white;
    border: 2px solid #3c0dff;
    margin-bottom: 3rem;
    border-radius: 2rem;
}

.front-notification-flexbox{
display: flex;
flex-direction: column;
margin: 1rem 1rem 0.5rem 1rem;
align-items: center;
/* text-align: left; */
}
.front-notification-button{
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    background: #3c0dff;
    color: white;
    border-radius: 2rem;
    padding: 0.5rem 1rem 0.5rem 1rem;
    transition: all 0.2s;
}
.front-notification-button a{
    color: white;
}
.front-notification-button:hover{
    box-shadow: 0 0 0.2rem 0.2rem #3c0dff; 
}
/* Front-Box End*/

/* Jahresbericht Styles */

/* Mobile specific */

.jb-start-title{
    font-size: 48px;
}

.no-p-margin{
    margin-block: 0;
}

.jb-small-details{
    font-size: 18px;
    line-height: 1.4rem;
    text-align: left;
}

.jb-small{
    font-size: 18px;
    line-height: 1.4rem;
}

.jb-facts-title{
    /* font-size: 3rem; */
    margin-bottom: -20px;
}
.jb-facts-box{
    background-color: #C4B9F4;
     box-shadow: 0 0 1.25rem 1rem #C4B9F4;
     border-radius: 6rem;
}
.wp-block-details{
    border-radius: 2rem;
    margin: 0 0.5rem;
}

.no-mobile-margin-start{
    margin-block-start: -1.5rem;
}

.no-mobile-margin-end{
    margin-block-end: -1.5rem;
}

.center-summary{
 background-color: #C4B9F4;
 box-shadow: 0 0 1.25rem 1.25rem #C4B9F4;
}

.lining-jb{
    /* font-family: 'FavoritLining'; */
    margin-bottom: 0.5rem;
    transition: 0.2s all;
}

.lining-jb:hover{
    color: white;
    text-shadow: #3c0dff 0 0 5px;
}

summary{
    /* padding-left: 2rem; */
}

summary {
    list-style: none; /* Remove the default arrow/marker */
    cursor: pointer; /* Change the cursor on hover */
    position: relative;
    text-align: center;
  }
  
  summary::after {
    content: "↧"; /* Custom marker */
    /* position: absolute; */
    padding-left: 0.5rem;
    
  }
  
  details[open] summary::after {
    content: "↥"; /* Change the marker when opened */
  }
  
#jb-chapters{
    display: none;
}
#jb-menu{
    display: none;
}
/* Animation-classes */
.animate-element {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.animate-element.in-view {
    opacity: 1;
    transform: translateX(0);
}

/* Desktop specific */
.show-desktop{
    display: none!important;
}
.show-mobile{
    display: block;
}

@media all and (min-width: 1050px){

    #jb-menu{
        display: block;
        position: fixed;
        margin-top: 4rem;
        left: 1.3rem;
        border-radius: 3rem;
        transition: all 0.3s;
        width: 16%;
    }
    #jb-menu-title{
        background-color: #C4B9F4;
        box-shadow: 0 0 1.25rem 1.25rem #C4B9F4;
        border-radius: 2rem;
        display: inline-block;
        margin-bottom: 1rem;
    }
    #jb-menu-title:hover{
        cursor: pointer;
    }
    #jb-chapters{
        display: none;
        opacity: 0;
        transition: all 0.3s;
        line-height: 2.2rem;
    }
    #jb-chapters a{
        z-index: 0;
    }
    .no-margin-menu{
        margin-block: 0;
    }    
    #jb-menu:hover #jb-chapters{
        display: block;
        opacity: 1;
    }

    .jb-start-title{
        font-size: 100px;
    }

    .wp-block-details{
        border-radius: 2rem;
        margin: 0 0;
    }

    .small-einzug{
        margin-left: 1rem;
    }

    .no-mobile-margin-start{
        margin-block-start: 1.5rem;
    }
    
    .no-mobile-margin-end{
        margin-block-end: 1.5rem;
    }
    .show-desktop{
        display: flex!important;
    }
    .show-mobile{
        display: none!important;
    }
}

/* End Jahresbericht Styles */

/* Header*/

.logo a {
    font-size: var(--font-size-mobile);
    line-height: 1.3rem;
    margin: 0.75rem 0 0 0.75rem;
    display: block;
}
.item {
    padding: 0.2rem 0.7rem 0.2rem 0.7rem;
    margin: 0;
}

/* New addition for header */

.header-button{
    background: #3c0dff;
    border-radius: 2rem;
    margin-left: 0.2rem;
    margin-right: 0.2rem;
    transition: 0.2s all;
}
.header-button.item:hover{
    box-shadow: 0 0 0.2rem 0.2rem #3c0dff; 
}
.header-button a{
    color: white;
}

/* Anpassungen WPML */
.languages{
    display: none;
}

@media all and (min-width: 1050px) {

.languages{
    display: block;
    text-align: right;
    padding: 0;
    margin-right: 2.5rem;
    margin-top: -2.5rem;
    font-size: 18px;
}

}
.wpml-ls-item{
    display:inline-flex;
    padding: 0 0.1rem 0 0.1rem;
}
.wpml-ls-current-language{
    font-family: 'FavoritLining';
}
.wpml-ls-item:hover{
    font-family: 'FavoritLining';
    cursor:pointer;
}

/* End Anpassungen WPML */

/* End new addition for header */

.item.jetzt-spenden {
    padding: 0;
    line-height: 1.3rem;
    margin: 2rem 1rem 0 1rem;
    text-align: center;
    justify-content: center;
    display: none;
}
.spendenpfeil{
    position: relative;
    display: inline-flex;
}

@keyframes spendenpfeil-anim {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(270deg);
    }
}
.item.jetzt-spenden:hover .spendenpfeil{
    animation: spendenpfeil-anim 0.5s forwards;
}
.item.jetzt-spenden:hover {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    box-shadow: none;
}
.item.logo a:hover {
    font-family: 'FavoritPro';
    background: transparent;
    box-shadow: none;
}
.mobilelogo {
    width: 2rem;
    overflow: visible;
    object-fit: cover;
}
.mobilelogo-main{
    display: block;
    width: 3rem;
    margin-left: 0.25rem;
    margin-top: 0.25rem;
    overflow: visible;
    object-fit: cover;
}
.mobilelogo-main.active{
    display: block;
}
.font-logo{
    display: flex;
    align-items: center;
    margin-left: 0.5rem;
}
.font-logo img{
    height: 4.5rem;
    display: block;
    transform: translate(-3.75rem, -0.3rem);
}
.mobiletitle{
    display: flex;
    align-items: center;
    max-width: 12rem;
    font-family: 'FavoritPro';
    font-size: var(--font-size-mobile);
    text-align: center;
    margin: 0.1rem auto 0.1rem auto;
    color: #3c0dff;
    line-height: 1.5rem;
}

.logodesktop{
    display: none;
}
.logo-desktop-main{
    display: none;
}
.logo-desktop-main{
    
    height: 100%;
    margin:0;
}
.logodesktop-main.disappear{
    display: none;
}

/* Mobiles Menü, 4 Gänge */
.menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: top;
    margin: 0;
    padding: 0;
    /* background-color: white; */
}
.menu-wp {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: top;
    margin: 0;
    margin-right: 2rem;
    padding: 0;
    /* background-color: white; */
}
.menu.active{
    background-color: white;
    box-shadow: 0 0 1rem 2rem white;
}
.menu-page{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: start;
    margin: 0;
    padding: 0.2rem 0 0 0;
    background-color: white;
    box-shadow: 0 0 1rem 2rem white;
}
.toggle {
    order: 1;
    margin: 0.5rem 1.5rem auto 3rem;
}
.item {
    width: 100%;
    text-align: center;
    order: 2;
    /* background: rgb(216, 210, 255); */
    display: none;
}
.item.active {
    display: none;
}

.toggle {
    cursor: pointer;
}

.mobile-menu {
    height: 100%;
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: 12rem;
    padding: 0;
    margin: 15vh auto 25vh auto;
    border-radius: 3rem;
    background-color: white;
    box-shadow: 0 0 3rem 3.5rem white;
    opacity: 0%;
    transition: 0.5s;
}
.mobile-item {
    width: 100%;
    text-align: center;
    margin: 0.75rem 0 0.75rem 0;
}
.mobile-menu.active {
    display: flex;
    opacity: 100%;
}
.dropdown-menu {
    display: none;
}
.sub-menu {
    display: none;
}


/* Hamburger auf dem Menü */
.bars {
    background: #3c0dff;
    display: inline-block;
    position: relative;
    transform: translateY(0.5rem);
    height: 2.5px;
    width: 25px;
}
.bars::before,
.bars::after {
    background: #3c0dff;
    content: "";
    display: inline-block;
    position: absolute;
    height: 2.5px;
    width: 25px;
}
.bars::before {
    top: 7.5px;
}
.bars::after {
    top: -7.5px;
}

/* Landing Page */
.gradient {
        position: absolute;
        height: 100%;
        width: 100%;
        background-image: var(--gradient_landing);
        background-size: 1000% 1000%;
        animation: bg-animation 60s infinite alternate;
        box-shadow: 0 -1rem 1rem 0 white inset;
    }
@keyframes bg-animation {
        0% {
            background-position: top;
        }
        100% {
            background-position: bottom;
        }
    }
.wrapper {
    display: flex;
    flex-direction: column;
    height: 100svh;
}
main {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        z-index: 0;
    }
.smetterling{
        max-width: 14rem;
        object-fit: cover;
        margin: 0 auto 2rem auto;
        }
.cookie_note{
        color: #3c0dff;
        display: flex;
        flex-direction: column;
        font-size: var(--font-size-mobile);
        position: relative;
        max-width: 80%;
        align-items: center;
        margin: 0 auto -21rem auto;
        padding: 0.5rem 1rem 0.5rem 1rem;
        background-color: white;
        border: #3c0dff solid 2.5px;
        border-radius: 2rem;
        z-index: 99;
    }
.cookie_note a{
        font-family: 'FavoritLining';
    }
.cookie_button{
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    margin: 1rem 0 0rem 0;
    min-width: 4rem;
    text-align: center;
    border-radius: 50em;
    box-shadow: inset 0 0 0px 2.5px #3c0dff;
}
.arrow-index{
        font-size: var(--font-size-mobile);
        color:#3c0dff;
        position: relative;
        line-height: 2rem;
        /* top: 80%; */
        max-width: 20rem;
        justify-content: center;
        align-items: end;
        padding-bottom: 2rem;
        margin: 0 auto 0 auto;
        text-align: center;
        opacity: 100%;
        transition: 0.3s opacity;
    }
.arrow-index.disappear{
        opacity: 0%;
    }
.arrow{
        position: relative;
        animation: arrow-animation 0.5s infinite alternate;
    }
@keyframes arrow-animation {
        0%{
            top: 0.2rem;
        }
        100%{
            top: 1.2rem;
        }
    }

/* Main Page */
.spacer{
    position: sticky;
    height: 8rem;
}
.page-content{
    width: 100%;
    margin: 0;
    
}
.page-part-main{
    display: flex;
    color: #3c0dff;
    margin: 0 0 4rem 0;
}
.content{
    width: 100%;
     margin: 0 0.75rem;
     padding: 0rem;
    
}
.titlebox{
    color: white;
    display: inline-flex;
    align-items: center;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    margin: 0rem 0 0.5rem 0;
    border: 1.5rem;
    background-color: #3c0dff;
    border-radius: 50em;
    box-shadow: inset 0 0 0px 2.5px #3c0dff;
    transition: 0.5s all;
}
.titlebox2{
    display: inline-flex;
    color: blue;
    font-family: 'FavoritLining';
    text-shadow: #3c0dff 0 0 0px;
    margin: 0rem 0 0rem 0;
    transition: 0.2s all;
}
.titlebox2:hover{
    color: white;
    text-shadow: #3c0dff 0 0 5px;
}
.titlebox3{
    color: blue;
    display: inline-flex;
    align-items: center;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    margin: 0rem 0 0.5rem 0;
    border: 1.5rem;
    border-radius: 50em;
    box-shadow: inset 0 0 0px 2.5px #3c0dff;
    transition: 0.5s all;
}
#player{

}
.wp-block-heading{
    font-size: var(--font-size-mobile);
    color: blue;
    display: inline-flex;
    align-items: center;
    padding-left: 1rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin: 0rem 0 0.5rem 0;
    border: 1.5rem;
    border-radius: 50em;
    box-shadow: inset 0 0 0px 2.5px #3c0dff;
    transition: 0.5s all;
    line-height: 1.5rem;
    margin-block-start: 0;
    margin-block-end: 1rem;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight:100;
}

/* Anpassungen Ende 2024 */

.block-image{
    margin-bottom:0.5rem;
 
}

.block-image img{
    transition: all 0.2s;
}

.block-image img:hover{
    box-shadow: 0 0 0.2rem 0.2rem #3c0dff80;
    cursor: pointer;
}

/* Anpassungen Ende 2024 */

.main-news{
    line-height: 1.75rem;
    display:none;
}
.main-news h1{
    font-size: var(--font-size-mobile);
    border: 0.25rem;
    border-radius: 1rem;
}

/* Grid Layout */

.footerpages{
    margin: 1rem 1rem 0rem 1rem;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.footerimg{
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin-bottom: 0.5rem;
    border-radius: 1rem;
}
.grid2images{
    margin-top: 1rem;
    margin-bottom: 3rem;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.right_date{
    text-align: right;
}
.card_img1{
    width: 100%;
    aspect-ratio: 5 / 3;
    object-fit: cover;
    margin-bottom: 0.5rem;
    border-radius: 1rem;
}
.wp-block-image img{
    width: 100%;
    object-fit: cover;
    border-radius: 1rem;
}
.card_title{
    display: flex;
    justify-content: space-between;
}
.card_img{
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    margin-bottom: 0.5rem;
    border-radius: 1rem;
    box-shadow: 0 0 0 0 white;
    transition: 0.5s box-shadow;
}
.card_bottom{
    display: inline-block;   
}
.card_img2{
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin-bottom: 0.5rem;
    border-radius: 1rem;
    box-shadow: 0 0 0 0 white;
    transition: 0.5s box-shadow;
}
.card:hover{
    cursor: pointer;
}

/* Animating Arrow */
.arrowpointer{
 position: relative;
 padding-left: 1rem;
 transition: 0.5s color;
}
.arrowbox{
    display: inline-flex;
    align-items: center;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    margin: 0rem 0rem;
    border: 1.5rem;
    background-color: white;
    border-radius: 50em;
    box-shadow: inset 0 0 0px 2.5px #3c0dff;
    transition: 0.5s all;
}
.arrowbox.spende{
    margin: 0.25rem 0rem;
}
.arrowbox.block{
    display: flex;
    color: rgba(34, 0, 255, 0.4) ;
    margin: 0.5rem 0rem;
}

.arrowbox:hover{
    background-color: #3c0dff;
    color: white;
}
.arrowbox:hover .arrowpointer{
 animation: arrowpointer-animation 0.5s infinite alternate;
 color: white;
}
.card:hover .arrowpointer{
    position: relative;
 animation: arrowpointer-animation 0.5s infinite alternate;
}
@keyframes arrowpointer-animation{
    0%{
        left: 0rem;
    }
    100%{
        left: 2rem;
    }  
}


/* Footer */
.footer_blocks{
    margin: 0;
    margin-top: 5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-bottom: 0rem;
    line-height: 1.2rem;
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    box-shadow: 0 1rem 1.5rem 3rem #3c0dff;
    background-color: #3c0dff;
}
.foot-title{
    margin-left: 1rem;
}
.footer_block{
    font-size: 16px;
    color: white;
    margin-bottom: 0rem;
}
#footer_logo img{

transform: scale(0.8);

      
}
.impressum{
    margin:  2rem 0rem 2rem 1rem;
    padding-left: 0rem;
    background-color: #3c0dff;
    box-shadow: 0 1rem 1.5rem 3rem #3c0dff;
}
.impressum a{
    font-size: 16px;
    color: white;
}
.linked-in{
    width: 5rem;
   object-fit: cover;
}
.face-book{
    width: 4.5rem;
   object-fit: cover;
}
.instagram{
    width: 4.6rem;
    object-fit: cover;
}
.social-links{
    margin:  2rem 0rem 2rem 0.75rem;
    
    gap: 2rem;
    color: white;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    background-color: #3c0dff;
    box-shadow: 0 1rem 1.5rem 3rem #3c0dff;
    font-size: 16px;
}
.social-links a{
    color: white;
}
.gif_schm{
display: none;
}
.gif_schm2{
    display: none;
}
.gif_schm120{
    display: none;
}
.gif_schm240{
    display: none;
}
.gif_schm220{
    display: none;
}
.gif_schm260{
    display: none;
}
.gif_schm250{
    display: none;
}
.gif_schm190{
    display: none;
}
.gif_schm200{
    display: none;
}
/* Desktop Menü */
@media all and (min-width: 1050px) {
    body {
        font-size: var(--font-size-desktop);
    }
    h1{
        font-size: var(--font-size-desktop);
        margin: 0;
    }
    .main-news h1{
        font-size: var(--font-size-desktop);
    }
    .mc4wp-form-basic input[type="submit"], .mc4wp-form-basic button, .mc4wp-form-basic input[type="button"]{
        font-size: var(--font-size-desktop);
    }
    .card{
        margin-bottom: 2rem;
    }
    .menu {
        justify-content: center;
    }
    .menu-wp {
        justify-content: center;
    }
    .mobilelogo-main{
        display: none;
    }
    .menu-page{
        padding:0;
    }
    .wp-block-heading{
        font-size: var(--font-size-desktop);
    }
    .logo {
        padding-top: 0.75rem;
        padding-left: 0.75rem;
        line-height: 1.5rem;
        flex: 1;
    }
    .logo a {
        font-size: var(--font-size-desktop);
        line-height: 1.4rem;
        padding-top: 0.05rem;
        padding-bottom: 0rem;
        margin-left: 0;
        margin-top: 0;
        margin-bottom: 0;
    }
    .logo-desktop-main{
        width: 14rem;
        display: block;
    }
    .logo-desktop-main img{
        position: relative;
        width: 14rem;
        max-width: 100%;
        object-fit: contain;
        margin: 0;
    }
    .mobilelogo{
        display: none;
    }
    .header.long {
        box-shadow: 0 5rem 15rem 16rem white;
        z-index: 999;
    }

    .butterfliegen{
        display: none;
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 20%;
        background-color: #3c0dff;
        z-index: 4;
    }

    .item {
        width: auto;
        order: 1;
        display: block;
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
        margin-top: 0.5rem;
    }
    .item:hover {
        /* background: white; */
        border-radius: 50em;
        box-shadow: inset 0 0 0px 2.5px #3c0dff;
    }
    .item.active{  
        display: block; 
        background: white;
        border-radius: 50em;
        box-shadow: inset 0 0 0px 2.5px #3c0dff;
    }

    .item.jetzt-spenden a {
        padding: 0.4rem 0.25rem 0.4rem 0;
        text-align: right;
    }
    .item.jetzt-spenden {
        line-height: 1.5rem;
        margin-left: 3rem;
        margin-top: 0.5rem;
        display: flex;
    }
    .toggle {
        display: none;
        margin-top: 0;
    }
    .menu {
        align-items: start;
    }
    .menu-wp {
        align-items: start;
    }
    .mobile-menu {
        display: none;
    }
    .mobiletitle{
        display: none;
    }
    .mobile-menu.active {
        display: none;
    }
    .dropdown-menu {
        display: none;
        justify-content: space-between;
        position: absolute;
        padding: 1rem;
        flex-wrap: wrap;
        transition: all 0.5s;
    }
    .sub-menu {
        display: none;
        flex-direction: column;
        justify-content: space-between;
        text-align: left;
        position: absolute;
        padding: 0;
        padding-top: 1.5rem;
        flex-wrap: wrap;
        transition: all 0.5s;
    }
    .dropdown-menu.active {
        display: flex;
        z-index: 999;
        opacity: 100%;
    }
    .sub-menu.active {
        display: flex;
        z-index: 999;
        opacity: 100%;
    }
    .dropdown-menu a {
        width: 100%;
        padding: 0.2rem 0;
        line-height: 1.75rem;
    }
    .sub-menu li a {
        width: 100%;
        padding: 0.2rem 0;
        line-height: 1.75rem;
    }
    .dropdown-menu a:hover {
        font-family: 'FavoritLining';
        line-height: 1.75rem;
    }
    .sub-menu a:hover {
        font-family: 'FavoritLining';
        line-height: 1.75rem;
    }
    .arrow-index{
        font-size: var(--font-size-desktop);
        position: relative;
        max-width: 24rem;
        align-items: end;
        margin: 0 auto 0 auto;
        text-align: center;
        margin-bottom: 1rem;
    }
    .smetterling{
        display: none;
    }
    .cookie_note{
        display: flex;
        flex-direction: row;
        font-size: var(--font-size-desktop);
        position: relative;
        max-width: 70%;
        align-items: center;
        margin: 0 auto 3rem auto;
        padding: 0.5rem 1rem 0.5rem 1rem;
        background-color: white;
        border: #3c0dff solid 2.5px;
        border-radius: 2rem;
        z-index: 99;
        transition: opacity 0.5s ease-out;
    }
    .cookie_note a{
        font-family: 'FavoritLining';
    }
    .cookie_note a:hover{
        color: white;
        text-shadow: #3c0dff 0 0 5px;
    }
    .cookie_button:hover{
        color: white;
        background-color: #3c0dff;
        cursor: pointer;
    }
    .page-part-main{
        grid: auto / 1fr;
        margin: 0 0 8rem 0;
    }
    .page-part-main.landing{
        margin: 1rem 0;
        padding-top: 0;
    }

    .main-news{
        display: block;
        grid-column: 1 / 2;
        align-self: start;
        position: sticky;
        top: var(--scroll-padding, 8rem);
        font-size: var(--font-size-desktop);
        width: 25%;
        margin-left: 1.3rem;
        padding-right: 3rem;  
    }
    .content{
        grid-column: 2 / 3;
        margin-right: 15%;
        margin-left: 0rem;
    }
    .grid2images{
        grid-template-columns: 1fr 1fr;
    }

    .schmetterlinge-front{
        height: 68%;
        margin: 6rem 1rem 5rem 1rem;
        display: grid;
        grid-row-gap: 5rem;
        grid-column-gap: 5rem;
        display: grid;
        grid-template-rows: repeat(3, 24%); /* Change row height as needed */
        grid-template-columns: repeat(6, 1fr); /* Change column width as needed */
    }
    .gif_schm{
        display: block;
        object-fit: cover;
    }
    .img_schm{
        transition: transform 0.3s ease;
    }
    .gif_schm:hover .img_schm{
        transform: rotate(90deg);
    }
    .gif_schm120:hover .img_schm{
        transform: rotate(20deg);
    }
    .gif_schm200:hover .img_schm{
        transform: rotate(-10deg);
    }
    .gif_schm220:hover .img_schm{
        transform: rotate(-20deg);
    }
    .gif_schm260:hover .img_schm{
        transform: rotate(20deg);
    }
    .gif_schm250:hover .img_schm{
        transform: rotate(-20deg);
    }
    .gif_schm2:hover .img_schm{
        transform: rotate(-20deg);
    }
    .gif_schm240:hover .img_schm{
        transform: rotate(10deg);
    }
    .gif_schm240:hover .img_schm{
        transform: rotate(10deg);
    }
    .gif_schm190:hover .img_schm{
        transform: rotate(10deg);
    }
    .gif_schm210:hover .img_schm{
        transform: rotate(-10deg);
    }
    .gif_schm2{
        display: block;
        object-fit: cover;
        grid-column: span 2;
        grid-row: span 2;
        transform: translate(-12rem,-7rem)rotate(45deg)scale(0.7);
    }
    .gif_schm120{
        display: block;
        transform: translate(-1rem,0rem)rotate(-30deg)scale(0.9);
    }
    .gif_schm240{
        display: block;
        transform: translate(-3rem,-1rem)rotate(30deg)scale(0.6);
    }
    .gif_schm190{
        display: block;
        transform: translate(-5rem,0%)rotate(-20deg)scale(1.2);
    }
    .gif_schm220{
        display: block;
        transform: translate(-2rem,-2.5rem)rotate(-20deg)scale(0.7);
    }
    .gif_schm250{
        display: block;
        transform: translate(2rem,1.5rem)rotate(-10deg)scale(0.8);
    }
    .gif_schm260{
        display: block;
        transform: translate(-9rem,-2.5rem)rotate(15deg)scale(1.1);
    }
    .gif_schm200{
        display: block;
        transform: translate(-2rem,2.5rem)rotate(5deg)scale(0.8);
    }
    .gif_schm210{
        display: block;
        transform: translate(3rem,0.5rem)rotate(10deg)scale(0.9);
    }
    #diagonal_schm.img_schm{
        transform: rotate(45deg);
    }
    .gif_schm3{
        grid-column: span 3;
        grid-row: span 3;
        background-color: #3c0dff;
    }

    /* Footer Adjustements */
    .social-links{
        margin: 2rem 10rem 0rem 14.5rem;
        padding-bottom: 2rem;
    }

    .footer_blocks{
        line-height: 1.2rem;
        padding-left: 14.5rem;
        padding-right: 10rem;
    }
    .impressum a{
        margin-left: 11.5rem;
        margin-right: 10rem;
    }
    .impressum{
        padding-left: 2rem;
    }

}

/* Start Accordion Menu Styles */
/* ── Accordion Mobile Menu ────────────────────────── */
.accordion-mobile-menu {
    display: none;
    position: fixed;
    top: 120px; left: 2rem; right: 2rem;
    background: #fffffff2;
    box-shadow: 0 0 1rem 1rem #fffffff2;
    border-radius: 2rem;
    z-index: 800;
    overflow: hidden;

    height: auto;
    max-height: calc(100dvh - 140px); /* dvh berücksichtigt mobile Browser-UI */
}

.accordion-mobile-menu.is-open {
    display: flex;
    flex-direction: column;
}

/* Scrollbarer innerer Bereich – OHNE sichtbare Scrollbar */
.acc-menu-list {
    list-style: none;
    margin: 0;
    padding: 0 0 1rem 0;
    overflow-y: scroll;                /* scroll erzwingt Scrollbarkeit */
    -webkit-overflow-scrolling: touch; /* iOS smooth scroll */
    flex: 1;
    min-height: 0;                     /* kritisch: erlaubt Flex-Item zu schrumpfen */

    scrollbar-width: none;
    -ms-overflow-style: none;
}
.acc-menu-list::-webkit-scrollbar {
    display: none;
}

.acc-item {
    padding: 0.75rem 2rem 0.75rem 2rem;
}

/* Hauptkategorie mit Kindern */
.acc-trigger {
    all: unset;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
    font-size: 28px;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.2s;
    color: #3c0dff;
}

.acc-item.has-children {
    background: #fff;
    box-shadow: 0 0 0.5rem 0.5rem #3c0dff40;
    border-radius: 2rem;
    margin: 1.5rem 2rem 1.5rem 2rem;
    overflow: hidden;
}

.acc-arrow {
    font-size: 28px;
    transition: transform 0.3s ease;
    display: inline-block;
}

.acc-item.is-open > .acc-trigger {
    font-family: 'FavoritLining';
}

.acc-item.is-open > .acc-trigger .acc-arrow {
    transform: rotate(180deg);
    font-family: 'FavoritPro';
}

/* Untermenü */
.acc-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, margin-top 0.35s ease;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.acc-item.is-open > .acc-submenu {
    max-height: 500px;
    margin-top: 1rem;
}

.acc-item.has-children:not(.is-open) {
    height: fit-content;
}

.acc-submenu li a {
    display: block;
    padding: 0 0.5rem;
    font-size: 20px;
    text-decoration: none;
    text-align: center;
    transition: color 0.2s, background 0.2s;
    line-height: 1.4rem;
}

.acc-submenu li a:hover {
    font-family: 'FavoritLining';
}

/* Einfacher Link (keine Kinder) */
.acc-link {
    display: block;
    text-align: center;
    padding: 0.75rem 2rem 0.75rem 2rem;
    font-size: 28px;
    color: #fff;
    background: #3c0dff;
    text-decoration: none;
    transition: background 0.2s;
    box-shadow: 0 0 0.5rem 0.5rem #3c0dff40;
    border-radius: 2rem;
    margin: 0 15%;
}

.acc-single-item {
    color: #fff;
    background: #3c0dff;
}

.acc-lang-wrapper {
    padding: 0;
}

.acc-lang-row {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.acc-lang-link {
    display: inline-block;
    padding: 0.75rem 2rem;
    font-size: 20px;
    text-decoration: none;
}

.acc-highlight {
    padding-top: 0;
}

.acc-highlight .acc-link {
    background: #fff;
    color: #3c0dff;
    margin: 0;
}

/* Hamburger Transition */
.bars {
    transition: background 0.3s ease;
}
.bars::before,
.bars::after {
    transition: transform 0.3s ease, top 0.3s ease;
}

/* Kreuz wenn Menü offen */
.toggle.is-open .bars {
    background: transparent;
}

.toggle.is-open .bars::before {
    top: 0;
    transform: rotate(45deg);
}

.toggle.is-open .bars::after {
    top: 0;
    transform: rotate(-45deg);
}

/* End Accordion Menu Styles */