:root{
	--vf-color-link-default: #003065;
	--teaser-background-color: rgba(5, 5, 20, .7);
	--teaser-background-blur: blur(10px);
}

input, select, textarea{
        font-family: "Roboto", sans-serif!important;
        font-weight: 300!important;
}

h1,h2,h3,h4,h5,h6{
    text-wrap: balance;
    hyphens: auto;

}

#container{
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.layout-magazine #container{
    max-width: 64rem;
}

#header .main-meta-nav-content{
    padding: .3rem 0;
}

#header .main-meta-nav-content ul.level_1>li.submenu::after{
    filter: invert(1);
}

@media (min-width: 1036px){
.p-heading--4, h4{
    font-size:1.25rem;
    padding-top: .75rem;
}
}

a:visited{
    color: var(--vf-color-link-default);
}

#wrapper{
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;

}

.p-button--brand{
    background-color: rgb(0, 48, 101);
    border-color: rgb(0, 48, 101);
;
}

footer{
	background-color: #1d1d1d;
	color:#FAFAFA;
	padding: 2rem 2rem 2.5rem 2rem;
	text-align: center;
}

footer a:link,
footer a:visited{
    color:#FAFAFA;
    text-wrap-mode: nowrap;
}

footer .inside{
    width: 90%;
    max-width: 1024px;
    margin: 0 auto !important;
}

.flickity-carousel{
    opacity: 0;
    transition: opacity 1.5s ease;
}

.flickity-carousel .carousel-cell img{
        filter: grayscale(.7) brightness(.5);
    transition: filter 1.75s ease;
}

.flickity-carousel.flickity-enabled{
    opacity: 1;
    transition: opacity 1.5s ease;    
}

.flickity-carousel .carousel-cell {
    width: 90%;
    height: 100%;
}

.flickity-cell>*>figure img{
    filter: 
        grayscale(100%)
        brightness(.5);
    transition: 
        filter 2s ease,
        transform 1.75s ease;
}


.flickity-cell.is-selected:hover>*>figure img {
    transform: scale(1.1);
    filter:
        grayscale(0%)
        brightness(.9);
    transition: 
        filter 2s ease, 
        transform 1.75s ease;
}

.flickity-cell.is-selected>*>figure img{
  filter: 
    grayscale(0%)
    brightness(1);
  transform: scale(1.0);
  transition: 
    filter 2s ease,
    transform 1.75s ease;
}

.hero-carousel-teaser{
    display: grid;
    grid-template-rows: 34% 66%;
    grid-template-columns: 1fr;
    align-items: center;
    justify-content: center;
}

.hero-carousel-teaser>figure,
.hero-carousel-teaser>div{
    margin:0;
    padding:0;
    overflow: hidden;
}

.hero-carousel-teaser>figure {
    z-index: -1;
    height: 100% !important;
}

.hero-carousel-teaser>figure img {
    z-index: -1;
    transform: scale(1.0);
    filter:
        grayscale(0%)
        brightness(1);
    height: 100% !important;
    transition: 
        filter 2s ease, 
        transform 1.75s ease;
}



.flickity-carousel .carousel-cell{
    min-height: 80vh;
}

.flickity-carousel .carousel-cell * {
    height: revert;
    height: min-content;
}

.flickity-carousel .carousel-cell>* {
    height: 100%;
}

#top_hero{
    margin-top:1rem;
}

.hero-carousel-teaser>div{
    display: flex;
    justify-content: flex-end;
    height: 100%!important;
}


.hero-carousel-teaser>div>div{
    margin-top: auto;
    width:100%;
    height: 100%!important;
    padding:2rem;
    /* background-color: rgba(0,0,0,.7);*/
    background: #003065;
    background-blend-mode: multiply;
    backdrop-filter: var(--teaser-background-blur);
    color:#FAFAFA;
}



.layout----right-sticky #right .inside {
    position: sticky;
    top: 9rem;
    transition: top 200ms;
}

.scrolled.layout----right-sticky #right .inside{
    top: 6rem;
    transition: top 200ms;
}

