:root {
  --col-btnb:    #c20b1b;
  --col-btnt:    white;
  --col-btnd:    #f6f6f6;
  --col-btnh:    #861623;
  --col-main:    #222222;
  --col-line:    #cdccc9;
  --col-bgr:     #fefcf7;
  --col-lbl:     #969696;
  --col-red:     #c20b1b;
  --col-blue:    #1ea1af;
  --col-li:      #f6f6f6;
  --col-switch:  #1ea1af; 
}

@font-face { font-family: franklin-gothic-urw; src: url("https://use.typekit.net/af/9cb78a/0000000000000000000118ad/27/l?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/9cb78a/0000000000000000000118ad/27/d?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/9cb78a/0000000000000000000118ad/27/a?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n4&v=3") format("opentype"); font-style: normal; font-weight: 400; font-display: swap; }

@font-face { font-family: franklin-gothic-urw; src: url("https://use.typekit.net/af/2e6f07/000000000000000000011ce6/27/l?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n5&v=3") format("woff2"), url("https://use.typekit.net/af/2e6f07/000000000000000000011ce6/27/d?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n5&v=3") format("woff"), url("https://use.typekit.net/af/2e6f07/000000000000000000011ce6/27/a?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n5&v=3") format("opentype"); font-style: normal; font-weight: 500; font-display: swap; }

@font-face { font-family: franklin-gothic-urw; src: url("https://use.typekit.net/af/b825af/0000000000000000000118b1/27/l?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n7&v=3") format("woff2"), url("https://use.typekit.net/af/b825af/0000000000000000000118b1/27/d?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n7&v=3") format("woff"), url("https://use.typekit.net/af/b825af/0000000000000000000118b1/27/a?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n7&v=3") format("opentype"); font-style: normal; font-weight: 700; font-display: swap; }

@font-face { font-family: franklin-gothic-urw; src: url("https://use.typekit.net/af/c7b613/0000000000000000000118b3/27/l?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n9&v=3") format("woff2"), url("https://use.typekit.net/af/c7b613/0000000000000000000118b3/27/d?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n9&v=3") format("woff"), url("https://use.typekit.net/af/c7b613/0000000000000000000118b3/27/a?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n9&v=3") format("opentype"); font-style: normal; font-weight: 900; font-display: swap; }

@font-face { font-family: franklin-gothic-urw-cond; src: url("https://use.typekit.net/af/bb00d4/00000000000000003b9b2244/27/l?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/bb00d4/00000000000000003b9b2244/27/d?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/bb00d4/00000000000000003b9b2244/27/a?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n4&v=3") format("opentype"); font-style: normal; font-weight: 400; font-display: swap; }

@font-face { font-family: franklin-gothic-urw-cond; src: url("https://use.typekit.net/af/a2031c/0000000000000000000118b9/27/l?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n7&v=3") format("woff2"), url("https://use.typekit.net/af/a2031c/0000000000000000000118b9/27/d?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n7&v=3") format("woff"), url("https://use.typekit.net/af/a2031c/0000000000000000000118b9/27/a?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n7&v=3") format("opentype"); font-style: normal; font-weight: 700; font-display: swap; }


body {
  display:              flex;
  min-height:           100vh;
  margin:               0 auto;
  flex-direction:       column;  
  font-family:          'franklin-gothic-urw-cond', 'Helvetica', 'Arial', sans-serif;
  font-weight:          400;
  font-size:            18px;
  background-color:     #f2f2f2;
}

header {
  position:             fixed;
  z-index:              10;
  height:               35px;
  width:                360px;
  background-color:     white;
  //background-color:     beige;
}
.header-text {
  position:             relative;
  float:                left;
  width:                calc(360px - 125px - 20px);
  height:               calc(100% - 10px);
  padding:              5px 10px;
  font-family:          'franklin-gothic-urw-cond', 'Helvetica', 'Arial', sans-serif;
  font-weight:          600;
  font-size:            20px;
  font-variant:         small-caps;
  //background-color:     lightgreen;
}
.header-logo {
  position:             relative;
  float:                left;
  width:                calc(125px - 20px);
  height:               calc(100% - 10px);
  padding:              5px 10px;
  text-align:           right;
  //background-color:     lightblue;
}
.header-logo img {
  margin-top:           5px;
  width:                100%;
}
.header-line {
  position:             relative;
  float:                left;
  width:                100%;
  height:               10px;
  background:           linear-gradient(to right, #bc102b 0%, #861623 100%);
}

main {
	min-height:           5em;
	flex:                 1;
}
.container {
  position:             relative;
  float:                left;
  display:              flex;
  flex-wrap:            wrap;
  align-items:          center;
  justify-content:      center;
  width:                100%;
  height:               auto;
  margin-right:         auto;
  margin-left:          auto;
}

.index-frm {
  position: relative;
  float: left;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0px;
  width: 100%;
  height: 100%;
  max-width: 360px;
  background-color: white;
  min-height: 100vh;
}


ul {
  position:             relative;
  float:                left;
  list-style:           none;
  width:                100%;
  margin:               0px;
  padding:              0px;
  margin-top:           50px;
}
li {
  position:             relative;
  float:                left;
  width:                calc(100% - 20px);
  height:               auto;
  margin:               2px;
  padding:              10px 5px;
  border-bottom:        2px solid var(--col-lbl);
}


.container-datum {
  position:             relative;
  float:                left;
  width:                70px;
  height:               70px;
  margin:               0px;
  padding:              0px;
  background-color:     #f7f7f7;
  border-radius:        0px 0px 10px 10px;
}

.container-spiele {
  position:             relative;
  float:                left;
  width:                calc(100% - 70px);
  height:               auto;
  margin:               0px;
  padding:              0px;
}
.container-event {
  position:             relative;
  float:                left;
  width:                100%;
  height:               auto;
  margin:               0px;
  padding:              0px;
  padding-left:         5px;
  font-size:            14px;
  padding-bottom:       2px;
  padding-top:          2px;
  border-bottom:        1px solid var(--col-line);
  overflow:             hidden;
  text-overflow:        ellipsis;
  white-space:          nowrap;

}

.monat {
  position:             relative;
  float:                left;
  width:                100%;
  height:               17px;
  margin:               0px;
  padding:              0px;
  background-color:     #d65949;
  color:                white;
  text-transform:       uppercase;
  font-size:            14px;
  text-align:           center;
  font-weight:          200;
  border-radius:        10px 10px 0px 0px;
}

.datum {
  position:             relative;
  float:                left;
  width:                100%;
  height:               36px;
  margin:               0px;
  padding:              0px;
  color:                #4f4f4f;
  font-size:            30px;
  text-align:           center;
  font-weight:          400;
}
.tag {
  position:             relative;
  float:                left;
  width:                100%;
  height:               17px;
  margin:               0px;
  padding:              0px;
  color:                #4f4f4f;
  text-transform:       uppercase;
  font-size:            12px;
  text-align:           center;
  font-family:          franklin-gothic-urw-cond;
}


.team, .zeit, .comment, .theke {
  position:             relative;
  float:                left;
  width:                25px;
  margin:               0px;
  padding:              0px;
}
.team    {font-weight: 600;font-size: 16px;color: var(--col-blue)}
.zeit    {width: 70px;}
.comment {width: 110px;}
.theke   {width: 65px;}
  
.offen {
  background-color: #FFC7CE;
  color:            #9C0006;
  text-align:       center;
}
.geplant {
  background-color: #C6EFCE;
  color:            #006100;
  text-align:       center;
}