@font-face {
 font-family: "Perspective Sans";
 src: url("fonts/PerspectiveSans-Regular.otf");
}
@font-face {
 font-family: "Perspective Sans";
 src: url("fonts/PerspectiveSans-Italic.otf");
 font-style: italic;
}
@font-face {
 font-family: "Perspective Sans";
 src: url("fonts/PerspectiveSans-Bold.otf");
 font-weight: bold;
}
@font-face {
 font-family: "Perspective Sans";
 src: url("fonts/PerspectiveSans-BoldItalic.otf");
 font-weight: bold;
 font-style: italic;
}
@font-face {
 font-family: "Perspective Sans";
 src: url("fonts/PerspectiveSans-Black.otf");
 font-weight: 900;
}
@font-face {
 font-family: "Perspective Sans";
 src: url("fonts/PerspectiveSans-BlackItalic.otf");
 font-weight: 900;
 font-style: italic;
}

@font-face {
 font-family: "Linux Biolinum";
 src: url("fonts/LinBiolinum_R.otf");
}
@font-face {
 font-family: "Linux Biolinum";
 src: url("fonts/LinBiolinum_RI.otf");
 font-style: italic;
}
@font-face {
 font-family: "Linux Biolinum";
 src: url("fonts/LinBiolinum_RB.otf");
 font-weight: bold;
}


body {
 font-size : 1.2em;
 font-family : "Linux Biolinum";
 font-weight: 400;
 color : #404040;
 line-height : 1.5em;
}

body, .body {
 padding-left : 2em;
 padding-right : 2em;
 padding-top : 1.5em;
 padding-bottom : 1.5em;
}

body.commented {
 padding-left : 2em;
 padding-right : 240px;
}

a {
 color : #00aff0;
 text-decoration : underline;
}
a:link    { }
a:visited { color : #306080; }
a:focus   { }
a:hover   { color : #1da64a; text-decoration : underline; }
a:active  { color : #1da64a; text-decoration : underline; }

a.button {
 color : white;
 background-color : #00aff0;
 padding : 4px;
 font-weight : bold;
 text-decoration : none;
 position : relative;
 top : 0px;
 left : 0px;
 right : 4px;
 bottom : 4px;
 box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.2);
}

a.button:link    { }
a.button:visited { }
a.button:focus   { }
a.button:hover   { background-color : #bedc0a; }
a.button:active  {
 background-color : #bedc0a;
 box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
 top : 4px;
 left : 4px;
 right : 0px;
 bottom : 0px;
}
a.button.active {
 background-color : black;
 cursor : default;
}

p {
 margin-top : 0.1em;
 margin-bottom : 0.5em;
 text-align : justify;
}

hr {
 margin-top : 5px;
 margin-bottom : 5px;
 border : 0px none transparent;
 height : 30px;
 background-color : transparent;
 background-image : url("../../media/logos/logo-A4.svg");
 background-size : 30px 21px;
 background-repeat : no-repeat;
 background-position : center;
}
hr:before, hr:after {
 content : '';
 height : 2px;
 width : calc(50% - 100px);
 background-color : #bedc0a;
 margin-top : 14px;
}
hr:before {
 float : left;
 margin-left : 50px;
}
hr:after {
 float : right;
 margin-right : 50px;
}

h1 {
 font-size : 1.8em;
 padding : 0px;
 margin-top : 1.2em;
}
h2 {
 font-size : 1.5em;
 padding : 0px;
 margin-top : 1em;
 margin-bottom : 0.14em;
 text-decoration : underline;
}
h3 {
 font-size : 1.3em;
 padding : 0px;
 margin-top : 0.6em;
 margin-bottom : 0.12em;
}
h4 {
 font-size : 1.1em;
 padding : 0px;
 margin-top : 0.4em;
 margin-bottom : 0.1em;
}


ul {
 padding-left : 1.5em;
}

ul li {
 margin-bottom : 0.5em;
 list-style-type : none;
}
ul li:before {
 content : '';
 float : left;
 width : 1.5em;
 height : 1.2em;
 vertical-align : top;
 margin : 0px;
 padding : 0px;
 margin-left : -1.5em;
 background-image : url('../images/Stichpunkt.svg');
 background-repeat : no-repeat;
 background-size : 0.8em 0.6em;
 background-position : center bottom;
}

blockquote {
 position : relative;
 padding : 0px;
 padding-left : 1em;
 margin : 0px;
 text-align : justify;
}
blockquote:before {
 content : '\201C';
 display : block;
 position : absolute;
 width : 0.4em;
 left : 0px;
 top : 3px;
 bottom : 0px;
 font-size : 2em;
 font-weight : bold;
 line-height : 0.2em;
 box-sizing : border-box;
 padding-top : 0.5em;
 margin-bottom : 0.2em;
 text-align : left;
 background-color : #efebdc;
}

sub {
 line-height : 0.4em;
}

table {
 border-collapse : collapse;
}

table td {
 border : 1px solid gray;
 padding : 3px;
}
table th {
 padding : 1px;
 vertical-align : bottom;
}
table.thborder th {
 border : 1px solid gray;
 padding: 3px;
}

.accepted {
 background-color: #CFC;
}
.rejected {
 background-color: #FCC;
}

img.rejected {
 border: 8px solid #FCC;
}

acceptance {
 display: none;
}

commentnote {
 z-index: 1;
 width: 0px;
 height: 0px;
 float: left;
 margin-right: 0px;
 margin-left: 0px;
 position : relative;
 white-space : pre-wrap;
}

commentnote div {
 counter-increment: comment;
 position : absolute;
 right : calc(-100vw + 75px);
 top : 0px;
 max-height : 100px;
 width : 200px;
 overflow : hidden;
 background-color: #FFA;
 border : 2px solid #DA5;
 font-size: 17px;
 font-weight: normal;
 text-decoration: none;
}

commentnote.redaction div {
 background-color: #CCF;
}
commentnote.accepted div {
 background-color: #CFC;
}
commentnote.rejected div {
 background-color: #FCC;
}
commentnote:hover {
 z-index: 2;
}
commentnote:hover div {
 max-height: 80vh;
 min-height: 100px;
 width: 80vw;
 right : calc(-100vw + 95px);
}

commentnote:before {
 content : '';
 position : absolute;
 display : block;
 height : 2px;
 background-color: #DA5;
 width : calc(100vw - 275px);
 left : calc(0px);
}

.footnotelink {
 font-size : 0.7em;
 font-weight : bold;
 line-height : 0.6em;
}
.footnotelink a:before {
 content : '[';
}
.footnotelink a:after {
 content : ']';
}
.footnotelink a {
 text-decoration : none;
}

footnote, .footnote {
 display : none;
}

#footer footnote, #footer .footnote {
 display : block;
 padding-left : 3em;
 font-size : 0.9em;
 margin-bottom : 0.4em;
}

#footer footnote .number, #footer .footnote .number {
 margin-left : -3em;
 display : inline-block;
 width : 2.5em;
 text-align : right;
 padding-right : 0.5em;
}

#footer footnote.active, #footer .footnote.active {
 background-color : #efebdc;
}

