@import url('fonts.css');
@font-face {
  font-family: 'ForkAwesome';
  src: url('/fonts/forkawesome-webfont.eot?v=1.1.7');
  src: url('/fonts/forkawesome-webfont.eot?#iefix&v=1.1.7') format('embedded-opentype'), url('/fonts/forkawesome-webfont.woff2?v=1.1.7') format('woff2'), url('/fonts/forkawesome-webfont.woff?v=1.1.7') format('woff'), url('/fonts/forkawesome-webfont.ttf?v=1.1.7') format('truetype'), url('/fonts/forkawesome-webfont.svg?v=1.1.7#forkawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

:root {
  --btn: var(--nvv-weiss);
  --btn-hover: #eeeeeeaa;
  --info-border: #44444444;
  --info-background: #ffffff44;
  --white-background: #ffffff11;
  --background: var(--nvv-weiss);
  --active: #004f9f;
  --active-hover: #07529A44;
  --omitted: #ff0000;
  --omitted-light: #ffaaaa;
  --disrupted: #ffff00;
  --disrupted-light: #ffffcc;
  --ok: var(--nvv-gruen-100);
  --na: #888888;
  --bt-height: 50px;
  --nvv-txt-100: var(--nvv-schwarz);
  --upcoming: #cbcbcb;
  --nvv-schwarz: #1d1d1d;
  --nvv-weiss: #ffffff;
  --nvv-blau-100: #004f9f;
  --nvv-blau-40: #9ea5c0;
  --nvv-gruen-100: #009640;
  --nvv-dark-100: #001a3f;
  --nvv-very-dark: #181c25;
  --nvv-magenta: #ff0090;
  --transparent: #00000000;
  --corner: 30px;
  --h-lines: 45px;
  --l-lines: 125px;
  --vm-width: 135px;
}

h1 {
  font-size: 36px;
}
h2 {
  font-size: 25px;
}



body {
  margin: 0;
  padding: 0;
  font-family: 'Source Sans Pro', sans-serif;
  background: var(--background);
  font-weight: 700;
  color: var(--nvv-schwarz);
  width: 100vw;
  overflow-x: hidden;
} 
@media (prefers-color-scheme: dark) {
	body {
		background-color: var(--nvv-very-dark);
		color: var(--nvv-weiss);
	}
  #sticky-head {
    background: var(--nvv-very-dark);
  }
  .disrupted .info.link:not(.upcoming).c2  {
    color: var(--nvv-txt-100);
    margin-top: -8px;
    border-radius: 0 0 4px 4px;
  }
  a {
    color: var(--nvv-weiss);
  }
  .disrupted .info.hfs::before {
    color: var(--nvv-weiss);
  }
}
@media (prefers-color-scheme: light) {
  #sticky-head {
    background: var(--background);
  }
  .disrupted .info.link:not(.upcoming).c2  {
    color: var(--nvv-schwarz);
    margin-top: -8px;
    border-radius: 0 0 4px 4px;
  }
  .disrupted .info.hfs::before {
    color: var(--nvv-schwarz);
  }
  a {
    color: var(--nvv-schwarz);
  } 
} 

#sticky-head {
  padding: 8px;
}


p, .p {
  font-weight: 400;
}


div.linie, div.linienweg, div.status, div.vm {
  display: flex;
  flex-direction: column;
  justify-content: center;

}

div.line{
  margin: 8px 0 0 0;
  max-width: 100vw;
} 

div.linie{
  padding: 0 0 0 4px;
} 

div.vm {
  background: var(--nvv-blau-40);
  align-items: center;
  height: var(--h-lines);
  clip-path: polygon(0 0, var(--vm-width) 0, calc(var(--vm-width) - var(--h-lines)) 100%, var(--h-lines) 100%);
  transform: translate(-45px, 0);
} 

div.status {
  text-align: center;
}
/*
.info:not(.c2) a {
  color: var(--nvv-schwarz);
} /**/
a {
  text-decoration: underline;
  font-weight: 400;
}
a::before {
  content: "\f08e  ";
  font-weight: 400;
  font-family: 'forkawesome';
}


sks::before {
  content: url(svg/sks.svg);
}

lkks::before {
  content: url(svg/lkks.svg);
}

lkhr::before {
  content: url(svg/hr.svg);
}

sek::before {
  content: url(svg/sek.svg);
}

