/* https://preview.linon.de/idastyles/anne-frank-zentrum/afz.css */


swiper-container::part(button-prev), swiper-container::part(button-next) {
    --slider-navigation-size: 20px;
    --swiper-navigation-sides-offset: 0;
    --swiper-navigation-top-offset: 56%;
    --slider-navigation-color: #Fff;
}
html {
    --tablet-bg: #f2f0ed;
    --tablet-boxes-min-height: 14vh;
    --blackwhite: #3d3d96;
    --whiteblack: #FFF;
}
 body {
     --list-item-background: transparent !important;
 }
.base-tablet {
    --blue: #3d3d96;
    --tablet-bg: #f2f0ed;
    --module-color: #3c3c96;
    --tablet-nav-width: 16vw;
    --module-text-color: #ffffff;
    --tablet-sidebar-width: 320px;
    --tablet-gap: 3px;
    --tablet-padding: 24px;
    --tablet-radius: 8px;
    --tablet-font-family: var(--font-family-sans);
    --tablet-nav-hex-size: 55px;
    --tablet-nav-inactive-opacity: 1;
    --player-bg: #fff;
    --page-link-current: #cecece;
    --page-link-current-color: #000000;
    --page-link-color: #000;
    --slider-bg: #d3cfc9;
    --slider-navigation-color: var(--font-color)
    font-family: var(--tablet-font-family);
    background-color: var(--tablet-bg);
    min-height: 100vh;
}

.dark .base-tablet {
    --tablet-bg: #222;
    --page-link-current: #000000;
    --page-link-color: #ffffff;
    --page-link-current-color: #FFF;
    --item-color: #ccc !important;
    --slider-bg: #414141;
    --module-color: #FFF !important;
    --blackwhite: #FFF;
    --whiteblack: #134a90;
}
.dark .tablet-module-nav * {
    --item-text-color: #000!important;
    --module-text-color: #000 !important;
    --item-color: #ebebeb !important;
}

.dark .tablet-list--boxes * {
    --item-text-color: #FFF!important;
    --item-color: #000000!important;
    --module-text-color: #000 !important;
}
.dark .base-tablet .tablet-page-header * {
    color:#FFF
}
.dark :is(h1, h2) {
    color: #FFF !important;
}
.dark .tablet-module-nav .hex-badge svg path {
    fill: var(--item-color, var(--module-color));
}

.base-tablet .MainMenu-SlideRoot,
.base-tablet .MainMenu-menu {
    background-color: var(--tablet-bg);
    min-height: 100vh;
}

.base-tablet {
    background: var(--tablet-bg);
}

.player-controls {
    height: 70px;
}

.tablet-list--boxes li:nth-child(1),
.tablet-list--boxes li:last-child{
     grid-column: 1 / -1;

    & .tablet-list-item-link {
        padding: 15px 35px;
        min-height: unset;
        max-width: fit-content;
    }
    & .tablet-list-item-title1 {
        font-size: 1.1rem;
    }
}



.tablet-list--boxes  > li:nth-child(5),
.tablet-list--boxes  > li:nth-child(7){
    grid-column: 1;
}

.base-tablet .tablet-list--boxes {
    grid-template-columns: repeat(var(--tablet-boxes-columns, 3), minmax(0, 1fr))
}

.base-tablet .tablet-list--boxes .tablet-list-item-link {
    overflow: clip;
    padding: 20px 20px 20px 45px;
    box-shadow: 0 0 10px hsl(0deg 0% 0% / 13%);
}

.base-tablet .tablet-list-item-ribbon {
    width: 45px;
    height: 65px;
    align-items: center;
    left: -10px;
    top: -8px;
    padding-top: 0;
    padding-left: 8px;
    padding-bottom: 4px;
    font-size: 1.35rem;
    clip-path: polygon(
    10% 0%,   /* Oben Links: Rückt leicht nach innen */
    100% 5%, /* Oben Rechts: Rückt tiefer nach innen */
    100% 70%, /* Unten Rechts: Rückt spiegelbildlich hoch */
    10% 100%  /* Unten Links: Rückt leicht nach innen */
  );
    }

.tablet-module-nav {
    margin-top: 18px;
}
.textsize-xl .tablet-module-nav {
    margin-top: .5em
}

.tablet-module-nav .tablet-nav-item.selected .hex-badge {
    transform: scale(1.3);
}