.videolink {
 float : right;
 margin : 4px;
 width :  80px;
 height : 40px;
 background-image : url('kamera.svg');
 background-size : contain;
 background-repeat : no-repeat;
}
.videolink:link    { }
.videolink:visited { }
.videolink:focus   { }
.videolink:hover   { width : 88px; height : 48px; margin : 0px; }
.videolink:active  { width : 88px; height : 48px; margin : 0px; }
.videolink.left {
 float : left;
}


body .calendar ul.dates a {
 color : #3f3f3f;
}

div.video-js {
 width : 100%;
 height : 100%;
 overflow : hidden;
}

.video-next-but, .video-prev-but {
 position : absolute;
 top : -50px;
 color : white;
 border : 1px solid white;
 padding : 4px;
 border-radius : 2px;
 font-weight : bold;
 font-size : 15px;
 text-decoration : none;
 z-index : 1;
}

.video-next-but { right : 0px; }
.video-prev-but { left : 0px; }

.video-next-but:hover, .video-prev-but:hover {
 color : white;
 text-decoration : none;
}

.vjs-menu-button-popup {
 background-image : url('Zahnrad.svg');
 background-size : contain;
 background-repeat : no-repeat;
 background-position : center;
 z-index : 2;
}

.vjs-menu-button-popup div.vjs-menu {
 left : auto;
 right : 0px;
}


.figure {
 float : right;
 width : 40%;
 padding : 10px;
 margin-left : 20px;
 border : 1px solid #008bd0;
 position : relative;
 font-size : 0.9em;
}
.figure img {
 width : 100%;
}


svg * {
 font-family : 'Linux Biolinum';
}

body .JSW.OuterBox .JSW.Title, body .video-js {
 font-family : 'Perspective Sans';
}



.faq {
 counter-reset : faq;
 padding-left : 1.3em;
}

.faq > li {
 list-style-type : none;
 background-color : #efebdc;
 padding : 3px;
 margin-bottom : 6px;
}

.faq > li > b {
 display : block;
 cursor : s-resize;
}

ol.faq > li > b:before {
 counter-increment : faq;
 content : counter(faq) ". ";
}

.faq > li.open > b {
 cursor : n-resize;
}

.faq > li:before {
 content : '';
 float : left;
 width : 1.3em;
 height : 1.2em;
 vertical-align : top;
 margin : 0px;
 padding : 0px;
 margin-left : -1.3em;
 background-image : url('../images/Stichpunkt.svg');
 background-repeat : no-repeat;
 background-size : 0.8em 0.6em;
 background-position : left bottom;
 transform : rotate(0deg);
 transition : transform 0.8s;
 transform-origin : 0.5em 1em;
}

.faq > li li:before {
 background-image: none;
}

.faq > li.open:before {
 transform : rotate(45deg);
}

.faq > li .compressing {
 overflow: hidden;
 transition : 0.5s;
}
.faq > li.open .compressing {
 height : 0px !important;
}

