/* ===============================
   Base
================================ */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #fff;
    color: #fff;
    line-height: 1.4;
}

.MathJax {
    overflow-x: auto;
}


/* ===============================
   Container
================================ */
/* Style of the main container which includes the web page */
.container {
    max-width: 2160px;
    margin: auto;
    background: #af0077;
    box-shadow: 0 0 10px rgba(0,0,0,.2);
    position: relative;
    overflow: visible; /* Wichtig für Wochentag-Box */

    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ===============================
   Header / Headline
================================ */
/* style of the header */
.headline {
    position: sticky;
    top: 0;              /* REQUIRED */
    z-index: 10;

    width: 100%;
    height: auto;
    background: #fff;

    display: flex;
    justify-content: space-evenly;

    flex-wrap: wrap;
}

/* style of the after pseudo-element which generates the blue box underneath the headline (wrapper) container */
/*.headline::after {
    content: "";
    position: relative;
    display: block;

    width: 100%;
    height: 1.5vh;

    background: #2596be;
}*/

.navigation{
    content: "";
    position: relative;
    display: block;

    width: 100%;
    height: 1.5vh;

    background: #2596be;
}

.navigation-content{
    display: none;
}

/* this container wraps around the logo and headline content */
.head-wrapper {
    padding: 2.5vh;
    display: flex;
    width: 100%;
    padding-left: 4vw;
    padding-right: 2vw;
}

/* this container contains the two headlines */
.center-side {
    flex: 1;
    align-items: center;
}

/* style of the headline and sub headline */
.line1 {
    color: #af0077;
    font-size: clamp(1rem, 3vw, 4.6rem);
}

.line2 {
    color: #2596be;
    font-size: clamp(0.8rem, 2.5vw, 4.2rem);
}

/* this container contains the two logos */
.logo-container {
    display: flex;
    align-items: center;
    gap: 2vw;
}

/* style of the images containt in the logo container */
.logo-container img {
    width: clamp(70px, 15vw, 320px);
    height: auto;
}


/* ===============================
   Schedule Badge
================================ */

/* style of the schedule badge */
.schedule-badge {
    position: absolute;
    top: 100%;
    /* calculates the exact positon, s.t. the boxes full width is aligned with the right edge of the (main) container */
    left: calc(100% - 25vw);
    z-index: 10;
    transition: opacity 0.3s ease;

    width: 25vw;

    display: block;
    line-height: 1;

    transition: all 0.3s ease;
}

/* style of the content located inside the schedule badge */
.schedule-text {
    font-family: 'Rock Salt', cursive;
    background: #2596be;
    color: #fff;

    height: auto;
    align-content: center;

    font-size: clamp(1.5rem, 5vw, 9.5rem);
    font-weight: 600;
    text-align: center;

    padding-bottom: 1.5vh;
    padding-top: 0.5vh;
}

/* style of schedule badge after its been removed by overlay.js once */
.schedule-badge.is-destroyed {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* ===============================
   Schedule Container
================================ */
/* style of the second (main) container besides headline, inwhich the main content of the web page is located */
.schedule-container {
    display: flex;
    flex: 1;

    background: #af0077;
    /* must be included to enable scrolling */
    overflow: hidden;
}

/* ===============================
   Day Label
================================ */
/* style of the schedule-day wrapper inwhich the day_label and potentialy the scroll-btn are located */
.schedule-day {
    position: sticky;
    top: 0;
    display: flex;
    /* flex is arranged underneath each other */
    flex-direction: column;
    align-items: center;
    /* usefull to put a gap inbetween flex items */
    justify-content: space-between; 
    align-self: flex-start;

    z-index: 2;
    margin-top: 2vh;

    /* calculates exact hight wrt viewport, s.t. there is a small gap on top and underneath wrapper */
    height: calc(100% - 3.5vh);
    /* generated small box dividing day_label und schedule content */
    color: rgba(255,255,255,.5);
    border-right: 0.5vw solid rgba(255,255,255,.5);
}

/* style of day_label */
.day_line {
    padding-left: 1.5vw;
    font-size: clamp(2.5rem, 6vw, 10rem);
    font-weight: 600;
    /* text gets written vertical */
    writing-mode: vertical-rl;
}

/* style of a potential scroll-btn wrapper */
.scroll-btn {
    /* form and size */
    aspect-ratio: 1/1;
    height: 10%; /* width = height + radius 50% to get a zircle */
    border-radius: 50%;
    
    /* Flexbox inside of button, to align contents in the middel */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    
    /* color and border */
    background-color: #af0077;
    border: 0.5vw solid rgba(255, 255, 255, .5); /* Etwas schmaler für 60px Button */
    color: white;
    
    cursor: pointer;
    margin-bottom: 1vh; 

    
    /* transition animation (i.e. hover) */
    transition: all 0.3s ease;
}

/* pseudo-element that specifys style of button while hovered over */
.scroll-btn:hover {
    transform: scale(1.1); 
}

/* style of logo-wrapper located inside of button */
.scroll-btn-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* style of logo */
.scroll-btn-logo img {
    /* takes 70% of wrapper size */
    opacity: 0.5;
    width: 70%;
    height: auto;
}

.qr-code {
    /* Form and size */
    aspect-ratio: 1/1;
    height: 15%;
    border-radius: 20%;
    
    /* Positionierungskontext für das Overlay */
    position: relative;
    flex-shrink: 0;
    
    background-color: #af0077;
    cursor: pointer;
    margin-bottom: 1vh; 
    
    /* Schneidet das darunterliegende Bild an den Ecken ab */
    overflow: hidden; 
}

.qr-code img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Block-Anzeige verhindert kleine Freiräume unter dem Bild */
    display: block; 
}

/* ===============================
   Table
================================ */
/* style of the main content of the web page (the schedule table) */
.schedule-table {
    width: 100%;
    border-collapse: collapse;
    position: relative;

    height: 100%;
}

/* style of the container wrapping around the table, to assure smoth scrolling of its contents */
.table-wrapper {
    flex: 1;
    /* scrolling is only enabled in y-direction */
    overflow-y: auto;

    scroll-behavior: auto;

    /* Firefox */
    scrollbar-width: none;

    padding-left: 2vw;
    padding-right: 2vw;

    /* Internet Explorer / Edge (alt) */
    -ms-overflow-style: none;
}

/* Chrome, Safari */
.table-wrapper::-webkit-scrollbar {
    display: none;
}

/* style of each individual row of the table */
.schedule-table th,
.schedule-table td {
    padding: .8vw 1vw;
    text-align: left;
    background: #af0077;
    color: #fff;
    border: none;
}

.different-place-container{
    color: rgba(255,255,255,.7);
    font-size: clamp(0.8rem, 2vw, 3.6rem);
    font-style: italic;
}

.different-place-other-container{
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

/* style of the second column (speaker and topic) of the table */
.schedule-table td h2,
.schedule-badge td p {
    width: fit-content; /* Zwingt das Element, nur so breit wie der Text zu sein */
    display: block;
}

/* first row of the table has no dotted border on top */
.schedule-table tbody tr:first-child::before {
    border-top: none;
    position: relative;
}

/* every other row of the table has dotted border on top, s.t.they are more clearly seperated */
.schedule-table tr::before {
    content: "";
    position: absolute;
    top: 1;
    left:0;
    right:0;
    border-top: 0.2vh dashed rgba(255,255,255,.6);
}

/* style of the first column (times column) of each row */
.schedule-table th {
    padding-left: 0;
    width: 20%;
    /* style of time line inside a time cell */
    font-size: clamp(0.9rem, 2.5vw, 3rem);

    /*border-left: 0.5vw solid rgba(255,255,255,.5);*/   
}

/* style of  content column of each row, only handling its width */
.schedule-table td {
    width: 80%;
}


/* style of potential info-btn wrapper, wrapping around the event columns headline and the info-btn*/
.info-wrapper {
    display: flex;
    align-items: center; /* text and btn are centered */
    gap: 1vw;
}

/* style of potential info-btn container */
.info-btn {
    height: 30px; 
    width: 30px;
    border-radius: 50%; /* width = height + radius 50% to get a zircle */

    border: none;
    background-color: #af0077;;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
    flex-shrink: 0; /* disabled shrinking of the button */
}

/* pseudo-element that specifys style of button while hovered over */
.info-btn:hover {
    transform: scale(1.1);
}

/* style of logo-wrapper located inside of button */
.info-btn-logo-con {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* style of logo */
.info-btn-logo-con img {
    width: 90%;
    height: auto;
    transition: filter 0.3s ease, opacity 0.3s ease;
    opacity: 1;
    filter: brightness(0) invert(1); 
}


/*--------------------------------Style for Overlaywindow-----------------------------*/

/* style of overlay container, containing the iframe (extra material) */


.abstract-toggle[data-id='Defilippis09']:checked ~ .overlay-container[data-id='Defilippis09'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='Pilloni02']:checked ~ .overlay-container[data-id='Pilloni02'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='Luk06']:checked ~ .overlay-container[data-id='Luk06'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='Tent11']:checked ~ .overlay-container[data-id='Tent11'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='EC1']:checked ~ .overlay-container[data-id='EC1'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='EC2']:checked ~ .overlay-container[data-id='EC2'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='Hamenstaedt05']:checked ~ .overlay-container[data-id='Hamenstaedt05'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='Garban08']:checked ~ .overlay-container[data-id='Garban08'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='Kerr12']:checked ~ .overlay-container[data-id='Kerr12'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='EC3']:checked ~ .overlay-container[data-id='EC3'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='EC4']:checked ~ .overlay-container[data-id='EC4'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='Alaifari10']:checked ~ .overlay-container[data-id='Alaifari10'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='Nekrashevych04']:checked ~ .overlay-container[data-id='Nekrashevych04'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='Virag07']:checked ~ .overlay-container[data-id='Virag07'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='Burklund01']:checked ~ .overlay-container[data-id='Burklund01'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='Sinapova03']:checked ~ .overlay-container[data-id='Sinapova03'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='Dereich13']:checked ~ .overlay-container[data-id='Dereich13'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='EC5']:checked ~ .overlay-container[data-id='EC5'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='EC6']:checked ~ .overlay-container[data-id='EC6'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='Defilippis09']:checked ~ .overlay-container[data-id='Defilippis09'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='Pilloni02']:checked ~ .overlay-container[data-id='Pilloni02'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='Luk06']:checked ~ .overlay-container[data-id='Luk06'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='Tent11']:checked ~ .overlay-container[data-id='Tent11'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='EC1']:checked ~ .overlay-container[data-id='EC1'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='EC2']:checked ~ .overlay-container[data-id='EC2'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='Hamenstaedt05']:checked ~ .overlay-container[data-id='Hamenstaedt05'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='Garban08']:checked ~ .overlay-container[data-id='Garban08'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='Kerr12']:checked ~ .overlay-container[data-id='Kerr12'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='EC3']:checked ~ .overlay-container[data-id='EC3'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='EC4']:checked ~ .overlay-container[data-id='EC4'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='Alaifari10']:checked ~ .overlay-container[data-id='Alaifari10'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='Nekrashevych04']:checked ~ .overlay-container[data-id='Nekrashevych04'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='Virag07']:checked ~ .overlay-container[data-id='Virag07'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='Burklund01']:checked ~ .overlay-container[data-id='Burklund01'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='Sinapova03']:checked ~ .overlay-container[data-id='Sinapova03'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='Dereich13']:checked ~ .overlay-container[data-id='Dereich13'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='EC5']:checked ~ .overlay-container[data-id='EC5'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.abstract-toggle[data-id='EC6']:checked ~ .overlay-container[data-id='EC6'] {
    position: fixed;
    z-index: 1000;
    display: block; 
    width: 50%;
    height: 100px;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    }

    .abstract-toggle:checked ~ .info-btn {
    display: none; 
    }

.overlay-container {
    display: none;
}

/* style of the overlay content */
.overlay-content {
    position: relative;
    width: 90%;  
    height: 90%; /* only 90% of width and height of table-wrapper container inwhich this is located if visible */


    background: white;
    border-radius: 20px; /* rounded edges */
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    pointer-events: auto;
    overflow: hidden;
    /* in center of overlay-container */
    margin: auto; 
}

.overlay-content p{
    color: black;
}

/* in iframe included website / metrial takes 100% of the space inside the overlay-content container */
#overlay-frame {
    width: 100%;
    height: 100%;
    border: none;
}

/* style of potential close-btn container (wrapper) */
.close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #af0077;
    border: 3px solid rgba(255, 255, 255, .5);
    color: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 1002;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

/* pseudo-element that specifys style of button while hovered over */
.close-btn:hover {
    transform: scale(1.1);
}

/* style of logo-wrapper located inside of button */
.close-btn-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* style of logo */
.close-btn-logo img {
    opacity: 0.5;
    width: 70%;
    height: auto;
}
/* ===============================
   Typography
================================ */

/* style of the topic line inside a content cell */
.topic {
    font-style: italic;
    width: fit-content;
    color: #e0e0e0;
    margin-top: .5vh;

    font-size: clamp(1rem, 2vw, 3.6rem);
}

/* style of the talk line inside a content cell if of type "talk" */
.talk {
    border-left: 4px solid rgba(255,255,255,.15);
    padding-left: .6vw;

    font-size: clamp(1.1rem, 2.5vw, 3rem);
}

/* style of the info line inside a content cell if of type "other" */
.other {
    font-size: clamp(0.9rem, 2.5vw, 3rem);
    font-style: italic;
    font-weight: 300;
}


/* ===============================
   Flipboard
================================ */

@media (min-height: 1660px) {
    .headline::after {
        height: 1vh;
    }

    .schedule-badge {
        left: calc(100% - 35%);
        z-index: 10;
        width: 35%;
    }

    /* increasing font sizes if the webpage is shown on a flip board */
    .schedule-text {
        font-size: clamp(1.5rem, 6vw, 9.5rem);
        padding-bottom: 1vh;
    }

    .qr-code {
        height: 100px;
        
    }

    .line1 {
        font-size: clamp(1rem, 3.5vw, 4.9rem);
    }

    .line2 {
        font-size: clamp(0.8rem, 3vw, 4.5rem);
    }

    .topic {
        font-size: clamp(1rem, 3vw, 4.3rem);
    }

    .talk {
        font-size: clamp(1.1rem, 3.5vw, 3.8rem);
    }

    .other {
        font-size: clamp(0.9rem, 3.3vw, 3.8rem);
    }

    .schedule-table th {
        font-size: clamp(0.9rem, 3vw, 3.8rem);
    }

    .day_line {
        font-size: clamp(2.5rem, 7vw, 10rem);
    }

    .schedule-container {
        height: auto;
    }
}

/* ===============================
   Tablet
================================ */

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .qr-code{
    display: none;
  }

  .schedule-badge{
    display: none;
  }

  .navigation {
    height: 4vh;
    align-content: center;
    /* Ermöglicht die absolute Zentrierung des mittleren Elements */
    position: relative; 
}

.navigation-content {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between; 
    padding: 0 20px; 
    box-sizing: border-box; 
}

/* Der Tag-Wrapper wird exakt in der Mitte der Navigationsleiste fixiert */
.navigation-day-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* Liegt hinter den Buttons, falls diese sehr breit werden */
    z-index: 0; 
    /* Verhindert Textumbruch bei langen Datumsangaben */
    white-space: nowrap; 
}

.navigation-day-wrapper p {
    margin: 0;
    padding: 0;
    color: #ffffff;
    font-weight: bold;
    /* "mittel"große Schrift, passt sich der flachen Leiste an */
    font-size: 1.1rem; 
    /* Sorgt für perfekte vertikale Zentrierung des Textes */
    line-height: 1; 
}

.navigation-buttons-container {
    width: 50%; 
    display: flex;
    /* Verhindert, dass die Container die Mitte überlappen */
    z-index: 1; 
}

.navigation-button a.disabled{
    display: none;
}

/* IDs steuern weiterhin das Verhalten bei fehlenden Elementen */
#left-nav-btn {
    justify-content: flex-start;
    margin-right: auto; 
}

#right-nav-btn {
    justify-content: flex-end;
    margin-left: auto; 
}

