/* Trial & Error 2025 - Stylesheet */

/* ---------- Custom Fonts ---------- */

/* PP Right Grotesk Spatial - Black */
@font-face {
  font-family: 'PP Right Grotesk Spatial';
  src: url('fonts/PPRightGrotesk-SpatialBlack.woff2') format('woff2');
  font-weight: 900; /* Black */
  font-style: normal;
  font-display: swap;
}

/* Suisse Intl - Bold */
@font-face {
  font-family: 'SuisseIntl';
  src: url('fonts/SuisseIntl-Bold-WebM.woff') format('woff');
  font-weight: 700; /* Bold */
  font-style: normal;
  font-display: swap;
}

/* ---------- CSS Variables ---------- */

    :root {
        /* Farben */
        --trial-orange: #FE542C;
        --trial-purple: #57495E;
        --trial-white: #FFFFFF;
        --trial-gray: #C9C9C9;
    
        /* Typografie */
        --trial-font: "PP Right Grotesk Spatial", sans-serif;
        --trial-font2: "SuisseIntl", sans-serif;
    
        /* Typo-Sizes (Mobile First) */
        /*--typo-h1: 4.5rem;   !* ~32px *!*/
        /*--typo-h2: 1.5rem; !* ~24px *!*/
        /*--typo-h3: 1.25rem;!* ~20px *!*/
        /*--typo-body: 1rem; !* ~16px *!*/
        /*--typo-small: 0.875rem; !* ~14px *!*/

	    --typo-h1: clamp(3rem, 4.5vw, 4.75rem);      /* ~48px bis ~76px */
	    --typo-h2: clamp(1.125rem, 2.5vw, 2rem);    /* ~18px bis ~32px */
	    --typo-h3: clamp(1rem, 2vw, 1.25rem);       /* ~16px bis ~20px */
	    --typo-body: clamp(0.875rem, 1.5vw, 1.125rem); /* ~14px bis ~18px */
	    --typo-small: clamp(0.75rem, 1.2vw, 0.875rem); /* ~12px bis ~14px */

        /* Heights */
        --height-header: 180px;
        --height-footer: calc(100vh / 20);
        --height-main: calc(100vh - var(--height-header) - var(--height-footer) - 1rem);
    }

/* ---------- Color Styles Gutenberg ---------- */
.has-trial-white-color {
	color: var(--trial-white) !important;
}
.has-trial-purple-color {
	color: var( --trial-purple) !important;
}
.has-trial-orange-color {
	color: var(--trial-orange) !important;
}
.has-trial-gray-color {
	color: var(--trial-gray) !important;
}

.has-trial-white-background-color {
	background-color: var(--trial-white) !important;
}
.has-trial-purple-background-color {
	background-color: var( --trial-purple) !important;
}
.has-trial-orange-background-color {
	background-color: var(--trial-orange) !important;
}
.has-trial-gray-background-color {
	background-color: var(--trial-gray) !important;
}


/*  ABOUT PAGE  */
main.about-page-content .about-cap {
	z-index: 100;
	> .wp-block-columns {
		margin-bottom: 0; gap:0.5rem}
	h3.has-background.has-trial-purple-background-color {
		padding: 0 4px !important;
		font-size: clamp(0.5rem, 1.1rem, 1.5rem);
		margin: 0;
	}
	p {
		line-height: 1;
		margin-bottom: 1.2rem;
		margin-top: 1.2rem;
	}
}
/* STANDARD */
p { font-size: clamp(0.75rem, 0.2095rem + 2.1622vw, 1.75rem); }


/* ENDE von mike*/