@media screen and (width < 768){
    
    .hero-carousel-teaser>div>div{
        var(--teaser-background-color);
    }
    
    .hero-carousel-teaser h1,
    .hero-carousel-teaser h2,
    .hero-carousel-teaser h3,
    .hero-carousel-teaser h4,
    .hero-carousel-teaser h5,
    .hero-carousel-teaser h6{
        padding-top: 0!important;
    }
}

@media screen and (width > 768px){
.flickity-carousel .carousel-cell{
    min-height: 450px;
}    
    
    
    .hero-carousel-teaser>div>div{
        width: 33%; 
        min-width: 24rem;
        background: var(--teaser-background-color);
        background-blend-mode: multiply;
        backdrop-filter: var(--teaser-background-blur);
    }
    
    .hero-carousel-teaser{
        grid-template-rows: 100%;
    }
    
    .hero-carousel-teaser>figure,
    .hero-carousel-teaser>div{
        grid-column: 1;
        grid-row: 1;
    }
}

.mod_newslist h1,
.mod_newslist h2,
.mod_newslist h3{
    margin-bottom: 1.5rem;
    max-width: 100%;
}

.mod_newsreader{
    padding:1rem;
}

.p-card figure{
    margin: 0;
}

.layout---main-aside #container{
    padding: 0 1.5rem!important;
}

@media (min-width: 1036px){
    
    #main{
        grid-column: span 12;;
    }
    
    .layout---main-aside #main{
        grid-column: span 9;        
    }
    
    .layout---main-aside #right{
        grid-column: span 3;
    }
    
    .layout-magazine.layout---main-aside #main{
        grid-column: span 8;        
    }
    
    .layout-magazine.layout---main-aside #right{
        grid-column: span 4;
    }    

.mod_newsreader{
    padding: 1rem 0;
}

    
}

.overflow-hidden{
    overflow: hidden;
    width: 100%;
    max-width: 100vw;
}

/* HERO NEWS */

.hero-news{
    margin-top:1rem;
    display: grid;
    grid-template-columns: 1fr;
    gap:1rem;
    
}

.hero-news a{
    text-decoration: none;
    color: inherit;
}

.hero-news h2{
    font-size: 1.25rem;
    line-height: 1.25;
    margin-bottom: .5rem;
    font-weight: 700;
    text-wrap: balance;
    hyphens: auto;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.hero-news p{
    font-size: 1.125rem;
    line-height: 1.5;
    text-wrap: balance;
    hyphens: auto;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}



.layout_latest_hero{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.layout_latest_hero .image_container,
.layout_latest_hero .text_container{
    display: grid;
    grid-column: 1;
    grid-row: 1;
}

.layout_latest_hero .image_container{
    margin:0;
    padding:0;
    background-color: transparent;
    background-size: cover;
    background-position: center center;
    overflow: hidden;
}

.layout_latest_hero .image_container img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    border-radius: 0;
    z-index: -1;
    transition: all 0.3s ease-in-out;
    filter: brightness(1);
}

.layout_latest_hero .text_container{
    z-index: 995;;
}

.layout_latest_hero:hover .image_container img{
    filter:brightness(0.8);
    transform: scale(1.05);
    transition: all 0.3s ease-in-out;
}

.layout_latest_hero .text_container{
    background-color: var(--teaser-background-color);
    backdrop-filter: var(--teaser-background-blur);
    background-blend-mode: multiply;
    padding: 1.5rem;
    align-self: self-end;
    box-sizing: border-box;
}

.layout_latest_hero .text_container *{
    color: #FFF;;
}



@media screen and (min-width: 40rem){
    
    .hero-news{
        margin-top:2rem;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 2fr 1fr;
    grid-template-areas: 
     "hero-news-1 hero-news-1" 
     "hero-news-2 hero-news-3";        
        
        gap: 1.5rem;
        padding: 0 1.5rem;
    }
    
.hero-news > .layout_latest_hero:first-child{
    grid-area: hero-news-1;
}

.hero-news > .layout_latest_hero:first-child h2{
    font-weight: 900;;
    font-size: 2rem;
}



.hero-news > .layout_latest_hero:nth-child(2){
    grid-area: hero-news-2;
}
.hero-news > .layout_latest_hero:nth-child(3){
    grid-area: hero-news-3;
}

.hero-news > .layout_latest_hero:nth-child(2) .ce_text, 
.hero-news > .layout_latest_hero:nth-child(3) .ce_text{
    display: none;
}
    
    
    
}


@media screen and (min-width: 64rem){
    .hero-news{
        grid-template-columns: 2fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: 
         "hero-news-1 hero-news-2" 
         "hero-news-1 hero-news-3";        
    }    
    
    .layout_latest_hero .text_container{
        padding:2rem;    
    }
}
/* END HERO NEWS */


.mod_paywallreader{
    padding:1.5rem 0;
}



.ce_person_element{
    border-top: 1px solid #CCC;
    padding: 1rem 0;
    text-align: center;
}

.person-image{
    border-radius: 50%;
    overflow: hidden;
    aspect-ratio: 1/1;
    max-width: 12rem;
    margin: 0 auto 1rem auto;
}

.person-image figure{
    margin: 0;
    padding: 0;
}

.person-name{
    font-weight: 500;
    font-style: italic;
    margin-bottom: .5rem;
    display: none;
}

@media (width > 550px){
   .person-element{ 
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3rem;
    align-items: center;
    text-align: left;
    }
}

.layout_latest{
    margin-bottom: 2rem;
}

@media (width > 1036px){
    margin-bottom:0;
}

.layout_latest .p-card{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.p-button--brand:hover{
    border-color:rgba(0, 48, 101,.8);;
    background-color: rgba(0, 48, 101,.8);
}


#header address{
    display: none;
}

@media (width >= 1024px){
#header address{
    display: flex;
}

#header ul.level_2{
    padding:0;
}