li.tablet-nav-item.selected:is(:first-child, :last-child) .hex-badge-label{
    color: var(--blue) !important;
    text-decoration: underline;
    text-underline-offset: 8px;
}
.dark li.tablet-nav-item.selected:is(:first-child, :last-child) .hex-badge-label {
    color: #FFF !important;

}
li.tablet-nav-item:is(:first-child, :last-child) .hex-badge-label {
    border: 0px solid #000;

}

li.tablet-nav-item.selected:not(:first-child):not(:last-child) {
    filter:
    drop-shadow( 3px  0px 0 #FFF)  /* Rechts */
    drop-shadow(-3px  0px 0 #FFF)  /* Links */
    drop-shadow( 0px  3px 0 #FFF)  /* Unten */
    drop-shadow( 0px -3px 0 #FFF); /* Oben */


}
.tablet-module-nav .selected .hex-badge svg path {
        /* fill: var(--blue) !important; */
    }
.dark .tablet-module-nav .selected .hex-badge-label {
    color:#FFF;
}
nav#tablet-module-nav ul.tablet-nav-list li:first-child a ,
nav#tablet-module-nav ul.tablet-nav-list li:last-child a {
    & .hex-badge {width: fit-content;height: 20px;}
    & svg {opacity:0;height: 18px;width: 5em;}
    & .hex-badge-label {
        color: var(--item-color);
        font-size: 1.35em;
        text-overflow: initial;
        line-height: 2;
    }
    margin-block: 1em
}

.base-tablet  .tablet-list-item-link:not(.tablet-list--boxes *):not(#tablet-page-root *)   {
    background: #fff;
    color: #000000;
    border: 2px solid #9393939e;
    min-height:unset !important;
    padding: 8px 15px;
    gap: 20px;

    & * {font-size: 1rem !important; min-height:unset !important;}
}

#tablet-page-root .tablet-list-item-link {
    width: fit-content;
    background: #fff;
    color: var(--blue);
    border: 2px solid var(--blue);
}

main.tablet-content:not(:has(.tablet-list--boxes)) {
  margin-top: 88px;
  position: relative;
  z-index: 9999;
}

/* ################### Hide Children */
[data-id-root*="modul-"] ul.tablet-list.tablet-list--tiles:not(.teaser-list *) {
    display: none;
}

/* ################### Teaserlist on top ausser root */

.teaser-list:not(#tablet-page-root *) ul.tablet-list.tablet-list--tiles   {
    position: fixed;
    top: 10px;
    display: flex;
    width: 100%;
    background: var(--tablet-bg);
    padding-top: 10px;
    padding-bottom: 1.5em;
    border-top: 70px solid var(--tablet-bg);
    gap: 20px;
    z-index: 65520;
}


/* ################### Bei grosser Schrift Teaserlist scrollbar machen */

.teaser-list ul.tablet-list.tablet-list--tiles {
      max-width: calc(100vw - var(--tablet-nav-width));
    overflow-x: auto;
    padding-right: 44px;
    & .tablet-list-item {
        flex-shrink: 0
    }
}

.outer-main-container.module-baseTablet .TopBar-appBar {
    background-color: var(--tablet-bg);
    filter: brightness(0.97);
}

.base-tablet .tablet-content .components {
    /* display:block; */
    /* max-width: 60vw; */
    column-gap: 2em;
    row-gap: 2em;
}
.grid-item-row-1 {
  display: none;
}

.base-tablet .tablet-page-header {
    margin-bottom: 2em;
    margin-top: 8px;
}
.base-tablet .tablet-list--boxes {
    margin-top: .5em;
}
[data-root-id="01-start"]  .tablet-page-header{
    margin-bottom: .5em;
}
.base-tablet.has-module-nav .tablet-split, .base-tablet.has-module-nav .tablet-hub {
    padding-left: calc(var(--tablet-nav-width) + 0vw);
}

[data-root-id*="dgs-"] a[href*="dgs-"]:not(.MainMenu-menu *) {
    background: var(--whiteblack) !important;
    border: 2px solid var(--blackwhite) !important;
    & * {color: var(--blackwhite) !important}
}
[data-root-id*="vt-"] a[href*="vt-"]:not(.MainMenu-menu *) {
    background: var(--whiteblack) !important;
    border: 2px solid var(--blackwhite) !important;
    & * {color: var(--blackwhite) !important}
}

[data-root-id*="sb-"] a[href*="sb-"]:not(.MainMenu-menu *) {
    background: var(--whiteblack) !important;
    border: 2px solid var(--blackwhite) !important;
    & * {color: var(--blackwhite) !important}
}
[data-root-id*="-main"] a[href*="-main"]:not(.tablet-module-nav *):not(.MainMenu-menu *) {
    background: var(--whiteblack) !important;
    border: 2px solid var(--blackwhite) !important;
    & * {color: var(--blackwhite) !important}
}
/* ################### hide children in main modul page */
[data-root-id*="-main"] .tablet-list:not(.teaser-list *) {
    display: none;
}
.tablet-content { animation: fadeup 300ms ease-out 0s 1 forwards; }
@keyframes fadeup {
    0% { margin-top: 150px; opacity: 0.2 }
    100% { margin-top: var(--content-top-margin); opacity: 1 } }

.tablet-content:has(.teaser-list):not(#tablet-page-root *) {
    --content-top-margin: 88px;
}

.richtext h2 {
    color: var(--module-color);
    text-transform: none;
    font-size: 1.5rem;
    margin-bottom: 1em
}

.base-tablet .MainMenu-item {
    font-size: 1.375rem;
}

.ComponentsWrapper-padding + .imageslider-advanced {
    margin-top: 1em;
}
.imageslider-advanced + .ComponentsWrapper-padding {
    margin-top: 0em;
}

button[data-textsize-class="textsize-xxl"] {
    display: none
}
.imageslider-advanced:not(.single) .FullScreenWrapper-fullscreen:has(.swiper-custom-buttons) .swiper .caption-inline {
    bottom: 30px;
    & * {
        color: var(--font-color)
    }
}




swiper-container::part(button-prev), swiper-container::part(button-next) {
    background: hsl(0deg 0% 0% / 30%);
    padding: 5px;
}
swiper-container::part(button-prev) {
    padding-left: 3px;
}
swiper-container::part(button-next) {
    padding-right: 3px;
}

swiper-slide.swiper-slide-active {
    /* min-height: 100%; */
    /* position: static; */
}

html {
    background: var(--tablet-bg)
}

.teaser-list {
    width: 100%;
    height: 10px;
}

[data-root-id="01-start"] .tablet-split {
    display: block;
}

@media (orientation: portrait) and (hover: none) and (pointer: coarse) {

    .base-tablet .tablet-content .components {
    display: block; 
}
    .base-tablet {
    --tablet-nav-width: 100px;
}
    .teaser-list ul.tablet-list.tablet-list--tiles {
      max-width: calc(100vw - var(--tablet-nav-width));
    overflow-x: auto;
        gap: 8px;
    padding-right: 44px;
    & .tablet-list-item {
        flex-shrink: 0
    }
}
    [data-root-id="01-start"] .tablet-list--boxes > li:nth-child(5), .tablet-list--boxes > li:nth-child(7) {
    grid-column: auto;
}
    .base-tablet.has-module-nav .tablet-split, .base-tablet.has-module-nav .tablet-hub {
    padding-left: calc(var(--tablet-nav-width) + 4vw);
}
}

.tablet-content .richtext {
    padding-left: 0 !important;
}

[data-root-id*="solo"],
[data-root-id*="glossar"],
[data-root-id*="gl-"],
[data-root-id*="keypad"],
[data-root-id*="imprint"]
{
    
    & .tablet-module-nav {
        display:none;
    }
    & .tablet-hub {
        padding-left: 1em !important
    }
    & .tablet-list-item-link {
        width: fit-content;
        
    }
}

.Collapsible__trigger {
    font-weight: bold !important;
}

    body:not(.fullscreen) .outer-main-container {
        box-shadow:unset;
        max-width: unset; 
        background: var(--tablet-bg)
    }
.base .TopBar-appBar {
    max-width: unset;
    right: auto;
    background-color: var(--tablet-bg);
    filter: brightness(0.97);
}
.base .list-item {
    border-bottom: 1px solid #000000
}
.base ul li.list-item:last-of-type .List-listItem{
    border-bottom: none;
}
.base ul.base-list {
    margin: 0 30px;
}
.MainMenu-SlideRoot {
    background-color: var(--tablet-bg) !important;
    min-height: 100vh
}
.MainMenu-menu {
    background: var(--tablet-bg) !important;
}
.text-popup-paper .text-popup-title {
    display: none;
}

.tablet-content .richtext h2 {
    margin-top: 0;
    margin-bottom: 8px;
}

.base-tablet .tablet-hub {
    max-width: calc(100vw - var(--tablet-padding));
}
.tablet-content:has(.teaser-list) .tablet-page-header {
    margin-bottom: 0;
}

.imageslider-advanced .caption-inline {
    font-size: .9375em;
    & * {line-height: 1.2 !important;
        }
}