/* ---------- Responsive Anpassungen ---------- */
    
    /* Mobile bis 767px */
    @media (max-width: 767px) {
      :root {
        --typo-h1: 13vw;
      }
      .page-template-page-maintenance .menu-item-556 {
        width: 100%;
      }
      main.single-workshop .program-info-desktop {
        padding-right: 0;
        width: 100%;
      }
      main.single-workshop .program-entry-content-bottom {
        width: 100%;
        margin: 0;
      }
      main.single-workshop .program-entry-day {
        display: none;
      }
      main.single-workshop .program-entry-content .program-entry-content-top {
        margin-bottom: 0.5rem;
      }
      main.single-workshop .program-entry-content {
        flex-direction: column-reverse;
        height: 100%;
        justify-content: space-between;
      }
      .single-workshop .program-entry-image {
        flex: 1 1 auto;
        overflow: hidden; /* Bild darf beschnitten werden */
        margin-top: calc(var(--typo-h2) * 3);
      }
	    body .main-navigation ul li a, body .footer-menu ul li a {
		    /* @mike */
		    line-height: 1.4;
	    }
	    body .program-day-title {
		    background-color: var(--trial-purple);
	    }
      .workshop-description-scroll {
        display: none;
      }
      .site-branding {
        padding-bottom: 0!important;
      }

    }

    /* Tablets ab 768px */
    @media (min-width: 768px) {
        :root {
            /*--typo-h1: 4.5rem;   !* ~40px *!*/
            /*--typo-h2: 2rem;     !* ~32px *!*/
            /*--typo-h3: 1.5rem;   !* ~24px *!*/
            /*--typo-body: 1.5rem; !* ~18px *!*/
            /*--typo-small: 1rem;  !* ~16px *!*/
        }
        .main-navigation {
          width: 50%;
        }
        .workshop-description-mobile {
          display: none;
        }

        .workshop-description-scroll {
          overflow: hidden;
          display: flex;
          flex-direction: column;
          height: calc(var(--height-main) - var(--height-header));
        }

        h1.site-title {
          max-width: 500px;
      }
      h2.program-day-title {
        height: var(--typo-h2);
        font-size: var(--typo-h3);
	      line-height: 1.7;
    }
    .program-entry-content-top h3.program-entry-title {
      font-size: calc(var(--typo-h2));
      line-height: calc(var(--typo-h2));
    }
    .about-page .program-entry-content-top h3.program-entry-title {
      font-size: calc(var(--typo-h1));
      line-height: calc(var(--typo-h1));
    }
    .program-entry-time, .program-entry-location, .program-entry-type {
              font-size: var(--typo-small);
        line-height: var(--typo-small) !important;
        min-height: var(--typo-h3) !important;
        padding: 0.3rem 0.5rem !important;
    }
    .program-entry-location-wrap {
      margin-bottom: -0.2rem;
  }
  section.program-day {
    height: 100%;
    overflow-y: scroll;
}
section.program-day::-webkit-scrollbar {
  display: none;
}
    span.program-entry-type {
      top: calc(var(--typo-h3) - var(--typo-h3) * 2.2)!important;
    }
    .program-entry-content-bottom {
      min-height: calc(var(--typo-h3) * 2)!important;
  }
      header#masthead {
        display: flex;
        justify-content: space-between;
    }
    body:not([class*="page-program"]) nav#site-navigation {
      width: 50%;
      padding: 0.5rem;
      padding-left: 0.25rem;
	    /* @mike */
	    align-self: start;
	    align-content: center;
	    position: relative;
	    /*top: 50px;
	    @media (min-width: 1280px) and (max-width: 1439px) {
	    	top: 79px;
	    }*/

  }
        .program-all {
          flex-direction: row!important;
          flex-wrap: wrap;       /* Falls nicht genau 4 Tage, Zeilenumbruch */
          gap: 0.5rem;             /* Abstand zwischen Tagen */
      }
  
      section.program-day {
          flex: 1 1 calc(25% - 1rem)!important;
          min-height: auto;            /* darf automatisch wachsen */
      }
  
      section.program-day .program-entries {
          max-height: none;  /* alles expanded */
          overflow-y: scroll;
      }
  
      section.program-day {
          /* Alle Tage permanent expanded */
          flex: 1 1 auto;
      }
  
      .program-day-title {
          cursor: default;  /* kein klick nötig */
      }
      .program-day.expanded .program-entries {
        max-height: fit-content!important;
      }

        /* Program-All auf 2 Spalten */
        .single-workshop .program-all {
          display: flex;
          flex-direction: row;
          height: 100%;
        }
      
        /* Linke Seite (Infos + Text) */
        .single-workshop .workshop-data,
        .single-workshop .workshop-description {
          display: flex;
          flex-direction: column;
        }
      
        /* Rechte Seite (Bild) */
        .single-workshop .program-entry {
          display: flex;
          flex-direction: column;
          height: 100%;
        }
      
        .single-workshop .program-entry-image {
          flex: 1 1 auto;
          width: 50%;
          height: 100%;
        }
      
        .single-workshop .program-entry-image img {
          object-fit: cover;
          width: 100%;
          height: 100%;
        }
      
        /* Content (Titel + Badges) NICHT mehr overlay */
        .single-workshop .program-entry-content {
          position: static;
          background: transparent;
          width: 100%;
        }
      
        /* Titel links oben */
        .single-workshop .program-entry-content-top {
          margin-bottom: 1rem;
        }
        .single-workshop h3.program-entry-title {
          text-align: left;
          font-size: var(--typo-h2);
          line-height: 1.2;
        }
      
        /* Badges in einer Reihe */
        .single-workshop .program-entry-content-bottom {
          display: flex;
          flex-wrap: wrap;
          gap: 0.5rem;
          min-height: auto;
          width: 100%;
          margin: 0;
        }
      
        .single-workshop .program-entry-time,
        .single-workshop .program-entry-location,
        .single-workshop .program-entry-type {
          font-size: var(--typo-small);
          line-height: 1.4;
          min-height: auto;
        }
      
        /* Beschreibungsteil scrollfähig neben Bild */
        .single-workshop .workshop-description {
          padding: 0 1rem;
          overflow-y: scroll;
        }
        .single-workshop .workshop-description::-webkit-scrollbar {
            display: none;
        }
        main.single-workshop {
          margin-top: calc(var(--height-header) - var(--height-header) * 2);
        }

        .single-workshop .program-day-title {
          background-color: var(--trial-purple);
          color: var(--trial-white);
          position: absolute;
        }

      #page footer {
        flex-direction: row;
        margin-bottom: 0;
      }
      #page footer div {
        width: 50%;
      }
      #page footer .footer-menu {
	      /* @mike */
        padding-left: 0.25rem;
      }
      .single-workshop .program-all,
      .single-workshop .workshop-data {
        width: 100%;
        max-width: 100%;
      }

      .single-workshop h2.program-day-title {
        width: calc(50% / 3);
      }
      
      .single-workshop .program-entry-content-top h3.program-entry-title {
        /*font-size: calc(var(--typo-h1))!important;*/
        font-size: calc(var(--typo-h1)*.6)!important; /* @mike */
        color: var(--trial-purple);
        padding-left: 3.6rem;
      }
      
      .single-workshop .program-entry-content-top h3.program-entry-title div {
        background-color: transparent;
        border: 0.15rem solid var(--trial-purple)!important;
      }
      
      .single-workshop .program-entry-content-top span.program-entry-type {
        top: calc(var(--height-header));
        left: 0;
      }
      
      .single-workshop .program-entry-image {
        position: absolute;
        right: 0;
        padding-left: 0.25rem;
      }
      
      .single-workshop .program-entry-content {
        width: 50%;
        margin-top: calc(var(--height-header));
      }
      
      .single-workshop .program-day-title {
        position: absolute;
        top: calc(var(--height-header) * 1.75);
      }
      
      .single-workshop .workshop-data {
        height: 100%;
      }

      .single-workshop .workshop-data .program-entry {
        margin-bottom: 0;
      }

