/*!
Theme Name: KT25
Theme URI: https://klinggrafik.ch
Author: wald.pixel.werk
Author URI: https://waldpixelwerk.de/
Description: Theme für KT25
Version: 1.0.0
Tested up to: 8.2
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: kt25
Tags: custom-menu, translation-ready
*/

/* roboto-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: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/roboto-v47-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-500 - 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: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('./fonts/roboto-v47-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-700 - 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: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/roboto-v47-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


@font-face {
    font-family: 'TT Biersal Variable';
    src: url('./fonts/TT_Biersal_Variable.woff') format('woff'),;
    src: url('./fonts/TT_Biersal_Variable.woff2') format('woff2')
     /* font-weight: 100 900; /* Variabler Gewichtsbereich */
    /*font-style: oblique -40deg 40deg; /* Variable Schräglagen */
}

@font-face {
  font-family: 'Interphases Pro';
  src: url('./fonts/TT_Interphases_Pro_Regular.eot'); /* IE9 Compat Modes */
  src: url('./fonts/TT_Interphases_Pro_Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/TT_Interphases_Pro_Regular.woff2') format('woff2'), /* Modern browsers */
       url('./fonts/TT_Interphases_Pro_Regular.woff') format('woff');   /* Fallback */
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'Interphases Pro';
  src: url('./fonts/TT_Interphases_Pro_DemiBold.eot'); /* IE9 Compat Modes */
  src: url('./fonts/TT_Interphases_Pro_DemiBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/TT_Interphases_Pro_DemiBold.woff2') format('woff2'), /* Modern browsers */
       url('./fonts/TT_Interphases_Pro_DemiBold.woff') format('woff');   /* Fallback */
  font-weight: 500;
  font-style: normal;
}