wmk::before {
  content: url(svg/wmk.svg);
}

wf::before {
  content: url(svg/wf.svg);
}

.info.hfs::before {
  content: "\f05a  ";
  font-weight: bold;
  font-family: 'forkawesome';
}

/*
.disrupted .info.hfs::before {
  color: var(--nvv-txt-100);
}/**/


/*
.disrupted .info.hfs:not(.upcoming):not(.c2) {
  background: var(--disrupted);
  color: var(--nvv-txt-100);
}
.omitted .info.hfs:not(.upcoming):not(.c2) {
  background: var(--omitted);
}
/**/
.info.hfs.upcoming::before {
  content: "\f05a  ";
  font-weight: bold;
  color: var(--upcoming);
  font-family: 'forkawesome';
}

/*
.disrupted .info.link:not(.upcoming):not(.c2) {
  margin-top: -8px;
  color: var(--nvv-txt-100);
  background: var(--disrupted-light);
  border-radius: 0 0 4px 4px;
}


.omitted .info.link:not(.upcoming):not(.c2) {
  margin-top: -8px;
  background: var(--omitted-light);
  border-radius: 0 0 4px 4px;
}
/**/
.info.link::before {
  content: "";
  font-weight: 400;
  color: var(--disrupted);
  font-family: 'forkawesome';
}

.info.link{
  margin: 0 0 4px 0;
}


.info::before {
  content: "\f05a  ";
  font-weight: bold;
  font-size: 20px;
  font-family: 'forkawesome';
}


.first {
  background: var(--nvv-weiss);
  color: var(--nvv-blau-100);
}

.line{
  min-height: var(--h-lines);
  /*border-top: solid 1px var(--nvv-blau-100);/**/
}

.linienweg:not(.ue) {
  transform: translate(-90px, 0);
  width: calc(100vw - var(--l-lines) - var(--vm-width) + 45px);
  background: var(--nvv-dark-100);
  color:var(--nvv-weiss);/**/
  padding: 0 0 0 var(--h-lines);
  clip-path: polygon(var(--h-lines) 0, 100% 0, 100% 100%, 0 100%, 0 var(--h-lines));
}/*
.line:nth-child(even) {
  border-top: solid 1px var(--nvv-dark-100);
  background: var(--nvv-blau-100);
  color: var(--nvv-weiss);
}/**/

.linie{
  clip-path: polygon(0 0, calc(var(--l-lines) - var(--h-lines)) 0, var(--l-lines) var(--h-lines), 0 var(--h-lines));
  height: var(--h-lines);
}


.omitted .linie {
  background-color: var(--omitted);
  color: var(--nvv-weiss);
  /*background-ima4ge: linear-gradient(45deg, var(--omitted) 0px, var(--omitted) var(--corner), var(--transparent) var(--corner));/**/
} 
.ok .linie {
  background-color: var(--ok);
  color: var(--nvv-weiss);
  /*  background-image: linear-gradient(45deg, var(--ok) 0px, var(--ok) var(--corner), var(--transparent) var(--corner));/**/
} 
.disrupted .linie {
  background-color: var(--disrupted);
  color: var(--nvv-schwarz);
  /*background-image: linear-gradient(45deg, var(--disrupted) 0px, var(--disrupted) var(--corner), var(--transparent) var(--corner));/**/
}

.na:not(.new) .linie {
  background-color: var(--na);
  color: var(--nvv-weiss);
  /*background-image: linear-gradient(45deg, var(--na) 0px, var(--na) var(--corner), var(--transparent) var(--corner));/**/
} /**/ 

@media (max-width: 500px) {
  .linienweg {
    /*grid-column: 1 / 4;
    grid-row: 2;/**/
    margin: 0px;
    padding: 4px;
    font-weight: 400;
  }

  .line, .first {
    padding: 16px 4px 4px 4px;
    grid-template-columns: 125px 135px auto;
  }
  .linienweg.ue {
    text-align: center;
  }
  .info, .first {
    grid-column: 1 / 4;
    transform: translate(-20px, 0);
    width: calc(100vw - 20px);
  }
  .info:not(:last-child) {
    margin: 0 20px 4px 20px;
  }
  .info:last-child {
    margin: 0 20px 16px 20px;
  }
  .tab2 {
    grid-template-columns: 1fr;
  }
  .l13 {
    display: grid;
    grid-template-columns: 1fr 175px 1fr;
  }
  .l51, .l61, .l71 {
    display: grid;
    grid-template-columns: 1fr;
  }
  .sp12 {
    grid-column: 1 / 3;
  }
  #legende, .ue.linienweg {
    display: none;
  }
  toggle {
    text-align: right;
  }
}