/* Grundsätzliches Ausblenden alter Elemente */
.single-workshop .program-entry-type {
  display: none; /* ursprüngliche Typ-Anzeige */
}

.single-workshop .program-entry-location-wrap,
.single-workshop .program-entry-time-wrap,
.single-workshop .program-day-title {
  display: none; /* alte Location & Zeit */
}

.program-all .program-day.expanded .program-day-title,
.program-all .program-day .program-day-title:hover {
  background-color: var(--trial-white);
  color: var(--trial-orange);
}

footer .footer-partners {
  justify-content: space-around;
}
      
main.about-page {
  flex-direction: row;
  margin-top: calc(var(--height-header) - var(--height-header) * 1.75);
}

main.about-page div#workshop-rotator {
  position: relative;
  width: 100%;
}
main.about-page .program-img {
  height: 100%;
  width: 50%;
  margin-left: -0.9rem;
}
main.about-page .program-img img {
  object-fit: cover;
	object-position: center top;
  width: 100%;
  height: 100%;
}
.about-page #workshop-rotator .program-entry {
  flex-direction: row-reverse!important;
  align-items: flex-end;
}
.about-page .program-entry {
  height: 100%;
}
.about-page .program-entry .program-img {
  margin-bottom: 0;
}
main.about-page #workshop-rotator .program-entry {
  padding-bottom: 0;
  padding-left: 0.5rem;
}
#workshop-rotator h3.program-entry-title {
  height: fit-content;
  width: 50%;
  padding-right: 0.9rem;
}