.faq > li .expanding {
 max-height : 0px;
 overflow : hidden;
 margin-bottom : 0px;
 transition : 0.5s;
 transition-timing-function: linear(0, 0.9, 0.96, 0.975, 0.983, 0.99, 0.995, 1);
}

.faq > li.open .expanding {
 max-height : 10000px;
 margin-bottom : inherit;
 transition : 1s;
 transition-timing-function: linear(0, 0.005, 0.01, 0.017, 0.025, 0.04, 0.1, 1);
}

.faq > li .expanding:last-child {
 margin-bottom : 0px;
}


.carousel-item, .collection-items__item {
  display: inline-block;
  padding: 5px;
  padding-bottom: calc(1.2em + 5px);
  margin-right: 0px;
  width: 26vw;
  max-width: 350px;
  min-width: 230px;
  background-color: #efebdc;
  border: 3px solid #bedc0a;
  text-decoration: none;
  color : black;
  position : relative;
}
.carousel-item:hover, .collection-items__item:hover {
  border-color : #00aff0;
  color : black;
  text-decoration : none;
}
.carousel-item:active, .collection-items__item:active {
  color : black;
  text-decoration : none;
}
.carousel-item img, .collection-items__item img {
  width: 100%;
}
.carousel-item b, .collection-items__item b {
  font-size: 1.2em;
  display: block;
}
.collection-items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
.collection-items .collection-items__item {
  margin-bottom: 20px;
}

.carousel__horizontal {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.carousel__horizontal::-webkit-scrollbar {
  display : none;
}

.carousel__horizontal .carousel-item {
  margin-right: 20px;
}

.collection-items h2 {
  font-size: 1.3em;
  text-decoration: none;
  margin-top: 5px;
}

.collection-items time {
  font-size: 1.2em;
  color: #444;
  position: absolute;
  bottom: 5px;
  right: 5px;
  font-style: italic;
  font-weight: bold;
}

.collection__list {
  padding: 0px;
  text-align: center;
}
.collection__list li {
  display: inline-block;
  margin-right : 20px;
}
.collection__list li:before {
  display: none;
}

.text-intro-image, .text-and-image__image, .event-intro__image {
  display: block;
  width: 80%;
  margin-left: 10%;
}

aside {
  float: right;
  margin-left: 10px;
  width: 30%;
  border: 1px solid gray;
  padding: 5px;
}

.event-intro__meta {
  margin-bottom: 20px;
}



.candidates {
 list-style-type: none;
}
.candidates .nr {
 float: left;
 width: 2em;
 margin-right: 1em;
 text-align: right;
 margin-left: -3em;
}
.candidates .nr:after {
 content: '.';
}
.candidates li  {
 margin-bottom: 15px;
 border-radius: 5px;
 padding-top: 4px;
 padding-left: 8px;
 padding-right: 8px;
 padding-bottom: 4px;
 border-left: 2px solid #00aff0;
 border-right: 2px solid #00aff0;
}
.candidates li:after {
 content: '';
 display: block;
 clear: both;
}
.candidates li a {
 display: block;
 color: inherit;
 text-decoration: inherit;
 padding-top: 4px;
 padding-left: 8px;
 padding-right: 8px;
 padding-bottom: 4px;
 margin-top: -4px;
 margin-left: -8px;
 margin-right: -8px;
 margin-bottom: -4px;
}
.candidates li a:hover {
 background-color: #efebdc;
}
.candidates li a:after {
 content: 'mehr';
 display: block;
 clear: both;
 position: relative;
 top: -1.5em;
 height: 0px;
 left: 20px;
 font-style: italic;
 color: #00aff0;
}
.candidates img {
 float: right;
 width: 150px;
 height: auto;
 border: 3px solid #00aff0;
 border-radius: 3px;
 margin-left: 5px;
}
.candidates i {
 display: block;
 margin-top: 2px;
}



.dateList {
 list-style-type : none;
}
.dateList .date {
 font-weight : bold;
}
.dateList .date:after {
 content : ': ';
}

.categoryList {
 text-align: center;
 margin-top: 10px;
 margin-bottom: 30px;
}
.categoryList .button {
 margin-right: 20px;
}


.thema > div {
 border: 2px solid #efebdc;
}
.thema > div:before {
 display: block;
 background-color: #efebdc;
 color: #bedc0a;
 font-weight: bold;
 font-size: 0.8em;
 line-height: 1em;
}
.thema > div.einleitung:before { content: 'Einleitung in das Thema'; }
.thema > div.problem:before { content: 'Problembeschreibung'; }
.thema > div.forderungen:before { content: 'Forderungen'; }
.thema > div.fortschrittsdefinition:before { content: 'Definition der Fortschrittsmessung'; }
.thema > div.zieldefinition:before { content: 'Begründung wie das Problem gelöst wird'; }
.thema > div.verteidigung:before { content: 'Entkräften von Gegenargumenten'; }



table td, .sortable th {
  border: 1px solid #ddd;
  padding: 8px;
}

table tr:nth-child(even){ background-color: #e2e2e2; }

table tr:hover { background-color: #4EADEB; }

table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #C4DA47;
  color: Black;
}
