// // IMPORTS // @import “lib/variables”; @import “lib/bulma”; @import “lib/overrides”; // Syntax highlighting @import is at the bottom of this file

/**************/ /* BASE RULES */ /**************/

.button {

font-size: $bfs;
background-color: $mi-pink;
color: $mi-bg;
font-weight: bold;
position: absolute;
margin-left: 5px;
padding: 1px 10px;
text-align: center;
display: inline-block;
font-size: 10px;

}

body, html {

line-height: 130%;

}

.is-underlined{

padding-bottom: $bfs /2;
margin-bottom: $bfs *2 !important;
margin-top: $bfs * 2;
border-bottom: solid 1px $mi-grau;

}

/*hr{

    -moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #aaa -moz-use-text-color -moz-use-text-color;
border-image: none;
border-style: dotted none none;
border-width: 1px 0 0;
box-sizing: content-box;
height: 0;

} */

/**************/ /* index */ /**************/

/**************/ /* Footer */ /**************/

.footer {

border-top: solid 1px $mi-pink;

.menu-list {
  li+li {
    border-top: solid 1px rgba(0, 0, 0, 0.2);
  }

  a {
    padding-left: 0;
    font-size: $bfs * 0.8;
  }
}

}

/**************/ /* Header */ /**************/

.is-header {

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  overflow: hidden;
  position: relative;

  &.has-gradient::before{
    content: '';
    top: 0;
    bottom: 0;
    position: absolute;
    right: 0;
    left: 0;
    background-size: auto;
    background-image: linear-gradient(to left,rgba(0,173,47,0), rgba(0,173,47,100));
    background-repeat: no-repeat;
    background-position: bottom;
    opacity: 1;
    z-index: 0;
  }
.title {
  font-weight: 100;
  font-size: $bfs * 2;
}

}

/**************/ /* Timetable */ /**************/

$tt-grid-height: 60px;

.timetable {

.datum {
  height: $tt-grid-height;

  @media (max-width: 999px) {
    height: auto !important;
  }
}

@media (max-width: 999px) {
  .datum:nth-of-type(2) {
    margin-top: $bfs *2;
  }

  h2 {
    border-bottom: $dotted-line;
    padding-bottom: $bfs /4;
    padding-top: $bfs *2;
  }
}

.timetable-wrap {
  position: relative;

  .timetable-grid {
    height: $tt-grid-height;
    border-top: $dotted-line;

    @media (max-width: 999px) {
      border-top: none;
      height: auto;
    }

    .grid-time {
      font-size: $bfs /2;

      @media (max-width: 999px) {
        display: none;
      }
    }
  }

  .veranstaltung-wrap {
    float: left;
    width: 20%;
  }

  .veranstaltungen-wrap {
    position: absolute;
    top: 0;
    left: 30px;

    &:after {
      content: "";
      display: block;
      clear: both;
    }
  }

  .veranstaltung {
    width: 100%;
    background-color: #999;

    border-bottom: solid 1px rgba(255, 255, 255, 0.7);
    border-right: solid 1px rgba(255, 255, 255, 0.7);
    padding: $bfs /2;

    @media (max-width: 999px) {
      height: auto !important;
      padding-top: $bfs;
      padding-bottom: $bfs * 1.5;
    }

    .title,
    .subtitle {
      color: #fff;
      font-size: 0.9rem;
      line-height: 120%;
    }

    .title+.subtitle {
      margin-top: $bfs * -0.8;
    }

    .title {
      font-weight: bold;
    }

    &.training {
      background-color: $mi-lila;
    }

    &.workshop {
      background-color: $mi-gruen;
    }

    &.seminar {
      background-color: $mi-pink;
  }

    &.vortrag {
      background-color: $mi-pink;
    }

    &.feedback {
      background-color: $mi-blau;
    }

    &.orga {
      background-color: $mi-grau;
    }

    &.ganztagesworkshop {
      background-color: $mi-gruen;
    }
  }
}

}

/**************/ /* Veranstaltungsübersicht /**************/