main.about-page .about-cap {
  position: absolute;
  width: 50%;
}
/* @mike */
main.about-page-content .about-cap {
  margin-top: var(--height-header);
	width: 50%;
	z-index: 100;
  height: calc(var(--height-main) - var(--typo-h2));
	/* @mike */
	overflow-y: scroll;
	padding-right: 0.75rem;
	h3.has-background.has-trial-purple-background-color {
		padding: 0 4px !important;
		font-size: clamp(0.5rem, 1.1rem, 1.5rem);
		margin-top: 3rem;
	}
	p {
		font-size: clamp(0.75rem, 0.2095rem + 2.1622vw, 1.5rem);
		line-height: 1;
		margin-bottom: 1.2rem;
		margin-top: 1.2rem;
	}
}
  main.about-page-content .about-cap .about_textarea p:first-child {
    margin-top: 0;
  }
main.about-page-content #workshop-rotator h3 {

	color: var(--trial-white) !important;
	right: 0% !important;
	left: inherit !important;
	top: inherit !important;
	bottom: 0 !important;
}

main.about-page .about-page #workshop-rotator .program-entry {
  height: 100%;
}


.program-all .program-day:last-child .program-day-title {
  margin-bottom: 0.5rem
}
.program-all section.program-day.expanded {
  padding-bottom: 0;
}
      
    }
    
    /* Desktop ab 1024px */
    @media (min-width: 1024px) {
        :root {

        }
    }
    
    /* Large Desktop ab 1440px */
    @media (min-width: 1440px) {
        :root {

        }
    }

/* ---------- Main Style ---------- */

main#primary.program-page {
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}

main#primary.program-page::-webkit-scrollbar {
    display: none;
}
  
    .post, .page {
        margin: 0;
    }

    div#page {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }

@media only screen and (max-width: 767px) {
	body main {
		min-height: auto;
		div#page {
			height: 100dvh;
		}
	}
	body footer {
		background-color: var(--trial-orange);
		flex-direction: column-reverse;
		.footer-partners {
			margin-top: 0.3rem;
		}
		.footer-menu {
			margin-top: -0.5rem;
		}
		margin-bottom: env(safe-area-inset-bottom);
		/*padding: 1em 1em calc(1em + env(safe-area-inset-bottom));*/
		/*position: sticky;*/
	}
	main.about-page-content .about-cap {
		z-index: 100;
		h3.has-background.has-trial-purple-background-color {
			padding: 0 !important;
		}
	}
	/* @mike PFEILE */
	.program-day {
		h2.program-day-title {
			color: var(--trial-white);
			position: relative;
			&::before, &::after {
				content: "";
				position: absolute;
				top: 3px;
				width: 20px;
				height: 20px;
				background-repeat: no-repeat;
			}
			&::before {
				left: 8px;
				background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNiAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzE4XzEyODMpIj4KPHBhdGggZD0iTTEwLjMyMTkgNC45NjM5MWUtMDdMMTAuMzIxOSA2LjQ4Mzk4TDE2IDYuNDgzOThMMTYgMTEuNDk2MUwxMC4zMjIgMTEuNDk2MUwxMC4zMjIgMThMLTcuNDk0MjFlLTA3IDkuNDI3NjNMLTguMjI0NWUtMDcgOC41OTIyN0wxMC4zMjE5IDAuMDE5ODkwM0wxMC4zMjE5IDQuOTYzOTFlLTA3WiIgZmlsbD0id2hpdGUiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8xOF8xMjgzIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE4IiBmaWxsPSJ3aGl0ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTYgMTgpIHJvdGF0ZSgxODApIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==');
				/*@media (pointer: coarse) {*/
				/*	filter: invert(.8);*/
				/*}*/
			}
			&::after {
				right: 4px;
				background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNiAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzE4XzExOTUpIj4KPHBhdGggZD0iTTUuNjc4MDUgMThWMTEuNTE2SDBWNi41MDM4N0g1LjY3ODA1VjBMMTYgOC41NzIzOFY5LjQwNzczTDUuNjc4MDUgMTcuOTgwMVYxOFoiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMThfMTE5NSI+CjxyZWN0IHdpZHRoPSIxNiIgaGVpZ2h0PSIxOCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K');
				/*@media (pointer: coarse) {*/
				/*	filter: invert(.8);*/
				/*}*/
			}
		}
		&:first-child {
			h2.program-day-title::before {
				content: none;
			}
		}
		&:last-child {
			h2.program-day-title::after {
				content: none;
			}
		}
	}
	.single-workshop .program-entry-image {
		margin-top: calc(var(--typo-h2) * 3.75);
	}
	.single-workshop .program-info-desktop > div:last-child span {
		line-height: 0.9;
	}
  .page-template-page-program #site-navigation button {
    margin-top: 0.3rem!important;
    padding: 0.2em 1em 0.4em!important;
}
}
/* iOS only Retina @mike */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
	div#page {
		height: 100dvh;
	}
	body main {
	}
	body footer {

	}

}