#main-nav-content ul.level_2 li{
    border-left: .2rem solid rgb(0,48,101,0);
    transition: all 250ms ease;
}

#main-nav-content ul.level_2 li:hover{
    border-left: .2rem solid rgb(0,48,101,1);
    transition: all 250ms ease;
}

}

.paywall_cta{
    background-color: #EEE;
    padding:1.5rem;
    margin: 2rem auto;
}

.paywall_public_content.fade:first-child{
    webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
    mask-image: linear-gradient(180deg, #000 60%, transparent);
}

.event_teaser_list_horizontal .event.layout_teaser .info{
    display: block;
    padding:.2rem;
    border-top:1px solid #CCC;
    border-bottom: 1px solid #CCC;
    margin-bottom:.75rem;
}

.event_teaser_list_horizontal .event.layout_teaser .info>*{
    margin:0;
    padding:0;
    width: 100%;
}


@media (width > 650px){
    
    .event_teaser_list_horizontal .header{
        display: none;
    }
    
    .event_teaser_list_horizontal .event.layout_teaser{
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap:2rem;
    }
    
.event_teaser_list_horizontal .event.layout_teaser .content-image{
    grid-column: span 4;
}    

.event_teaser_list_horizontal .event.layout_teaser .content-text{
    grid-column: span 8;
}    

@media (width > 1024px){
    .event_teaser_list_horizontal .event.layout_teaser .info{
        display: flex;
        justify-content: space-between;
    }
    
    .event_teaser_list_horizontal .event.layout_teaser .content-image{
        grid-column: span 3;
    }    

    .event_teaser_list_horizontal .event.layout_teaser .content-text{
        grid-column: span 9;
    }
    
}

.u-mb-medium{
    margin-bottom:3rem;
}


}


.topic-symbol svg{
    width:2.5rem;
    height: 2.5rem;
    stroke: #d70a50;
    stroke-width:1.25;
}



/* Basis-Styling für das Handorgel-Akkordeon (kannst du an deine Vorstellungen anpassen) */
.accordion-toc-wrapper {
    background-color: #f0f0f0; /* Leicht grauer Hintergrund für den Akkordeon-Bereich */
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 20px;
    overflow: hidden; /* Wichtig, falls Inhalte über den Rand ragen */
}

.accordion-toc-summary {
    display: block; /* Stellt sicher, dass das gesamte Element klickbar ist */
    padding: 15px 20px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1em;
    background-color: #e9e9e9; /* Hintergrund für den Header */
    color: #333;
    position: relative; /* Für das Pfeil-Icon */
    list-style: none; /* Entfernt den nativen Dreieckspfeil bei manchen Browsern */
    user-select: none; /* Verhindert Textauswahl beim Klicken */
}

/* Pseudo-Element für den Klapp-Pfeil */
.accordion-toc-summary::after {
    content: '+'; /* Plus-Symbol für geschlossen */
    position: absolute;
    right: 20px;
    font-size: 1.2em;
    line-height: 1;
    transition: transform 0.2s ease-in-out;
}

.accordion-toc-wrapper[open] > .accordion-toc-summary::after {
    content: '-'; /* Minus-Symbol für geöffnet */
    transform: rotate(0deg); /* Normalerweise kein Rotate nötig, wenn nur Zeichenwechsel */
}

/* Styling für den Inhalt des Akkordeons */
.accordion-toc-content {
    padding: 15px 20px;
    padding-top: 5px; /* Etwas weniger Padding nach oben, damit es nicht zu viel Abstand zur Überschrift hat */
}

/* Styling für das Inhaltsverzeichnis selbst (innerhalb des Akkordeons) */
#table-of-contents-content ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

#table-of-contents-content ul ul {
    padding-left: 20px; /* Einrückung für Unterebenen */
}