.is-tab-wrap {

display: flex;
flex-wrap: wrap;

.card {
  display: flex;
  flex-direction: column;

  &.is-training .card-header {
    background-color: $mi-lila;

    >.card-header-title {
      color: #fff;
    }
  }

  & .card-content {
    flex-grow: 1;

    dl.overview-card {
      dd,
      dt {
        display: inline-block;
        float: none;
      }

      dd+dt:before {
        content: " // ";
        font-weight: 100;
        color: #999;
      }
    }
  }

  &.is-workshop .card-header {
    background-color: $mi-gruen;

    >.card-header-title {
      color: #fff;
    }
  }

  &.is-ganztagesworkshop .card-header {
    background-color: $mi-gruen;

    >.card-header-title {
      color: #fff;
    }
  }

  &.is-vortrag .card-header {
    background-color: $mi-pink;

    >.card-header-title {
      color: #fff;
    }
  }

  &.is-feedback .card-header {
    background-color: $mi-blau;

    >.card-header-title {
      color: #fff;
    }
  }

  &.is-pruefung .card-header {
    background-color: $mi-black;

    >.card-header-title {
      color: #fff;
    }
  }

  &.is-support-all .card-header {
    background-color: $mi-grau;

    >.card-header-title {
      color: #fff;
    }
  }
}

.is-tab-content {
  flex-basis: 30%;
  margin-right: 3%;

  @media (max-width: 999px) {
    flex-basis: 47%;
    margin-right: 3%;
  }

  @media (max-width: 768px) {
    flex-basis: 100%;
    margin-right: 0;
  }
}

}

/**************/ /* News /**************/

.news-box{

 margin-bottom: $bfs * 2;

 dl{
   margin-bottom: 0;

 }

 .card{
   transition: all 0.3s;
 }

 .card:hover{
   background-color: #000;
   color: #fff;

   h3{
     color: #fff;
   }
 }

 .bm--card-equal-height {
   display: flex;
   flex-direction: column;
   height: 100%;
}
.bm--card-equal-height .card-footer {
   margin-top: auto;
}

figure.image{
  margin: 0;

  img{
   object-fit: cover;
  }
}

}

////////////// // Links ////////////// .panel {

margin-bottom: 2rem;

}

.panel-block.is-active {

color: $mi-pink;

}

.link-overview .link-overview__item+.link-overview__item {

border-top: solid 1px $mi-grau;
margin-top: 1rem;
padding-top: 1rem;

}

/**************/ /* Content */ /**************/

}

.section {

padding-top: $bfs;

}

.section:nth-of-type(2) {

padding-top: $bfs *2;

}

.is-overview-item {

margin-bottom: $bfs *2;

}

.cite{

padding: $bfs;
background-color: $mi-bg;

}

.content {

  li{
      margin-left: 1em;
  }

  p,
  li,
  table {
      max-width: $bfs * 36;
  }

h1 {
  font-size: $bfs * 1.6;
  font-weight: 500;
}

h2 {
  font-size: $bfs * 1.4;
  font-weight: 500;
}

h3 {
  font-size: $bfs;
  font-weight: 600;
}

h4 {
  font-size: $bfs;
  font-weight: 600;
}

h5 {
  font-size: $bfs;
  font-weight: 600;
}

h6 {
  font-size: $bfs;
  font-weight: 600;
}

/*ul{
              margin-left: 1em;
  }*/

dl {
  margin-bottom: $bfs;

  dt {
    display: block;
    float: left;
    min-width: 10px;
    padding: $bfs /8 0;
    font-weight: bold;
    color: $info;
  }

  dd {
    /*border-bottom: solid 1px $grey-light; */
    padding: $bfs /8 0;
    margin-left: 0;
  }

  dt::after {
    content: ":";
    display: inline-block;
    padding-right: $bfs /4;
  }
}

table {

  a,
  a:not(.button) {
    border: none;
  }

  th {
    font-weight: 600;
  }

  .no-border {

    th,
    td {
      border: none;
    }
  }
}

table {
  @extend .table;
}

table.tab-schwerpunktmodule {
  th {
    width: 40%;
  }

  th+th+th {
    width: 20%;
  }
}

.footnotes {
  border-top: solid 1px #9313ce;
  padding-bottom: $bfs;
  border-bottom: solid 1px #9313ce;
}

.img-responsive {
  width: 100%;
}

figure {
  border-top: dotted 1px $mi-gruen;
  padding-top: $bfs;
  margin-top: $bfs;

  figcaption {
    display: block;
    padding-bottom: $bfs /2;
    padding-top: $bfs;
    margin-bottom: $bfs;
    font-style: normal;
    color: $mi-gruen;
    border-top: dotted 1px $mi-gruen;
    text-align: left;
  }
}

td.pm {
  background-color: $mi-blau;
}

td.spp {
  background-color: $mi-gruen;
}

td.spmw,
td.spm {
  background-color: $mi-pink;
}

td.pm-grau,
td.wpm {
  background-color: lighten($mi-black, 50%);
}

.lighten {
  * {
    color: #aaa;
  }
}

}