.page-template-page-about .program-entry-content-top {
    position: absolute;
    bottom: 20px;
    width: min-content;
  }

.about_lines_wrap {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    text-align: center;
    max-height: calc(var(--typo-h2) * 3);
}

.about_lines {
    width: 50%;
    background-color: var(--trial-purple);
    height: -webkit-fill-available;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: var(--typo-h3);
    padding: 0.5rem;
}

.about_lines h3 {
    font-size: var(--typo-h3);
    color: var(--trial-white);
}

.about_textarea button,
.page-template-page-program #site-navigation button {
      border: none;
    padding: 0.4em 1em 0.4em;
    text-align: center;
    background-color: var(--trial-white);
    color: var(--trial-orange);
    font-family: var(--trial-font);
    width: 100%;
    border-radius: 0;
    text-transform: uppercase;
    font-size: var(--typo-h3);
}
.page-template-page-program #site-navigation button {
    height: var(--typo-h2);
    margin-top: 0.5rem;
    font-size: var(--typo-h4);
}
.about_textarea button:hover,
.page-template-page-program #site-navigation button:hover {
    background-color: var(--trial-purple);
    color: var(--trial-white);
}
.about_textarea p {
  color: var(--trial-purple);
}

.about_textarea_inner .collabs {
  font-size: clamp(0.75rem, 0.2095rem + 2.1622vw, 1.5rem);
  line-height: 1;
}

.about_textarea_inner .collabs .collab-separator {
  color: var(--trial-purple);
  margin: 0.125rem;
}


    body {
        font-family: var(--trial-font);
        font-size: var(--typo-body);
        color: var(--trial-white);
        background-color: var(--trial-orange);
        line-height: 1.5;
    }
    
    h1 {
        font-size: var(--typo-h1);
        color: var(--trial-white);
        margin: 0.5rem 0;
        line-height: calc(var(--typo-h1) / 2);
        margin-left: 0.5rem;
        margin-top: 0.5rem;
    }
    
    h2 {
        font-size: var(--typo-h2);
        color: var(--trial-white);
    }
    
    h3 {
        font-size: var(--typo-h3);
        color: var(--trial-purple);
    }
    
    p {
        font-size: var(--typo-body);
        color: var(--trial-gray);
    }
    header {
        flex: 0 0 auto;
        z-index: 1;
    }
    footer {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin: 0.5rem;
        margin-bottom: calc(var(--height-footer) - var(--height-footer) * 2);
	    min-height: var(--height-footer); /*@mike*/
	    z-index: 100; /*@mike*/
    }
    main {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      min-height: 0;
      margin: 0 0.5rem;
    }

/* ---------- Header Style ---------- */

/* 1. H1 site-title in uppercase und trial-purple */
.site-branding {
    display: flex;
    flex-direction: column-reverse;
    padding: 0.5rem;
}
.site-branding h1 span.line {
  z-index: 95;
      padding: 0.55rem;
}
.site-branding h1 div {
  z-index: 99;
}
.site-title a {
    text-transform: uppercase;
    color: var(--trial-purple);
    text-decoration: none;
}
  
  /* 2. p site-description */
  .site-description {
    color: var(--trial-white);
    background-color: var(--trial-purple);
    padding: 0 0.5rem;
    height: var(--typo-h2);
    width: max-content;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    margin: 0;
}
  
  /* 3. Navigation immer als Liste (Button weg) */
  .main-navigation {
    padding: 0.5rem;
  }

  .menu-toggle {
    display: none !important;
  }
  .main-navigation ul, .footer-menu ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  
  /* 4. Nav li Styling */
  .main-navigation ul li, .footer-menu ul li {
    width: 32.5%;
    text-align: center;
    background-color: var(--trial-white);
    color: var(--trial-orange);
  }
  /* Footer Menu now has 4 items (Privacy/Imprint/Social/T&E 2026), not 3 like
     the header nav - give it its own width so all 4 fit in one row instead
     of wrapping the 4th one to a second line. */
  .footer-menu ul li {
    width: 24%;
  }
  .main-navigation ul li:hover, .footer-menu ul li:hover {
    background-color: var(--trial-purple);
    color: var(--trial-white);
  }
  .main-navigation ul li a, .footer-menu ul li a {
    display: block;
    height: var(--typo-h2);
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    color: inherit;
	  /* @mike */
	  line-height: 1.8;
  }
  
  /* 5. Active state */
  .main-navigation ul li.current-menu-item {
    background-color: var(--trial-purple);
    color: var(--trial-white);
  }
  