.navigation-button {
    display: inline-flex;
    height: 100%; 
}

.navigation-button a,
.navigation-button a:visited,
.navigation-button a:hover,
.navigation-button a:active {
    color: #ffffff !important;
    text-decoration: none;

    align-content: end;
    height: 90%;
}

.navigation-button a mjx-container,
.navigation-button a MJX-container {
    color: #ffffff !important;
    margin: 0 !important;

    font-size: 2em !important;
}

.navigation-button a mjx-container svg,
.navigation-button a MJX-container svg {
    fill: #ffffff !important;
}

.navigation-button a mjx-container svg *,
.navigation-button a MJX-container svg * {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

}

/* ===============================
   Mobile Phone
================================ */

@media (max-width: 530px) {

.head-wrapper{
    padding: 1.5vh;
    padding-left: 5vw;
    padding-right: 4vw;

}

.logo-container {
    display: grid;
    gap: 1vh;
}

.schedule-text {
    font-size: clamp(1.2rem, 4vw, 9.5rem);
}

.center-side {
    flex: 1;
    align-items: center;
    justify-content: center;
}

/* decreasing font sizes if the webpage is shown on a mobile device */
.line1 {
    font-size: clamp(1.2rem, 2.2vw, 2rem);
}

.line2 {
    font-size: clamp(1.0rem, 1.8vw, 1.6rem);
}

.topic {
    font-size: clamp(1rem, 3.5vw, 3.5rem);
}

.talk {
    font-size: clamp(0.8rem, 4.0vw, 4.3rem);
}

.other {
    font-size: clamp(0.8rem, 4.0vw, 4.3rem);
}

.schedule-table th {
    font-size: clamp(0.8rem, 3.7vw, 3.8rem);
    text-align: center;
    width: 25%;

    padding-left: .5vw;

    border-left: 0.5vw solid rgba(255,255,255,.5);

}

.schedule-table tr::before {
    content: "";
    position: absolute;
    top: 1;
    left:2vw;
    right:1.5vw;
    border-top: 0.2vh dashed rgba(255,255,255,.6);
}

.schedule-table td p,
.schedule-table td h2{
    margin-left: 2vw;
}

.schedule-table {

    position: relative;
}

/* disabeling the schedule-day container on the left side of the table, s.t. its contents get more visible */
.schedule-day {
    display: none;
}

.schedule-table td {
    width: 75%;
}


/* enable navigation to switch inbetween day on mobile schedule */
.navigation {
    height: 4vh;
    align-content: center;
    /* Ermöglicht die absolute Zentrierung des mittleren Elements */
    position: relative; 
}

.navigation-content {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between; 
    padding: 0 20px; 
    box-sizing: border-box; 
}

/* Der Tag-Wrapper wird exakt in der Mitte der Navigationsleiste fixiert */
.navigation-day-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* Liegt hinter den Buttons, falls diese sehr breit werden */
    z-index: 0; 
    /* Verhindert Textumbruch bei langen Datumsangaben */
    white-space: nowrap; 
}