@media (min-width: 501px) {

  

  .info.hfs:first {
    margin: 4px 0 4px 0;
  } 

  .info.hfs:not(:first) {
    margin: 0 0 4px 0;
  }
  .info {  
    grid-column: 1 / 4;
    width: calc(100vw - 16px);/**/
  }

  .line, .first {
    padding: 4px;
    grid-template-columns: 125px 135px auto;
  }
  .ue-linie {
    text-align: center;
  }
  .tab2 {
    grid-template-columns: 1fr 1fr;
  }
  .l13 {
    display: grid;
    grid-template-columns: 1fr;
    text-align: center;
  }

  .sp12 {
    grid-row: 1 / 3;
  }

  @media (min-width: 501px) and (max-width: 700px) {
    .l71 {
      display: grid;
      grid-template-columns: 175px 175px 175px;
    }
  }
  @media (min-width: 701px) and (max-width: 900px) {
    .l71 {
      display: grid;
      grid-template-columns: 175px 175px 175px 175px;
    }
  }
  @media (min-width: 901px) and (max-width: 1075px) {
    .l71 {
      display: grid;
      grid-template-columns: 175px 175px 175px 175px 175px;
    }
  }
  @media (min-width: 1076px) and (max-width: 1250px) {
    .l71 {
      display: grid;
      grid-template-columns: 175px 175px 175px 175px 175px 175px;
    }
  }
  @media (min-width: 1251px) {
    .l71 {
      display: grid;
      grid-template-columns: 175px 175px 175px 175px 175px 175px 175px;
    }
  }
  .filter, .filter-o {
    display: none;
  }
}

.ausblenden div {
  display: none;
}

.ausgeblendet {
  cursor: pointer;
}


.info {
  padding: 8px;
  font-weight: 400;
}

.info.upcoming {
  font-weight: 300;
}

.line, .first {
  display: grid;
  margin: 0px;
  padding: 0px;
}

.ue-linie {
  grid-column: 1 / 3;
}

.tab2 {
  display: grid;
  margin: 4px;
  padding: 4px;
}



.sticky {
  position: fixed;
  top: 0;
  width: calc(100% - 20px);
  z-index: 100;
}



button {
  border-radius: 4px;
  padding: 4px;
  width: 120px;
  height: var(--bt-height);
  vertical-align: middle;
}
.btn-0 {
  background: var(--btn);
}
.btn-0:hover {
  background: var(--btn-hover);
}
.btn-i {
  background: var(--active);
  color: #ffffff;
}
.btn-i:hover {
  background: var(--active-hover);
}

.auswahl {
  padding: 8px 0px 8px 0px;
  font-weight: 400;
}

toggle::before {
  content: " \f205  ";
  font-family: 'forkawesome';
  font-size: 32px;
  color: var(--nvv-blau-100);
}
toggle.o::before {
  content: " \f204  ";
  font-family: 'forkawesome';
  font-size: 32px;
  color: #888888;
}

.head::before, .filter::before {
  content: "\f077  ";
  font-size: 18px;
  font-family: 'forkawesome';
  weight: 400;
  color: var(--nvv-txt-100);
}
.head-o::before, .filter-o::before {
  content: "\f078  ";
  font-size: 18px;
  font-family: 'forkawesome';
  weight: 400;
  color: var(--nvv-txt-100);
}
.head, .head-o {
  border-top: 1px solid #043180;
  padding: 4px 0px 4px 0px;
}

#suche {
  height: 44px;
  vertical-align: top;
  border: 1px solid var(--nvv-blau-100);
  font-size: inherit;
  box-shadow: inset 0 1px 3px 0 #00000088;
  width: calc( 100% - 20px);
  border-radius: 5px;
  padding-left: 10px;
}

.t32 {
  font-size: 32px;
}
.filter, .filter-o {
  padding: 4px 0px 4px 0px;
}

.new.line {
/*  border: 8px;
  border-color: #00ff00;
  border-style: none solid none solid;/**/
  z-index: 100;
  background: #aaffaa;
  color: #000000;
}

.old.line {
  background: #44444488;
}