/* 6 + 7. Program-Day-Titel */

.program-all {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  height: 100%;
  min-height: 0;
}

section.program-day {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;       /* standard: nur Titel hoch */
  transition: flex 0.3s ease;
  width: 100%;
  scroll-snap-align: start;
}

section.program-day.expanded {
  flex: 1 1 auto;
  min-height: 0;        /* darf schrumpfen */
  padding-bottom: 0.5rem;
}

h2.program-day-title {
  font-size: var(--typo-h3);
}

.program-day-title {
  flex: 0 0 auto;
  width: 100%;
  text-align: center;
  cursor: pointer;
  margin-bottom: 0.5rem;
  margin-top: 0;
  color: var(--trial-orange);
  background-color: var(--trial-white);
}

.program-day .program-day-title:hover, .single-workshop .program-day-title {
  background-color: var(--trial-purple);
  color: var(--trial-white);
}
.program-day.expanded .program-day-title {
  background-color: var(--trial-purple);
  color: var(--trial-white);
}

.single-workshop .program-info-desktop .program-entry-type {
  display: block;
}

/* Desktop-Infos sichtbar machen */
.single-workshop .program-info-desktop {
  display: block;
  width: 100%;
  padding-right: 0.25rem;
}

.single-workshop .program-info-desktop div {
  height: var(--typo-h2);

}
.single-workshop .program-info-desktop div span {
  background-color: var(--trial-purple);
}
.single-workshop .program-entry-time, .single-workshop .program-entry-location, .single-workshop .program-entry-type {
  background-color: var(--trial-purple);
}
.single-workshop .program-info-desktop div span {
  font-size: var(--typo-small);
  color: var(--trial-white);
}

/* Location Kasten */
.single-workshop .program-info-desktop > div:first-child {
  width: 100%;
  background-color: var(--trial-purple);
  padding: 1rem;
  box-sizing: border-box;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}
.single-workshop .program-info-desktop > div:first-child:hover {
  background-color: var(--trial-white);
  color: var(--trial-orange);
}

