/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Reset
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}eft
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Settings & Variables
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/

:root {
    /* Stop iOS Safari from increasing the default font-size when you switch a website from portrait to landscape */
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Position settings */
    position: relative;
    min-height: 100%;
    /* Font settings */
    font-family: system-ui, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    text-rendering: optimizeSpeed;
    line-height: 1.5;
    
    /* Colors */
    --c-black: rgb(8, 8, 8);
    --c-white: rgb(255, 255, 255);

    --c-primary: rgb(255, 255, 255); /* Primäre Textfarbe */
    
    --c-background: rgb(255, 0, 176); /* Primärer Hintergund */
    --c-background-header: rgb(214, 214, 214); /* Hintergrund Header */
    --c-background-logo: rgb(134, 74, 38); /* Hintergund Logos */
    
    /* Spacing */
    --headline-vw-scale: calc(5vw);
    --spacing-base: 8px;

    /* Sizes */
    --rotation: 120deg;
    
     --transition-duration: 0.5s;
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Fonts Import
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/

@font-face {
    font-family: 'Switzer Regular';
    src: url(/fonts/Switzer-Regular.woff2) format('woff2'),
        url(/fonts/Switzer-Regular.woff) format('woff'),
        url(/fonts/Switzer-Regular.ttf ) format('truetype');
        font-weight: 400;
        font-style: normal;
    }
    @font-face {
    font-family: 'Switzer Medium';
    src: url(/fonts/Switzer-Medium.woff2) format('woff2'),
        url(/fonts/Switzer-Medium.woff) format('woff'),
        url(/fonts/Switzer-Medium.ttf) format('truetype');
        font-weight: 500;
        font-style: normal;
    }
    @font-face {
    font-family: 'Switzer SemiBold';
    src: url(/fonts/Switzer-Semibold.woff2) format('woff2'),
        url(/fonts/Switzer-Semibold.woff) format('woff'),
        url(/fonts/Switzer-Semibold.ttf) format('truetype');
        font-weight: 600;
        font-style: normal;
    }
    @font-face {
    font-family: 'Zodiak Regular';
    src: url(/fonts/Zodiak-Regular.woff2) format('woff2'),
        url(/fonts/Zodiak-Regular.woff) format('woff'),
        url(/fonts/Zodiak-Regular.ttf) format('truetype');
        font-weight: 400;
        font-style: normal;
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Accessibility
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
.visually-hidden {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Site Wrapper
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
body {
    position: relative;
    height: 100%;
    min-height: 100vh;
    background-color: var(--c-background);
    
    margin: 0;    
    transition: background-color 1s ease;
}
.page-container {
    position: relative;
    /*
    margin: 0 auto;
    padding: 0 40px 40px 40px;
    max-width: 1440px;
    */
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Header
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
.start {
    position: relative;
    /* Header margin-top ?
    margin-top: calc(40px + 1vw);*/     
    background-color: var(--c-background-header);
    padding: calc(25px + 1vw);
    padding-left:  calc(50px + 1vw);
    padding-right:   calc(50px + 1vw);
  }
.typoflex-center {
    margin: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
}
.typoflex-spread {
    margin: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding-top: calc(25px + 1vw);
}
.img-flex {
    margin-top: 1vw;
    width: 100%;
    height: 30vw;
    display: flex;
    justify-content: center;
    gap: 2%;
} 
.img-rotation-right {
    max-height: 30vw;
    -webkit-animation:spin 6s linear infinite;
    -moz-animation:spin 6s linear infinite;
    animation:spin 6s linear infinite;
    animation-direction: normal;
}
.img-rotation-left {
    max-height: 30vw;
    -webkit-animation:spin 6s linear infinite;
    -moz-animation:spin 6s linear infinite;
    animation:spin 6s linear infinite;
    animation-direction: reverse;
} 

/* 2024 Animation */
.img-flex {
  /*height: 17.7vw;*/
  height: 280px;
  align-items: center;
  margin-top: -30px;
  margin-bottom: -50px;
  gap: 0;
}
.img-flex img{
  /*flex-basis: 25%;*/
  height: auto;
  flex-basis: 360px;
}
.img-animation {
  width: 100%;
}
.typoflex-spread{
  margin-top: 50px; 
}

@keyframes grow {
    0%, 100% {
        height: 0;
    }
    50% {
        height: 100%;
    }
}

/* Apply different animation delays to each image */
.img-flex img:nth-child(1) {
    animation-delay: 0s;
}

.img-flex img:nth-child(2) {
    animation-delay: 1s;
}

.img-flex img:nth-child(3) {
    animation-delay: 2s;
}

.img-flex img:nth-child(4) {
    animation-delay: 3s;
}

/* Links weiss */
a, a:hover, a:visited{
  color: white; 
}

/* 2025 */
/* Abschnitte als Scroll-Pins */
#site-header,
#site-main,
#site-footer {

}
/* Platzhalter-Klassen für JavaScript */
body.in-main    { background-color: var(--c-background); }
body.in-footer  { background-color: var(--c-background-footer); }

#site-header, #site-main, #site-footer {
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Animation
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

/* Media Query for imgs | 901px < Medium < 1200px */
@media screen and (max-width:1400px) {
    .hidden-tablet {
        position: absolute;
        visibility: hidden;
    }
    .img-flex {
        height: 40vw;
        height: 21vw; /* 2024*/
        margin: -15px 0 -25px;
    }
    .img-rotation-right, .img-rotation-left {
        max-height: 40vw;
    }
}
/* Media Query for imgs | Small < 900px */
@media screen and (max-width:900px) {
    .page-container {
        margin: 0 auto;
    }
    .start {
    }
    .img-flex {
        height: 60vw;
        height: 23vw; /* 2024*/
        margin: -10px 0 -20px;
    }
    .img-rotation-right, .img-rotation-left {
        max-height: 60vw;
    }    
    .hidden-mobile {
        position: absolute;
        visibility: hidden;
    }
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Info Section
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
.info {
    position: relative;
    margin-top: 4rem;
     position: relative;
    margin-top: calc(140px + 1vw);
    margin-top: calc(150px + 1vw);
    padding: calc(50px + 1vw);
    margin-top: 4rem;
}
.info-flex {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    gap: 0 64px;
}
.item {
    width: 30%;
    flex-grow: 1;
    position: relative;
    margin-bottom: 2%;
    margin: 24px 0;
}
.intro {
    flex-grow: 2;
}
.programm {
    flex-grow: 2;
}
.break {
    flex-basis: 100%;
    height: 0;
  }

/* Programm table ———————————————————————————————————————— */
.programm-table {
    margin-top: 0.5rem;
}
table {
    table-layout: fixed;
    width: 100%;
}
td {
    padding: 2px 0;
}
.t-time {
    width: 104px;
}

/* Contact ———————————————————————————————————————— */
.icon::before {
    content: '';
    background: url(/images/icon-instagram-neg.svg);
    background-repeat: no-repeat;
    padding-left: 30px;  /* width of the image plus a little extra padding */
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Footer
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
.footer {
    position: relative;
    width: 100%;
    margin-top: 40px;
    position: relative;
    margin-top: calc(140px + 1vw);
    margin-top: calc(150px + 1vw);
    padding: calc(50px + 1vw);
    margin-top: 4rem;
    background-color: var(--c-background-logo);
    
}
hr {
    width: 100%;
    border: 1px solid var(--c-primary);
    margin-top: 24px;
    margin-bottom: 4px;
}
.logos-partners {
    display: flex;
    flex-flow: row wrap;
    gap: 16px 20px;
    justify-content: center;
    align-items: center;
}
.logos-roasters {
    display: flex;
    flex-flow: row wrap;
    gap: 16px 40px;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 16px;
    margin-bottom: 40px;
    padding: 0 24px;
}
.logo-box-big {
    text-align: center;
    margin: 16px;
}
.logo-box {
    text-align: center;
    margin: 16px;
}
.logo-box-big img {
    vertical-align: middle;
    min-width: 128px;
    min-height: 104px;
    max-width: 184px;
    max-height: 80px;
}
.logo-box img {
    vertical-align: middle;
    min-width: 80px;
    min-height: 80px;
    max-width: 160px;
    max-height: 104px;
}

/* Media Query for Logos | Small < 900px */
@media screen and (max-width:900px) {
    .logos-roasters {
        gap: 16px;
        padding: 0;
    }
    .logo-box {
        text-align: center;
        margin: 8px;
    }
    .logo-box img {
        min-height: 24px;
        min-height: 40px;
        max-width: 128px;
        max-height: 64px;
      }
    .logos-partners {
        gap: 16px;
        padding: 0;
    }
    .logo-box-big {
        text-align: center;
    }
    .logo-box-big img {
        min-height: 24px;
        min-height: 32px;
        max-width: 144px;
        max-height: 64px;
      }
}


/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Typography
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
.headline { /* Headlines flex uppercase */
    /*font-family: 'Switzer Medium';*/
    font-family: 'Switzer Regular';
   /*font-size: calc(var(--headline-vw-scale) + 40px);*/
    font-size: calc(var(--headline-vw-scale) + 73px);
    font-size: calc(var(--headline-vw-scale) + 25px);
    color: var(--c-primary);
    line-height: 0.9em;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    text-align: center;
}
.subhead { /* Subhead flex uppercase */
    font-family: 'Switzer SemiBold';
    font-size: 2rem;
    color: var(--c-primary);
    line-height: 1em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
.lead { /* Lead + Roasters */
    font-family: 'Switzer Medium';
    font-size: 1.3rem;
    color: var(--c-primary);
    line-height: 1.25em;
    margin-bottom: 1.25em;
    letter-spacing: 0.02em;
}
table, ul, .contact { /* Copy all */
    font-family: 'Switzer Medium';
    font-size: 1.25rem;
    color: var(--c-primary);
    line-height: 1.25em;
    letter-spacing: 0.04em;
}
.serif { /* Serif modifier */
    font-family: 'Zodiak Regular';
}
/* Custom bulletpoints and spacing */
.bullet-list {
    padding-left: 0.8em;
    font-family: 'Switzer Medium';
    letter-spacing: 0.04em;
}
.bullets {
    list-style-type: "+";
    padding-left: 0.4em;
}
/* Roasters list */
.roasters { 
    font-family: 'Switzer Medium';
    font-size: 1.35rem;
    color: var(--c-primary);
    line-height: 1.25em;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
ul.roasters {
    list-style-type: none;
    padding-left: 0;
}
.label { /* Sections labels */
    font-family: 'Switzer Medium';
    font-size: 0.8rem;
    letter-spacing: 0.082em;
    color: var(--c-primary);
    margin-bottom: 8px;
}
.time { /* Time finetuning */
    font-family: 'Switzer Medium';
    font-size: 12px;
    vertical-align: text-top;
}
.credits { /* Credits, Legals and stuff */
    font-family: 'Switzer Medium';
    letter-spacing: 0.04em;
    font-size: 0.8rem;
    color: var(--c-primary);
    text-align: center;
    text-transform: none;
    margin-top: 16px;
}
.t-button { /* Styling Buttons */
    font-family: 'Switzer SemiBold';
    letter-spacing: 0.04em;
    font-size: 1rem;
    color: var(--c-primary);
    text-align: center;
}
/* Styling imprint */
.imprint-title {
    margin: 0.4em 1em;
    font-family: 'Switzer SemiBold';
    font-size: 1.5rem;
    color: var(--c-primary);
    line-height: 1em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.imprint {
    font-family: 'Switzer Medium';
    letter-spacing: 0.02em;
    line-height: 1.2em;
    font-size: 1rem;
    color: var(--c-primary) !important;
    max-width: 1200px;
}

/* 2024 */
.KFaIpG_mt6, .KFaIpG_text, .KFaIpG_link, .KFaIpG_listElement{
	color: var(--c-primary) !important;
}

/* Media Query for header and table/time | Small < 900px*/
@media screen and (max-width:900px) {
    .t-time {
        width: 104px;
    }
    .headline {
        font-size: calc(var(--headline-vw-scale) + 16px);
    }
    .subhead {
        font-size: calc(var(--headline-vw-scale) / 2 + 8px);
    }
    .baseline {
        margin-top: calc(calc(var(--headline-vw-scale) / 2) + 12px);
    }
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Buttons, Links and Hover FX
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
.text-link {
    position: relative;
    color: var(--c-primary);
    text-decoration: none;
}
.text-link:hover {
    color: var(--c-primary);
}
.text-link::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--c-primary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.text-link:hover::before {
    transform: scaleX(1);
}
.text-link:link { text-decoration: none; }
.text-link:visited { text-decoration: none; }
.text-link:active { text-decoration: none; }
 .button:visited {
     color: var(--c-background);
   }
.button {
    height: fit-content;
    margin-top: 16px;
    padding: 8px 24px;
    border-radius: 40px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease-out;
    background-color: var(--c-white);
    color: var(--c-background);
    border: 2px solid var(--c-white);
  }
  .button, a {
    text-decoration: none;
  }
  .button:hover {
    background-color: var(--c-background);
    color: var(--c-white);
    border: 2px solid var(--c-white);
  }
  

/* Media Query for wrappers | Small < 900px*/
@media screen and (max-width:900px) {
    .page-container {
        margin: 0 auto;
    }
    .tsection{
        padding-left: 20px;
        padding-right: 20px;
     }
    .info {
        flex-flow: column wrap;
        margin-top: 1rem;
        }

    .item {
        width: calc(100% - 24px);
    }
    
    .typoflex-spread{
      display: block; 
      text-align: center; 
    }
}


/* Schorsch 2024 */

/* 4 Kreise 1440 / 3 */
.img-flex {
  height: 340px;
  align-items: center;
  margin-top: -30px;
  margin-bottom: -50px;
  gap: 0;
}
.img-flex img{
  height: 360px;
  flex-basis: 360px;
}

/* 3 Kreise 990 / 3*/
@media screen and (max-width:1440px) {
	.img-flex img:nth-of-type(4){
	  display: none; 
	}
    .img-flex {
	  height: 328px; /* 330 - 80 */
	  align-items: center;
	  margin-top: -20px;
	  margin-bottom: -30px;
	  gap: 0;
	}
	.img-flex img{
	  height: 330px;
	  flex-basis: 330px;
	}
}

/* 2 Kreise 660 / 2 */
@media screen and (max-width:990px) {
	.img-flex img:nth-of-type(3){
	  display: none; 
	}
    .img-flex {
	  height: 328px; /* 330 - 80 */
	  align-items: center;
	  margin-top: -15px;
	  margin-bottom: -25px;
	  gap: 0;
	}
	.img-flex img{
	  height: 330px
	  flex-basis: 330px;
	}
}

/* 1 Kreis 400 / 1 */
@media screen and (max-width:600px) {
	.img-flex img:nth-of-type(2){
	  display: none; 
	}
    .img-flex {
	  height: 335px;
	  align-items: center;
	  margin-top: -10px;
	  margin-bottom: -20px;
	  gap: 0;
	}
	.img-flex img{
	  height: 400px;
	  flex-basis: 400px;
	}
}