.zweispalter {

h2 {
  border-top: dotted 1px $grey-light;
  padding-top: $bfs;
}

.content {
  @media (min-width: 999px) {
    >* {
      margin-left: 50% !important;
    }

    h3 {
      font-size: $bfs;
      font-weight: 700;
      color: $mi-black;
      line-height: 130%;
    }

    &>h1,
    &>h2,
    &>h3 {
      margin-left: 0 !important;
      float: left;
      width: 48%;
      padding-left: 20%;
      margin-top: 0 !important;
      text-align: right;
      hyphens: none;
    }

    &>h4,
    &>h5,
    &>h6 {
      font-weight: 600;
      margin-top: $bfs;
      margin-bottom: $bfs /2;
    }

    &>h1,
    &>h2 {
      /*border-top: dotted 1px #aaa; */
      padding-top: $bfs;
      text-align: left;
      padding-right: 10%;
      padding-left: 0;
    }

    &>h1+p,
    &>h2+p {
      margin-top: $bfs * 4 !important;
    }

    &>h2:not(:first-child) {
      margin-top: $bfs *3 !important;
    }
  }
}

}

.modulbeschreibung {

h2 {
  border-top: dotted 1px $grey-light;
  padding-top: $bfs;
}

.content {}

}

.faq {

clear: both;

}

.toc {

border-left: solid 1px $mi-pink;

.menu-list {
  padding-left: $bfs *2;
}

}

.is-small {

font-size: 80%;

}

.is-less-important {

opacity: 0.7;

}

.is-hidden {

display: none;

}

.more-button {

font-size: $bfs * 1.5 !important;
display: inline-block;
margin-left: $bfs /2;
transition: all 0.5s;

&:hover {
  cursor: pointer;
}

&.active {
  transform: rotate(180deg);
}

}

nomenklatur {

overflow-x: auto;

table {
  max-width: 65rem;
}

}

@media (max-width: 999px) {

html,
body {

  /*font-size: 60%;
              line-height: 110%;*/
  .content {
    h1 {
      font-size: $bfs * 1.4;
      font-weight: 500;
    }

    h2 {
      font-size: $bfs * 1.2;
      font-weight: 500;
    }

    h3 {
      font-size: $bfs;
      font-weight: 700;
    }

    h4 {
      font-size: $bfs;
      font-weight: 600;
    }

    h5 {
      font-size: $bfs;
      font-weight: 600;
    }

    h6 {
      font-size: $bfs;
      font-weight: 600;
    }
  }
}

}

@media print {

section.hero,
.is-non-print {
  display: none;
}

}

@media screen {

.is-print {
  display: none;
}

}

// Settled on moving the import of syntax highlighting to the bottom of the CSS // … Otherwise it really bloats up the top of the CSS file and makes it difficult to find the start //@import “highlights”; @import “lib/svg-icons”;

.highlight {

background-color: $mi-pink;
color: #fff;
border: none;
box-shadow: none;
margin: 20px 0;
overflow: auto;
padding: 7px 7px 7px 10px;

}

pre code {

background-color: transparent;
color: #fff;
font-family: $family-monospace;

}

.codesnippet{

figure.highlight{
  text-align: left;
  background-color: $mi-grau;
  color: #000;
  margin: 0;
  padding: 0;

  code{
    color: #000;
  }
}

}

/* Für die fianle Version werden ein paar Angaben nicht gezeigt */

.bearbeiten, .doc-status {

display: none;

}

.js-video {

height: 0;
padding-top: 25px;
padding-bottom: 56.5%;
position: relative;
overflow: hidden;

}

.js-video.widescreen {

padding-bottom: 56.34%;

}

.js-video.vimeo {

padding-top: 0;

}

.js-video embed, .js-video iframe, .js-video object, .js-video video {

top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;

}