@font-face {
  font-family: 'Interphases Pro';
  src: url('./fonts/TT_Interphases_Pro_Bold.eot');
  src: url('./fonts/TT_Interphases_Pro_Bold.eot?#iefix') format('embedded-opentype'),
       url('./fonts/TT_Interphases_Pro_Bold.woff2') format('woff2'),
       url('./fonts/TT_Interphases_Pro_Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}


body{
--green:#E3FF73;
--pink:#F9C9DE;
--blue:#27AAE1;
--fonts:2vw;
}

body, html{letter-spacing:0.03em;
font-family:"TT Biersal Variable";font-weight:400;letter-spacing:0.03em;
padding:0;margin:0;left:0;top:0;position:relative;font-size:var(--fonts);line-height:1.2em;text-rendering: geometricPrecision;background-color:var(--heather);color: var(--black);white-space-collapsing:discard;min-height:100dvh;background-color:var(--blue);color:#fff;}

a, a:link, a:hover, a:active, a:visited{text-decoration:none;transition:color .2s ease-in-out}
.container-inner a{display:inline;position:relative;}


h1, h2, h3{margin-block-end: 0.5rem;font-family: "TT Biersal Variable", sans-serif;}
h1{font-size:2em;line-height:1.216em;letter-spacing:0.03em;}
h2{font-size:2em;line-height:1.216em;letter-spacing:0.03em;}
h3,h4,h5,h6{font-family:"Halvar";font-size:var(--fonts);line-height:1.2em;font-weight:500}
h1, h2, h3, h4, h5, h6{
    margin-block-start: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

img{max-width:100%}

::selection{
  color:var(--white);
  background-color:var(--dark);
}


.content-inner{margin-top:7em;width:50%;margin-left:5%;font-size:0.8em;line-height:1.3em;margin-bottom:4em;font-family:"Roboto";}
.content-inner a{color:#fff}


.header{position:fixed;top:0;left:0;width:100vw;height:100dvh;z-index:99;overflow:hidden;pointer-events:none;}

.menu-burger{text-align:right;right:4rem;top:3rem;position:absolute;z-index:4;pointer-events:auto;cursor:pointer}
.menu-container{width:100vw;height:100dvh;overflow:hidden;top:0;left:0;position:absolute;pointer-events:none;}
.menu-container.active{pointer-events:auto}
.main-content{line-height:0;min-height:calc(100dvh - 2.4em)}
.home{min-height:calc(100dvh - 1.2em)}

.menu{height:150vh;width:100vw;position:relative;top:-150vh;transition:top 1s ease-in-out}
.active .menu{top:0}
.menu-content{height:100dvh;width:100%;position:absolute;left:0;top:0;background-color:var(--green);z-index:5;display: flex;
  align-items: center; /* vertikal */
  justify-content: center;}
.menu-close, .popup-close {
    position: absolute;
    right: 4rem;
    top: 3rem;
    width: 1.3em;
    height: 2em;
    z-index: 6;
	cursor:pointer;
}
.menu-background{height:100%;width:100%;position:absolute;left:0;top:0}
.menu-background img{width:100%;height:100%;object-fit: cover;object-position: bottom}
.menu-stroke{display:inline-block;display: inline-block;width:1.2em;margin-left:-0.8em;transition:transform .6s ease-in-out}
.menu-burger:hover .menu-stroke {
    transform: rotate(-95deg);
    transform-origin: center;
}

.menu-menu-container ul{display:inline-block;width:100%;text-align:center;list-style-type:none;padding-inline-start: 0;margin-block-start:0;margin-block-end:0}
.menu-menu-container li{display:inline-block;font-size:2.5em;line-height:1.2em;width:100%;text-align: center;}
.menu-menu-container li a{color:var(--blue);font-variation-settings: "slnt" -20;transition:font-variation-settings 1s ease-in-out}
.menu-menu-container li:nth-child(even) a{font-variation-settings: "slnt" 20;}
.menu-menu-container li a:hover{font-variation-settings: "slnt" 20;}
.menu-menu-container li:nth-child(even) a:hover{font-variation-settings: "slnt" -20;}


.main-front, .main-back{width:100vw;height:100dvh;position:fixed;top:0;left:0;background-color:var(--blue)}
.home .main-front, .home .main-back{position:absolute}

.main-front{
    clip-path: url(#cross);
background-color:var(--blue)}


.main-bg{width:100%;height:100%;position:absolute;top:0;left:0;}
.main-bg img{width:100%;height:100%;object-fit: cover}

.main-spannung {
    color: var(--pink);
    font-size: 12.5em;
    text-align: center;
    position: absolute;
    top: calc(50vh - 0.5em);
    line-height: 1em;
    width: 98%;
  
}


.spannung{color:var(--pink);margin:0 0.01em;overflow:visible;}
/*

@keyframes s{
    0%{font-style:oblique 25deg;}
    10%{font-style:oblique 25deg;}
    27%{font-style:oblique -20deg;}
    55%{font-style:oblique -20deg;}
    70%{font-style:oblique 25deg;}
    100%{font-style:oblique 25deg;}
}



@keyframes p{
    0%{font-style:oblique 25deg;margin:0 0em 0 0em;}
    12%{font-style:oblique 25deg;margin:0 0em 0 0em;}
    29%{font-style:oblique -35deg;margin:0 0.1em 0 0em;}
    60%{font-style:oblique -35deg;margin:0 0.1em 0 0em;}
    75%{font-style:oblique 25deg;margin:0 0em 0 0em;}
    100%{font-style:oblique 25deg;margin:0 0em 0 0em;}
}


@keyframes a{
    0%{font-style:oblique -20deg;margin: 0 -0.05em 0 0;}
    15%{font-style:oblique -20deg;margin: 0 -0.05em 0 0;}
    32%{font-style:oblique 25deg;margin: 0 -0.05em 0 0.1em;}
    64%{font-style:oblique 25deg;margin: 0 -0.05em 0 0.1em;}
    79%{font-style:oblique -20deg;margin: 0 -0.05em 0 0;}
    100%{font-style:oblique -20deg;margin: 0 -0.05em 0 0;}
}


@keyframes n1{
    0%{font-style:oblique -15deg;margin:0 0em 0 0em;}
    18%{font-style:oblique -15deg;margin:0 0em 0 0em;}
    35%{font-style:oblique 20deg;margin:0 0.08em 0 0em;}
    68%{font-style:oblique 20deg;margin:0 0.08em 0 0em;}
    82%{font-style:oblique -15deg;margin:0 0em 0 0em;}
    100%{font-style:oblique -15deg;margin:0 0em 0 0em;}
}


@keyframes n2{
    0%{font-style:oblique -40deg;margin:0 0.25em 0 -0.05em;}
    21%{font-style:oblique -40deg;margin:0 0.25em 0 -0.05em;}
    38%{font-style:oblique 0deg;margin:0 -0.04em 0 -0.04em;}
    72%{font-style:oblique 0deg;margin:0 -0.04em 0 -0.04em;}
    85%{font-style:oblique -40deg;margin:0 0.25em 0 -0.05em;}
    100%{font-style:oblique -40deg;margin:0 0.25em 0 -0.05em;}
}


@keyframes u{
    0%{font-style:oblique 2deg;margin:0 0em 0 0em;}
    25%{font-style:oblique 2deg;margin:0 0em 0 0em;}
    40%{font-style:oblique -60deg;margin:0 0.2em 0 -0.04em;}
    68%{font-style:oblique -60deg;margin:0 0.2em 0 -0.04em;}
    85%{font-style:oblique 2deg;margin:0 0em 0 0em;}
    100%{font-style:oblique 2deg;margin:0 0em 0 0em;}
}


@keyframes n3{
    0%{font-style:oblique 20deg;margin:0 0em 0 0em;}
    26%{font-style:oblique 20deg;margin:0 0em 0 0em;}
    43%{font-style:oblique -10deg;margin:0 0.1em 0 0em;}
    74%{font-style:oblique -10deg;margin:0 0.1em 0 0em;}
    88%{font-style:oblique 20deg;margin:0 0em 0 0em;}
    100%{font-style:oblique 20deg;margin:0 0em 0 0em;}
}



@keyframes g{
    0%{font-style:oblique -35deg;margin:0 0em 0 0em;}
    26%{font-style:oblique -35deg;margin:0 0em 0 0em;}
    43%{font-style:oblique 35deg;margin:0 0em 0 0.1em;}
    74%{font-style:oblique 35deg;margin:0 0em 0 0.1em;}
    88%{font-style:oblique -35deg;margin:0 0em 0 0em;}
    100%{font-style:oblique -35deg;margin:0 0em 0 0em;}
}




.spannung-s{font-style:oblique 25deg;animation:s 5s infinite ease-in-out;width:0.3em;}
.spannung-p{font-style:oblique 25deg;animation:p 5s infinite ease-in-out;width:0.3em;}
.spannung-a{font-style:oblique -20deg;margin: 0 -0.05em 0 0;animation:a 5s infinite ease-in-out;width:0.3em;}
.spannung-n1{font-style:oblique -15deg;animation:n1 5s infinite ease-in-out;width:0.3em;}
.spannung-n2{font-style:oblique -40deg;margin:0 0.25em 0 -0.05em;animation:n2 5s infinite ease-in-out;width:0.3em;}
.spannung-u{font-style:oblique 2deg;animation:u 5s infinite ease-in-out;width:0.3em;}
.spannung-n3{font-style:oblique 20deg;width:0.3em;animation:n3 5s infinite ease-in-out;}
.spannung-g{font-style:oblique -35deg;width:0.3em;animation:g 5s infinite ease-in-out;}







@keyframes s {
  0%   { transform: skewX(30deg); }
  10%  { transform: skewX(30deg); }
  27%  { transform: skewX(-20deg); }
  55%  { transform: skewX(-20deg); }
  70%  { transform: skewX(30deg); }
  100% { transform: skewX(30deg); }
}

@keyframes p {
  0%, 12%   { transform: skewX(30deg); margin: 0 0em 0 0em; }
  29%, 60%  { transform: skewX(-25deg); margin: 0 0.1em 0 0em; }
  75%, 100% { transform: skewX(30deg); margin: 0 0em 0 0em; }
}

@keyframes a {
  0%, 15%   { transform: skewX(-20deg); margin: 0 -0.05em 0 0.1em; }
  32%, 64%  { transform: skewX(25deg); margin: 0 -0.05em 0 -0.04em; }
  79%, 100% { transform: skewX(-20deg); margin: 0 -0.05em 0 0.1em; }
}

@keyframes n1 {
  0%, 18%   { transform: skewX(-15deg); margin: 0 0em 0 0.05em; }
  35%, 68%  { transform: skewX(20deg); margin: 0 0.08em 0 0.05em; }
  82%, 100% { transform: skewX(-15deg); margin: 0 0em 0 0.05em; }
}

@keyframes n2 {
  0%, 21%   { transform: skewX(-40deg); margin: 0 0.25em 0 0.1em; }
  38%, 72%  { transform: skewX(0deg); margin: 0 -0.04em 0 0.04em; }
  85%, 100% { transform: skewX(-40deg); margin: 0 0.25em 0 0.1em; }
}

@keyframes u {
  0%, 25%   { transform: skewX(2deg); margin: 0 0.05em 0 0em; }
  40%, 68%  { transform: skewX(-40deg); margin: 0 0.2em 0 0.22em; }
  85%, 100% { transform: skewX(2deg); margin: 0 0.05em 0 0em; }
}

@keyframes n3 {
  0%, 26%   { transform: skewX(20deg); margin: 0 0.1em 0 0em; }
  43%, 74%  { transform: skewX(-10deg); margin: 0 0.13em 0 0em; }
  88%, 100% { transform: skewX(20deg); margin: 0 0.1em 0 0em; }
}

@keyframes g {
  0%, 26%   { transform: skewX(-35deg); margin: 0 0em 0 0.1em; }
  43%, 74%  { transform: skewX(35deg); margin: 0 0em 0 0.1em; }
  88%, 100% { transform: skewX(-35deg); margin: 0 0em 0 0.1em; }
}





.spannung-s   { display: inline-block; animation: s   5s infinite ease-in-out; width: 0.3em;transform: skewX(-25deg); }
.spannung-p   { display: inline-block; animation: p   5s infinite ease-in-out; width: 0.3em; transform: skewX(-25deg);}
.spannung-a   { display: inline-block; animation: a   5s infinite ease-in-out; width: 0.3em; margin: 0 -0.05em 0 0; transform: skewX(20deg);}
.spannung-n1  { display: inline-block; animation: n1  5s infinite ease-in-out; width: 0.3em; transform: skewX(15deg);}
.spannung-n2  { display: inline-block; animation: n2  5s infinite ease-in-out; width: 0.3em; transform: skewX(45deg);}
.spannung-u   { display: inline-block; animation: u   5s infinite ease-in-out; width: 0.3em; transform: skewX(-2deg);}
.spannung-n3  { display: inline-block; animation: n3  5s infinite ease-in-out; width: 0.3em; transform: skewX(-20deg);}
.spannung-g   { display: inline-block; animation: g   5s infinite ease-in-out; width: 0.3em; transform: skewX(35deg);}



*/


@keyframes s {
  0%, 10%   { font-variation-settings: "slnt" -30; }
  27%, 55%  { font-variation-settings: "slnt" 20; }
  70%, 100% { font-variation-settings: "slnt" -30; }
}

@keyframes p {
  0%, 12%   { font-variation-settings: "slnt" -30; margin: 0 0em 0 0em; }
  29%, 60%  { font-variation-settings: "slnt" 25; margin: 0 0.1em 0 0em; }
  75%, 100% { font-variation-settings: "slnt" -30; margin: 0 0em 0 0em; }
}

@keyframes a {
  0%, 15%   { font-variation-settings: "slnt" 20; margin: 0 -0.05em 0 0.08em; }
  32%, 64%  { font-variation-settings: "slnt" -25; margin: 0 0.02em 0 0.04em; }
  79%, 100% { font-variation-settings: "slnt" 20; margin: 0 -0.05em 0 0.08em; }
}

@keyframes n1 {
  0%, 18%   { font-variation-settings: "slnt" 20; margin: 0 0em 0 0.05em; }
  35%, 68%  { font-variation-settings: "slnt" -20; margin: 0 0.03em 0 0.0em; }
  82%, 100% { font-variation-settings: "slnt" 20; margin: 0 0em 0 0.05em; }
}

@keyframes n2 {
  0%, 21%   { font-variation-settings: "slnt" 40; margin: 0 0.35em 0 0.02em; }
  38%, 72%  { font-variation-settings: "slnt" 0; margin: 0 0.05em 0 0.1em; }
  85%, 100% { font-variation-settings: "slnt" 40; margin: 0 0.35em 0 0.02em; }
}

@keyframes u {
  0%, 27%   { font-variation-settings: "slnt" 2; margin: 0 0.1em 0 0em; }
  45%, 68%  { font-variation-settings: "slnt" 40; margin: 0 0.2em 0 0.0em; }
  89%, 100% { font-variation-settings: "slnt" 2; margin: 0 0.1em 0 0em; }
}

@keyframes n3 {
  0%, 26%   { font-variation-settings: "slnt" -20; margin: 0 0em 0 0em; }
  43%, 74%  { font-variation-settings: "slnt" 10; margin: 0 0.13em 0 0.1em; }
  88%, 100% { font-variation-settings: "slnt" -20; margin: 0 0em 0 0em; }
}

@keyframes g {
  0%, 29%   { font-variation-settings: "slnt" 35; margin: 0 0em 0 0.1em; }
  46%, 74%  { font-variation-settings: "slnt" -35; margin: 0 0em 0 0.14em; }
  88%, 100% { font-variation-settings: "slnt" 35; margin: 0 0em 0 0.1em; }
}


.spannung-s   { display: inline-block; animation: s   5s infinite ease-in-out; width: 0.3em; font-variation-settings: "slnt" -25; }
.spannung-p   { display: inline-block; animation: p   5s infinite ease-in-out; width: 0.3em; font-variation-settings: "slnt" -25; }
.spannung-a   { display: inline-block; animation: a   5s infinite ease-in-out; width: 0.3em; margin: 0 -0.05em 0 0; font-variation-settings: "slnt" 20; }
.spannung-n1  { display: inline-block; animation: n1  5s infinite ease-in-out; width: 0.3em; font-variation-settings: "slnt" 15; }
.spannung-n2  { display: inline-block; animation: n2  5s infinite ease-in-out; width: 0.3em; font-variation-settings: "slnt" 45; }
.spannung-u   { display: inline-block; animation: u   5s infinite ease-in-out; width: 0.3em; font-variation-settings: "slnt" -2; }
.spannung-n3  { display: inline-block; animation: n3  5s infinite ease-in-out; width: 0.3em; font-variation-settings: "slnt" -20; }
.spannung-g   { display: inline-block; animation: g   5s infinite ease-in-out; width: 0.3em; font-variation-settings: "slnt" 35; }



.main-front .spannung{color:var(--green)}

@keyframes kt {
  0%, 27%   { font-variation-settings: "slnt" -25; }
  45%, 68%  { font-variation-settings: "slnt" 25; }
  85%, 100% { font-variation-settings: "slnt" -25; }
}



@keyframes date {
  0%, 27%   { font-variation-settings: "slnt" 25; }
  45%, 68%  { font-variation-settings: "slnt" -25; }
  85%, 100% { font-variation-settings: "slnt" 25; }
}



.main-logo{position:absolute;left:0rem;top:2rem;font-size:3.4em;color:var(--pink);line-height:1em;animation:kt 5s infinite;letter-spacing:0.02em;font-variation-settings: "slnt" -25;overflow:visible;padding:0 5rem;z-index:3}

.main-date{position:absolute;right:0rem;padding:0 4rem;bottom:2rem;font-size:3.4em;color:var(--green);line-height:1em;animation:date 5s infinite;overflow:visible;}

.main-thalwil{position:absolute;left:1.5em;bottom:1.2em;width:42%}
.main-thalwil img{width:100%}

.logomobile{display:none}
	.logodesktop{display:inline-block}

@media (orientation:portrait){
	
	.logomobile{display:inline-block}
	.logodesktop{display:none}
    .main-spannung{width:95%;}
    .main-logo {
        position: absolute;
        padding: 0 1.5rem;
        top: calc(50vh - 3.5em);
        font-size: 6.7em;
        color: var(--green);
		        width: 40%;
        line-height: 1em;
        animation: kt 5s infinite;
        letter-spacing: 0.02em;
        font-variation-settings: "slnt" -25;
    }

    .main-date {
        position: absolute;
        padding: 0 1.5rem;
        bottom: unset;
        font-size: 6.7em;
        color: var(--pink);
        line-height: 1em;
        animation: date 5s infinite;
        top: calc(50vh + 4rem);
        text-align: right;
		width: 40%;
    }


    .main-thalwil {
        position: absolute;
        left: 2.5em;
        bottom: unset;
        width: 37%;
        top: 4em;
    }
	
	.hauptsponsoren{
		 position: absolute;
        left: 2.5em;
        width: 33%;
        bottom: 2em;
	}
	
	.hauptsponsoren img{width:100%;}



.main-front{
    clip-path: url(#crossmobile);
}


.menu-burger {
    right: 0;
    padding:0 1.3rem;
    top: 2rem;
}

.menu-stroke {
    display: inline-block;
    display: inline-block;
    width: 3.2em;
    margin-left: -1.8em;
}


.menu-close, .popup-close {
    position: absolute;
    right: 2rem;
    top: 2rem;
    width: 4.2em;
    height: 2em;
    z-index: 6;
}

.menu-menu-container li {
    display: inline-block;
    font-size: 5em;
}

	.content-inner{width:90%;margin:8em 5%;font-size:2em;line-height:1.3em}
}



/*Programm*/


.programm-image-head{width:100%;height:100%;position:absolute;background-size:100%;top:0;background-image:url("img/programm-top.jpg");background-repeat:no-repeat;background-position:top;z-index:-1;}

.programm-date{display:inline-block;margin-bottom:1vw;margin-top:1.5vw;position:relative;}

.programm-date-row{display:inline-block;position:relative;}

.programm-date-row:before{
      content: "";
      top:84%;
    height: 0.5vw;
    height:calc(var(--lw, 1lw));;
    display: block;
    background-color: #000;
    position: absolute;
    width: calc(100% + 6.5vw);
    margin-left: -6.5vw;;
}



.programm-day-container{display:inline-block;position:relative;padding:5vw 0;}

.programm-day-number {
    left: 5%;
    position: absolute;
    top: 10vw;
    width: 50%;
    z-index: 1;
    color: var(--green);
    font-size: 3em;
    top: -.13em;
    line-height: 1em;
}



.programm-day-number-down{position:absolute;top:calc(100% - 5vw);}



.programm-day-number img{max-width:100%;}

.programm-item {
    display: inline-block;
    width: 80%;
    padding: 1em 10% 0 10%;
}


.programm-item-image img{max-width:100%;}




.programm-item-text{margin:0 6.5vw;width:74vw;}

.programm-item-text-full{display:none;}
.programm-item-headline {
    color: #000;
    font-size: 1.28em;
    display: inline-block;
    line-height: 0.8em;
    margin-top: 0.2em;
    margin-bottom: 0.5rem;
}
.programm-item-sub {
    font-family: "Interphases Pro";
    letter-spacing: 0.05em;
    font-weight: 700;
    display: inline-block;
    color: #000;
    font-size: 0.5em;
    width: 80%;
    line-height: 1.2em;
}

.programm-item-dates {
    font-family: "Interphases Pro";
    letter-spacing: 0.05em;
    display: block;
    color: #000;
    font-size: 0.5em;
    width: 100%;
    line-height: 1.2em;
    margin-top: 0.7em;
}
.blue{font-weight:700;text-transform:uppercase;color:var(--blue)}


.programm-item-bottom{display:inline-block;overflow:unset;transition:height 1s;position:relative;z-index:2;margin-top:1em;margin-bottom:0.3em;}
.programm-more{font-size:0.4em;line-height:1em;background-color:var(--pink);padding:1em;border-radius:2em;color:#000;cursor:pointer;transition:background .3s ease-in-out;  font-family: "Interphases Pro";
    letter-spacing: 0.05em;font-weight:700;margin-left:-0.3em;}
.programm-more:hover{background-color:var(--green)}

.programm-slider-left, .programm-slider-right{display:none}


.head-headline {
    font-size: 2.3em;
    color: var(--green);
    font-variation-settings: "slnt" 25;
    position: relative;
    margin-top: 1em;
    display: inline-block;
       padding-left: 1em;
    padding-right: 1em;
}

.programm .head-headline{color:var(--green)}

@media(orientation:portrait){.programm-container-slider{left:0 !important;}}


@media(orientation:landscape){
  .programm-date{display:none;}
  .programm-image-head{display:none;}

  .head {
    position: fixed;
    border-bottom: 0;
    width: 100%;
    padding-bottom: 0;
    background-color:unset;
}



.programm-container {
    margin: 10vh 17.7vw;
    width: 64vw;
    overflow: scroll;
    height: 76vh;
    border-left: 0.15em solid var(--green);
     border-right: 0.15em solid var(--green);
     overflow:hidden;
}
	
	.programm-container-inner{
		    overflow: scroll;
    height: 100%;
	}

.programm-container-slider{
  position:absolute;
  width:400vw;
  transition:left 1s;
      height: 100%;
  left:0;
  top:0;
}
    .programm-day-container {
        width: 21.25vw;
        float: left;
        display: inline-block;
        height: calc(100% - 2em);
        overflow: scroll;
        border-right: 0.15em solid var(--green);
        padding: 1.9em 0 0 0;
        overflow: hidden;
    }

.programm-day-number-fixed-fadeout{opacity:1;}


.programm-item-image {
        margin-left: 0;
 
        width: 100%;
    }







.programm-item-bottom {
    width: 100%;
    position: relative;
   overflow: visible;
}


.programm-item-text-info {
    font-size: 0.8vw;
    line-height: 1vw;

}

.programm-item-info {
    width: 100%;
}

.programm-item-info-returning {
    margin: 1vh 0;
}

.programm-item-info-returning-title {
    margin-left: 6.5%;
    width: 87%;
	margin-bottom: 0vh;
}

.programm-item-info-returning-row {
    height: auto;
        margin-top: 0.3vh;
    margin-bottom: 0.3vh;
}

.programm-item-info-clock {
    width: 6.5%;
	height:1vw;
}

	.programm-item-info-clock img{
		margin-left:-0.2vw;margin-top:0.1vw;
	}
	
.programm-item-info-returning-date {
    width: 55%;
}

.programm-item-info-returning-break {
    width: 3%;
	height:1vw;
}

.programm-item-info-returning-time {
    width: 20%;
}




.programm-item-info-replace-title {
    margin-left: 6.5%;
    width: 87%;
    line-height: 1;
    margin-bottom: 0.5vh;
    margin-top: 2vh;
}

.programm-item-info-replace-row {
    height: auto;
        margin-top: 0.3vh;
    margin-bottom: 0vh;
}

.programm-item-info-clock {
    width: 6.5%;
	height:1vw;
}
	
	.programm-item-info-clock img{
		margin-left:-0.4vw;margin-top:0.1vw;
	}

.programm-item-info-replace-date {
    width: 55%;
}

.programm-item-info-replace-break {
    width: 3%;
	height:1vw;
}

.programm-item-info-replace-time {
    width: 20%;
}

.programm-item-info-place {
    display: inline-block;
    width: 100%;
    height: 2vh;
    margin-top: 1vh;
}

.programm-item-info-arrow {
    width: 6.5%;
}

	.programm-item-info-arrow img{
		margin-left:-0.4vw;margin-top:0.1vw;
	}

.programm-item-info-entry {
    margin-top: 1vh;
}


.programm-item-info-entry-title {
    margin-left: 6.5%;
    width: 86%;
    font-weight: 600;
}

.programm-item-info-entry-text {
    margin-left: 6.5%;
}


.programm-slider-left, .programm-slider-right{display:block;cursor:pointer;position:absolute;top:36vh;width:2.3vw;transition:opacity .2s;}

.programm-slider-left{left:13.5vw;text-align:right;opacity:0;}

.programm-slider-right{right:13.5vw;text-align:left;opacity:1}

.programm-slider-left img, .programm-slider-right img{max-width:100%;}

	
	.programm .content-main {
    z-index: 3;
    position: relative;
    color: #000;
    width: 100%;
    padding: 0;
}

}
#programm-popup {
  position: fixed;
  top: 0;
left:0;
  background: white;
overflow:scroll;
  z-index: 9999;
width:100vw;
	height:100vh;
}

.popup-content{color:#000;width:calc(100% - 6em);padding:4em 3em;font-size:0.5em;line-height:1.22em;}
.popup{opacity:0;transition:opacity .5s ease-in-out;pointer-events:none}
.popup-visible{opacity:1;pointer-events:auto}

.programm-az-container{display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5em;}

.programm-az .programm-item {
    display: inline-block;
    width: 100%;
    padding: 0;
}

.programm {
    line-height: 0;
    min-height: calc(100dvh);
}
@media (orientation: landscape) {
   .programm-container {
        width: 64vw;
        height: 76vh;
        margin: 1.3em 17.7vw;
        border-left: 0.15em solid var(--green);
        border-right: 0.15em solid var(--green);
        overflow: hidden;
        position: relative;
    }
	

	
}


	.programm-left{width:33%;float:left;margin-right:6%;display:inline-block}
	.programm-left img{width:100%;margin-bottom:0.4em;}
	.programm-left h2 {
    color: var(--blue);
   font-weight:400;
    font-variation-settings: "slnt" 25;
    font-size: 4.8em;
    line-height: 1em;
		margin-bottom:0em;
}
.popup-sub {
    font-family: "Interphases Pro";
    font-size: 1.6em;
    width: 80%;
	 font-weight: 500;
    display: inline-block;
    line-height: 1.2em;
}
	.programm-center{width:29%;float:left;margin-right:6%;display:inline-block;font-family:"Interphases Pro"}
.programm-center a{text-decoration:underline;color:#000}
.programm-center p:nth-child(1) {
    margin-block-start: 0em;

}
	.programm-right{width:20%;float:left;display:inline-block;font-family:"Interphases Pro"}

.programm-right h2, .programm-right h3, .programm-right h1, 
.info-container h2, .info-container h3, .info-container h1{font-family:"Interphases Pro";font-size:1.6em;line-height:1.2em;font-weight:500;margin-block-end: 0.5rem;}

.programm-right b, .programm-right strong{color:var(--blue)}

.programm-right a{color:#000;text-decoration:underline}



.content-main{
    z-index: 3;
    position: relative;
	display:inline-block;
	color:#000;width:calc(100% - 4em);padding:2.5em 2em;
}

.sponsoren-left{width:30%;margin-right:5%;margin-bottom:2em;float:left;display:inline-block;    font-size: 0.5em;
    line-height: 1.22em;
    font-family: "Interphases Pro";}
.sponsoren-right{width:30%;margin-right:25%;margin-bottom:2em;float:left;display:inline-block;    font-size: 0.5em;
    line-height: 1.22em;
    font-family: "Interphases Pro";}
.sponsoren-block{margin-bottom:0.7em;}
.sponsoren-head{font-family:"Interphases Pro";font-size:0.5em;line-height:1.2em;font-weight:700;margin-bottom:1.3em;text-transform:uppercase;}
.sponsoren-logos {
    width: 70%;
    display: flex;
    align-items: center;
}

.sponsoren-left h2, .sponsoren-right h2{    font-family: "Interphases Pro";
    letter-spacing: 0.05em;
    font-weight: 500;
    display: inline-block;
    color: rgb(0, 0, 0);
    font-size: 1.6em;
    width: 80%;
    line-height: 1.2em;}



.sponsoren-logos img{margin-right:1.8em;margin-bottom:1em;}

.sponsoren-partnerinnen{font-size:0.5em;font-family:"Interphases Pro";line-height:1.22em}

.kontakt-top{
    color: #000;
    width: calc(100% - 6em);
    font-size: 0.5em;
    line-height: 1.22em;
	font-family:"Interphases Pro";
}
.gastronomie-top{
    color: #000;
   width: 22%;
	margin-right:5%;
    letter-spacing:0.05em;
    font-size: 0.5em;
    line-height: 1.22em;
	font-family:"Interphases Pro";
	display:inline-block;
	margin-bottom:2em
}

.gastronomie-image{width:20%;margin-bottom:2em;margin-right:30%;display:inline-block;}

.gastro-block-container{float:left;width:25%;display:inline-block;}

.gastro-block{
    color: #000;
  width: 100%;
   letter-spacing:0.05em;
    font-size: 0.5em;
    line-height: 1.22em;
	font-family:"Interphases Pro";
	margin-bottom:2em;
	display:inline-block;
}

.gastro-head{font-size:1.8em;line-height:1.22em;margin-bottom:0.6em;font-weight:500}
.download-block{display:inline-block;width:100%;line-height: 1.1em;}
.menu-downloads{position:absolute;bottom:1.5em;left:2em;width:12em;font-family:"Interphases Pro";color:#000;letter-spacing:0;}
.download-icon{width:1em;display:inline-block;float:left;min-height: 0.7em;}
.download-icon img{width:0.7em;}

.download-text, .download-head{float:left;display:inline-block;line-height:1em}
.download-text a{color:#000}
.download-head{font-size:0.5em;line-height:1em}


.footer{background-color:var(--blue);position:relative;}
.footer a{color:#fff !important}
.menu-footer-menu-container{display:inline-block;}
.footer-inner{text-transform:uppercase;padding: .5em 2em;font-family:"Interphases Pro";}
.footer-inner ul{list-style:unset;margin-block-start: 0em;
    margin-block-end: 0em;
    padding-inline-start: 0px;
    unicode-bidi: isolate;}
.footer-inner li{list-style:unset;float:left;margin-right:1em;display:inline-block;}
.footer-inner a{color:#000;font-size:0.5em;line-height:1;}


	.sponsoren-content .content-main {mix-blend-mode: multiply;}


.programm-az-bottom{width:100%;margin-top:2em;margin-bottom:3em;font-weight:700}


.programm-az-bottom .menu-downloads {
    position: relative;
    bottom: unset;
    left: 0em;
    width: 12em;
    font-family: "Interphases Pro";
    color: #000;
    letter-spacing: 0;
}


.programm-az .programm-item {
    display: inline-block;
    width: 100%;
    padding: 0;
    position: relative;
    padding-bottom: 1.5em;
}

   .programm-az .programm-item-bottom {
        width: 100%;
	   bottom: 0;
        left: 0;
	   position:absolute;
    }


.info-container {
    color: #000;
    width: 100%;
    letter-spacing: 0.05em;
    font-size: 0.5em;
    line-height: 1.22em;
    font-family: "Interphases Pro";
    margin-bottom: 2em;
	width:40%;
    display: inline-block;
}


.info-container a{color:#000}
@media (orientation: portrait) {
	
	

	
	
	.gastronomie-top{
   width: 100%;
		margin-right:0;
}
	
	.gastro-block-container{width:100%}
	
	
 .head-headline {
        font-size: 7em;
        margin-top: 0.3em;
        display: inline-block;
	 margin-left:0;
        padding-left: 5%;
        line-height: 1em;

    }
	
	
	  .sponsoren-content .head-headline {

        width: 70%;
		margin-bottom:1em;
    }
	

	
	.sponsoren, .gastronomie, .kontakt{        margin: 2em 6vw 5vw 6vw;
        width: 87vw;}
	
	.programm-date {
    display: inline-block;
    margin-bottom: 2em;
    margin-top: 2.5em;
    position: relative;
    color: var(--green);
		width:100vw;
}
	
	
	.programm-date {
        display: inline-block;
        margin-bottom: 2em;
        top: 9em;
        position: fixed;
        color: var(--green);
        width: 100vw;
        left: 0;
        z-index: 9;
		transition:all .3s ease-in-out;
		      transform-origin: left top;
    }
	
	.programm-date.scroll{
        display: inline-block;
        margin-bottom: 2em;
        top: 0;
        position: fixed;
        color: var(--green);
        width: 100vw;
        left: 0;
        z-index: 9;
        transform: scale(.8);
  
    }
	
	    .programm-date-row .programm-date-date {
        width: 9vw;
        margin-left: 0vw;
        position: relative;
        display: inline-block;
        float: left;
        line-height: 1.2em;
        font-size: 6em;
        margin-left: 6vw;
			transition:color .3s ease-in-out;
			color:var(--green);
			
    }
	
	
	.programm-date-row .programm-date-date-active{color:var(--blue)}
	
	.programm-container {
    margin: 2em 6vw 0vw 6vw;
    width: 88vw;
    overflow: visible;
    line-height: 1.2em;
		margin-top: 24em;
}
	
	
.programm-day-container {
    display: inline-block;
    position: relative;
    padding: 2.5em 0 0 0;
	width:100%;
    border-top: 1em solid var(--green);
}
	
	.programm-day-number {
    left: 0;
    position: relative;
    top: 10vw;
    width: 50%;
    z-index: 1;
    color: var(--green);
    font-size: 13em;
	margin-bottom:1rem;
    top: 0;
    line-height: 1em;
}
	
	.programm-item-image img{width:100%;}
	
	.programm-item {
    display: inline-block;
    width: 100%;
    padding: 0 0 5em 0;
}
	
	
	.programm-item-headline {
    font-size: 6em;
}
	.programm-item-sub, .programm-item-dates {
    font-size: 2em;
    line-height: 1.2em;
}
	
	
	.programm-more {
    font-size: 1.6em;
    line-height: 1em;
}
	
	    .programm-more {
        font-size: 1.6em;
        line-height: 1em;
        display: inline-block;
        margin-top: 1.3em;
    }
	
	
	.programm-left, .programm-center, .programm-right{width:100%;margin-bottom:2em;}
	.popup-content {
    color: #000;
    width: calc(100% - 3em);
    padding: 6em 1.5em;
    font-size: 0.5em;
    line-height: 1.22em;
		font-size:2em;
}
.programm-left h2 {
    color: var(--blue);
    font-weight: 400;
    font-variation-settings: "slnt" 25;
    font-size: 3.5em;
    line-height: 1em;
    margin-bottom: 0em;
    margin-top: 1rem;
}
	
	.popup-sub, 
.sponsoren-left h2, .sponsoren-right h2 {
    width: 90%;
}
	
	
	.sponsoren-block{margin-bottom:0.7em;}
.sponsoren-head{font-size:2em;}
.sponsoren-logos{width:100%;font-size:4em;}
.sponsoren-logos img{margin-right:1.2em;margin-bottom:1em;}

.sponsoren-partnerinnen, .kontakt-top, .gastronomie-top, .gastro-block{font-size:2em;font-family:"Interphases Pro";line-height:1.22em}
	
	
	.menu-downloads {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    width: 12em;
    font-family: "Interphases Pro";
    color: #000;
    letter-spacing: 0;
    font-size: 3em;
}
	
	
	.footer-inner {
    text-transform: uppercase;
    padding: .5rem 1rem;
    font-family: "Interphases Pro";
    font-size: 2em;
    line-height: 1.2em;
}
	
	.main-content {
    line-height: 0;
    min-height: calc(100dvh - 4.8em);
}
	
	
		.home {

    min-height: calc(100dvh - 1.2em);
}
	
	.main-back{position:fixed;}
	
.sponsoren-right,	.sponsoren-left{width:100%;margin-right:0;font-size:2em; margin: 2em 6vw 0vw 6vw;
    width: 88vw;}
.gastronomie-image{width:100%;margin-bottom:2em;margin-right:0%}
	
.sponsoren-logos {
    display: inline-block;
}
	
	.content-main{padding:0;width:100%}
	
	
	.programm-az-container{display:inline-block;}
	.programm-az-container{width:100%; margin: 2em 6vw 0vw 6vw;
    width: 88vw;}
	
	.programm-az .programm-item{margin-bottom:4em;}
	
	
   .programm-az .programm-item-bottom {
        width: 100%;
        position: relative;
        bottom: 0;
        left: 0;
    }
	
	
	.programm-az-bottom {
    width: 100%;
    margin-top: 2em;
    margin-bottom: 3em;
    font-weight: 700;
    padding: 0 6vw;
    width: 88vw;
}
	.info-container{width:88%;padding:2em 6vw 0 6vw;font-size:2em;line-height:}
	
	}