.navigation-day-wrapper p {
    margin: 0;
    padding: 0;
    color: #ffffff;
    font-weight: bold;
    /* "mittel"große Schrift, passt sich der flachen Leiste an */
    font-size: 1.1rem; 
    /* Sorgt für perfekte vertikale Zentrierung des Textes */
    line-height: 1; 
}

.navigation-buttons-container {
    width: 50%; 
    display: flex;
    /* Verhindert, dass die Container die Mitte überlappen */
    z-index: 1; 
}

.navigation-button a.disabled{
    display: none;
}

/* IDs steuern weiterhin das Verhalten bei fehlenden Elementen */
#left-nav-btn {
    justify-content: flex-start;
    margin-right: auto; 
}

#right-nav-btn {
    justify-content: flex-end;
    margin-left: auto; 
}

.navigation-button {
    display: inline-flex;
    height: 100%; 
}

.navigation-button a,
.navigation-button a:visited,
.navigation-button a:hover,
.navigation-button a:active {
    color: #ffffff !important;
    text-decoration: none;

    align-content: end;
    height: 90%;
}

.navigation-button a mjx-container,
.navigation-button a MJX-container {
    color: #ffffff !important;
    margin: 0 !important;

    font-size: 2em !important;
}

.navigation-button a mjx-container svg,
.navigation-button a MJX-container svg {
    fill: #ffffff !important;
}

.navigation-button a mjx-container svg *,
.navigation-button a MJX-container svg * {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}



.schedule-badge{
    display: none;
    height: 5vh;
    background-color: #2596be;
    align-content: center;
}

.schedule-text{
    padding: 0;
    font-size: clamp(1.2rem, 3vh, 9.5rem);
}

}

@media only screen and (min-width: 568px) and (max-width: 1244px) and (orientation: landscape) {
    .qr-code{
        display: none;
    }
}