.single-workshop .program-info-desktop > div:first-child a {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* 3-Infos Kasten */
.single-workshop .program-info-desktop > div:last-child {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  margin-bottom: 0.5rem;
}

.single-workshop .program-info-desktop > div:last-child span {
  flex: 1 1 0;
  padding: 0.5rem 0rem 0.5rem 0rem;
  text-align: center;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Container Verhalten */
.program-entries {
  flex: 1 1 auto;          /* kein Platz reservieren */
  transition: max-height 0.4s ease;
  overflow-y: auto; /* wichtig: auto, nicht scroll, damit Browser optimiert */
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.program-day.expanded .program-entries {
  max-height: calc(100vh - var(--height-header) - var(--height-footer) - (4 * 3rem)); 
    overflow-y: auto;
}

.program-entries::-webkit-scrollbar {
  display: none;
}

.program-day a:last-child .program-entry {
  margin-bottom: 0;
}

article.program-entry {
  max-height: 100%;
  scroll-snap-align: start;
}

/* 8. Program-Entry-Titel */
.program-entry-title a {
  text-transform: uppercase;
  color: var(--trial-white);
  margin: 0.5em 0;
  text-decoration: none;
}

.single-workshop .program-all {
  display: block;
  overflow-y: scroll;
}

.single-workshop .program-all::-webkit-scrollbar {
  display: none;
}


/* 9. Zeit und Location */
body:not(.single) .program-entry-time,
body:not(.single) .program-entry-location,
body:not(.single) .program-entry-type {
  background-color: var(--trial-white);
  color: var(--trial-orange);
  /*display: inline-block;*/
  display: inline; /* @mike */
  box-shadow: 4px -1px 0 #fff, -4px 0 0 #fff,
              4px 1px 0 #fff, -4px 0 0 #fff,
              4px 0 0 #fff, -4px -1px 0 #fff,
              4px 0 0 #fff, -4px 1px 0 #fff;
  padding: 0.1rem 0.5rem;
  margin: 0;
  width: fit-content;
  /*line-height: var(--typo-h3);*/
  min-height: var(--typo-h3);
}
.program-entry-location a {
  color: var(--trial-orange);
}
.single-workshop .program-entry-location:hover,
.single-workshop .program-entry-location:hover a {
  color: var(--trial-white);
  background-color: var(--trial-purple);
}
p.program-entry-time {
  margin-right: -10%;
}

.footer-partners {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--typo-h2);
  margin-bottom: 0.5rem;
}

.footer-partners img {
  height: 100%;
  max-width: 100%;
  filter: brightness(0);
}

.footer-partners a {
  height: 100%;
  filter: invert(92%) sepia(0%) saturate(0%) hue-rotate(183deg) brightness(93%) contrast(81%);
}

.footer-partners a:hover {
  filter: invert(27%) sepia(6%) saturate(1906%) hue-rotate(236deg) brightness(94%) contrast(80%);
}

.program-entry {
  position: relative; /* wichtig, damit das Content-Overlay sich auf das Bild bezieht */
  overflow: hidden;   /* verhindert, dass Content aus dem Container herausragt */
  margin-bottom: 0.5rem;
}

h3.program-entry-title {
  text-transform: uppercase;
  color: var(--trial-white);
  font-size: calc(var(--typo-h3) * 1.5);
  line-height: calc(var(--typo-h2) * 1.5);
  text-align: end;
  margin: 0rem 0.7rem;
}

h3 span.line {
  height: var(--typo-h2);
}

.program-entry-image img {
  display: block;
  width: 100%;
  height: auto;
}

.program-img {
  margin-bottom: 0.25rem;
}

.program-entry-content {
  position: absolute; /* über das Bild legen */
  bottom: 0;
  right: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Text unten auf dem Bild */
  box-sizing: border-box;
}

.program-entry-content a {
  text-decoration: none;
}

h1 span {
  display: inline-block;
}

h1 .line {
  padding: 0.65rem;
}

.workshop-description, 
.workshop-description-mobile {
  font-family: 'SuisseIntl';
  font-weight: bold;
}
.workshop-description h2,
.workshop-description-mobile h2 {
  margin-bottom: 1rem;
  line-height: var(--typo-h2);
}
.workshop-description p,
.workshop-description-mobile p {
  line-height: var(--typo-h3);
  color: var(--trial-white);
}

.single-workshop article {
  position: relative;
  height: inherit;
}

.workshop-data {
  flex: 0 0 55%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden; /* Kein Scroll in diesem Bereich */
}

.workshop-data .program-entry {
  display: flex;
  flex: 1;
  min-height: 0;
}

.program-entry-image {
  flex: 1 1 auto;
  overflow: hidden; /* Bild darf beschnitten werden */
}

.program-entry-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Bild beschneiden statt scrollen */
  display: block;
  object-position: top;
}

.program-entry-content {
  flex: 0 0 auto; /* nimmt nur so viel Platz wie nötig */
}

.workshop-description {
  flex: 1 1 45%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.workshop-description-text {
  flex: 1 1 auto;
}

.workshop-description-text a,
.workshop-description-text a:visited {
  color: var(--trial-purple);
  text-decoration: none;
}
.workshop-description-text a:hover {
  text-decoration: underline;
}

.workshop-description .workshop-description-text::-webkit-scrollbar {
  display: none;
}

.program-entry-content-bottom {
  position: relative; /* übergeordnetes div als Bezugspunkt */
  width: 75%;
  min-height: calc(var(--typo-h2) * 2);
  margin: 0 0 0.4rem 0.4rem;
}

.program-entry-time-wrap {
  display: flex;
  justify-content: flex-end;
}

span.program-entry-type {
  top: calc(var(--typo-h2) - var(--typo-h2) * 2.2);
  text-transform: uppercase;
}

span.line {
  z-index: 101;
  position: relative;
}

.program-entry-title span.line {
    line-height: 1.15;
}

h3.program-entry-title div {
  z-index: 100;
  background-color: var(--trial-orange);
}

#workshop-rotator h3.program-entry-title {
  color: var(--trial-purple);
  right: 0.02rem;
  top: -0.5rem;
}
#workshop-rotator h3 div {
  border: 0.12rem solid var(--trial-white)!important;
}