#table-of-contents-content ul li {
    margin-bottom: 5px;
}

#table-of-contents-content a {
    text-decoration: none;
    color: #007bff; /* Oder eine Farbe, die zu deinem Theme passt, z.B. var(--color-brand-500) */
    font-weight: normal;
}

#table-of-contents-content a:hover {
    text-decoration: underline;
    color: #0056b3; /* Dunklere Farbe für Hover */
}

/* Spezifische Stile für die Ebenen (optional) */
.toc-item.toc-level-2 {
    font-weight: bold;
    margin-top: 10px;
}

.toc-item.toc-level-3 {
    margin-left: 10px;
}

.toc-item.toc-level-4 {
    margin-left: 20px;
    font-size: 0.95em;
}

.u-m-t-2{
    margin-top:2rem;
}

.mod_publication_issues{
    with:100%;
    padding: 0 1.5rem;
    max-width: 80rem;
    margin: 0 auto;
}

.mod_publication_issues .issues-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap:3rem;
    
}

.mod_publication_issues .issue-item {
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 600px;
  gap:2rem;
}

@keyframes initAnimation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(-30deg);
  }
}

.mod_publication_issues .issue-cover {
  width: 245px;
  height: 300px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-17deg);
  transition: 1s ease;
  animation: 1s ease 0s 1 initAnimation;
}

.mod_publication_issues .issue-item:hover .issue-cover, 
.mod_publication_issues .issue-item:focus .issue-cover {
  transform: rotateY(0deg);
}

.mod_publication_issues .issue-cover > :first-child {
  position: absolute;
  top: 0;
  left: 0;
    width: 230px;
    height: 300px;
    transform: translateZ(7.5px);
    background-color: #01060f;
    border-radius: 0 2px 2px 0;
    box-shadow: 5px 5px 15px #999;
}

.mod_publication_issues .issue-cover::before {
  position: absolute;
  content: ' ';
  background-color: blue;
    left: 40px;
    top: 1px;
    width: 12px;
  height: 298px;
  height: 298px;
  transform: translateX(153.5px) rotateY(90deg);
  background: linear-gradient(90deg, 
    #fff 0%,
    #f9f9f9 5%,
    #fff 10%,
    #f9f9f9 15%,
    #fff 20%,
    #f9f9f9 25%,
    #fff 30%,
    #f9f9f9 35%,
    #fff 40%,
    #f9f9f9 45%,
    #fff 50%,
    #f9f9f9 55%,
    #fff 60%,
    #f9f9f9 65%,
    #fff 70%,
    #f9f9f9 75%,
    #fff 80%,
    #f9f9f9 85%,
    #fff 90%,
    #f9f9f9 95%,
    #fff 100%
    );
}

.mod_publication_issues .issue-cover::after
 {
    position: absolute;
    top: 0;
    left: 0;
    content: ' ';
    width: 180px;
    height: 300px;
    transform: translateZ(-7.5px);
    background-color: #01060f;
    border-radius: 0 2px 2px 0;
    box-shadow: -10px 0 50px 10px #666;
}