.about-page h3.program-entry-title.cap:nth-of-type(1) {
  text-align: center;
  padding-right: 20%;
}

.about-page h3.program-entry-title.cap:nth-of-type(2) {
  text-align: end;
}

.about-page h3.program-entry-title.cap:nth-of-type(3) {
  text-align: start;
}

#workshop-rotator .program-entry {
  padding-bottom: 0.5rem;
}

.about-page h3.program-entry-title div {
  background-color: var(--trial-orange);
}

.about-page h3.program-entry-title.cap {
  line-height: calc(var(--typo-h2) * 1.5);
}
.about-page h3.program-entry-title.cap span.line {
width: inherit!important;
}

.about-page h3.program-entry-title.cap:last-child {
  margin-bottom: 0;
}

.about-cap {
  margin-bottom: 0.5rem;
}

.about-cap::-webkit-scrollbar {
  display: none;
}

main.maintenance-page {
  margin: 10% auto;
}

main.maintenance-page h3.program-entry-title.cap:first-child {
  margin-right: -5%;
}

main.maintenance-page h3.program-entry-title.cap:nth-of-type(2) {
  margin-left: -10%;
  padding-right: 10%;
}

h4.more-info {
  color: var(--trial-purple);
  text-align: center;
  font-family: var(--trial-font2);
}

.page-template-page-maintenance .menu-item-555,
.page-template-page-maintenance .menu-item-557 {
  display: none;
}


.page-template-page-maintenance .main-navigation ul {
  justify-content: flex-end;
}

main.maintenance-page h3.program-entry-title div {
  background-color: transparent;
}

.page-template-default article {
  height: 100%;
  overflow-y: scroll;
  max-width: 1200px;
  padding-top: 2rem;
  width: 100%;
}

article.post-551,
article.post-553 {
  max-width: 1090px;
}

.page-template-default article::-webkit-scrollbar {
  display: none;
}

.page-template-default article .line {
  text-align: left!important;
}

.page-template-default article p {
  font-family: var(--trial-font2);
}


.about-page #workshop-rotator .program-entry {
  display: flex;
  flex-direction: column;
}

.program-img img {
  width: 100%;
}

.footer-menu ul li {
  background-color: #C9C9C9;
}



/*  PW SEITE  */

/* Wrapper */
.pw-wrapper {
  display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      background: var(--trial-orange);
      position: absolute;
      width: 100vw;
  
}

/* Formular */
.pw-form {
  text-align: center;
  font-family: sans-serif;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.pw-form label {
  display: block;
  font-weight: bold;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

/* Input-Wrap mit Handles */
.pw-input-wrap {
  position: relative;
  display: inline-block;
  margin: 0 auto;
}

.pw-input-wrap input[type="password"] {
  padding: 0.8rem 1rem;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  border: 2px solid #fff;
  border-radius: 0; /* keine Abrundung */
  background: transparent;
  color: #fff;
  width: 260px;
  box-sizing: border-box;
}

/* Handles */
.pw-input-wrap .handle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #fff;
}

.pw-input-wrap .top-left     { top: -4px; left: -4px; }
.pw-input-wrap .top-center   { top: -4px; left: 50%; transform: translateX(-50%); }
.pw-input-wrap .top-right    { top: -4px; right: -4px; }
.pw-input-wrap .middle-left  { top: 50%; left: -4px; transform: translateY(-50%); }
.pw-input-wrap .middle-right { top: 50%; right: -4px; transform: translateY(-50%); }
.pw-input-wrap .bottom-left  { bottom: -4px; left: -4px; }
.pw-input-wrap .bottom-center{ bottom: -4px; left: 50%; transform: translateX(-50%); }
.pw-input-wrap .bottom-right { bottom: -4px; right: -4px; }

/* Submit-Button */
.pw-form input[type="submit"] {
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  border: none;
  background: #fff;
  color: var(--trial-orange);
  font-weight: bold;
  cursor: pointer;
  border-radius: 0;
}
.pw-form input[type="submit"]:hover {
  background: #eee;
}