/*The basic styling of HTML elements*/
*{
  box-sizing: border-box;
}
html{
  padding:0;
  margin:0;
  height:100%;
  width:100%;
  line-height:1.4;
  font-size:16px;
}
body{
  padding:0;
  margin:0;
  height:100%;
  width:100%;
  font-family: 'Roboto';
  font-weight:400;
  background-color:white;
  color:var(--text);
  position: relative;
  background-color:rgba(0,0,0,0.05);
}
h1,h2,h3{
  margin:0;
  padding-top:0.5em;
}
.initially_hidden{
  display:none;
}
.only_on_wide_screens{
  display:none;
}
video{
  width:100%;
}

@media screen and (min-width: 1000px) {
  .only_on_wide_screens{
    display:inline-block;
  }
}
body.public content h1{
      text-align:center;
}
a{
  svg.icon{
    display:inline-block;
    width:.75rem;
    height:.75rem;
    margin-right:0.2rem;
    vertical-align: text-bottom;
  }
}

.regenbogen{
  &>*:nth-child(6n+1) .jenapharm{
    background-color: rgba(216, 24, 129, 0.7);
  }
  &>*:nth-child(6n+2) .jenapharm{
    background-color: rgba(209, 70, 31, 0.7);
  }
  &>*:nth-child(6n+3) .jenapharm{
    background-color: rgba(168, 0, 95, 0.7);
  }
  &>*:nth-child(6n+4) .jenapharm{
    background-color: rgba(234, 184, 228, 0.7);
  }
  &>*:nth-child(6n+5) .jenapharm{
    background-color: rgba(255, 132, 0, 0.7);
  }
  &>*:nth-child(6n+6) .jenapharm{
    background-color: rgba(204, 51, 59, 0.7);
  }
}
/*ckeditor */
form div.ck-editor{
  /* Label über Toolbar*/
  &>label.ck-label{
    display:none !important;
  } 
  /* Text-Box des Editors */
  div.ck-content {
    min-height:400px;
    max-height:600px;
  }
  div.ck-heading_paragraph_footnote{
    font-size:80%;
  }
}
content {
  .alert {
    color: var(--violettrot);
  }

  h1,
  h2,
  h3 {
    font-family: "RobotoCondensed";
    font-weight: 200;
    color: var(--text_dunkler);
  }
  p{
    margin: 0.5rem 0;
  }
  div.banner {
    height: 30vw;
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: 1rem;
    border: 1px solid var(--rot);
    background-position: center center;
    background-size: cover;

    h1 {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      color: white;
      background-color: color-mix(in srgb, var(--rot), transparent  30%);
      padding: 0.25rem;
      margin: 0;
    }

    &.violettrot {
      border-color: var(--violettrot);

      h1 {
        background-color: color-mix(in srgb, var(--violettrot), transparent  30%);
      }
    }

    &.violett {
      border-color: var(--violett);

      h1 {
        background-color: color-mix(in srgb, var(--violett), transparent  30%);
      }
    }

    &.rosa {
      border-color: var(--rosa);

      h1 {
        background-color: color-mix(in srgb, var(--rosa), transparent  30%);
      }
    }

    &.gelb {
      border-color: var(--gelb);

      h1 {
        background-color: color-mix(in srgb, var(--gelb), transparent  30%);
      }
    }

    &.orange {
      border-color: var(--orange);

      h1 {
        background-color: color-mix(in srgb, var(--orange), transparent  30%);
      }
    }

    &.compact {
      height: inherit !important;
      background-image: none !important;

      h1 {
        position: relative;
      }
    }
  }

  a {
    text-decoration: none;
    font-weight: bold;
    color: var(--text);
    border: 1px solid white;
    padding: 0 0.25rem;

    &:before {
      content: "»";
      margin-right: 0.25rem;
      color: var(--violettrot);
    }

    &.back {
      &:before {
        content: "«";
      }
    }

    &:hover {
      background-color: var(--rosa);
      border-radius: 2px;
      border: 1px solid var(--violett);
    }
    &.no_arrow{
      border: 0px solid white;
      padding: 0;
      &:before {
        content: "";
        margin-right: 0;
      }
    }
    &.qr_code{
      position:absolute;
      top:0.25rem;
      right:0.25rem;
      background-image: url(/assets/qr-gynfakultaet-9729dd97aa2ca78c1dbd2e77d6d122ceb801963d3067764c190fedc1ad02555f.png);
      width:2rem;
      height:2rem;
      display:inline-block;
      background-size: cover;
    }
  }

  div.slist {
    margin-top: 2rem;
    margin-bottom: 2rem;
    /* //    border:1px solid var(--grau_table_line); */
    border-bottom: 1px solid var(--grau_table_line);

    div.slistitem {
      position: relative;
      clear: both;
      border-width: 1px 1px 0 1px;
      border-style: solid;
      border-color: var(--grau_table_line);
      min-height: 2rem;
      &:after {
        /* // just a lousy hack to avoid appending some clear-tag into the last item
        // http://www.positioniseverything.net/easyclearing.html */
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }
      &.insert-before {
        border-top: 3px solid rgb(236, 32, 127);
      }
      &.insert-after {
        border-bottom: 3px solid rgb(236, 32, 127);
      }
      img.preview {
        float: left;
        width: 100px;
        margin-right: 0.5rem;
      }

      &:first-child {
        border-radius: 4px 4px 0 0;
      }

      &:last-child {
        /* //border-bottom-width: 1px; */
        border-radius: 0 0 4px 4px;
      }

      &.highlighted {
        border: 1px solid var(--violettrot);
        background-color: var(--rosa);
      }

      &:hover {
        background-color: var(--grau_ganz_hell);
      }

      a.editlink {
        position: absolute;
        display: none;
        top: 0.25rem;
        right: 0.25rem;
        width: 2rem;
        height: 2rem;
        padding: 0.25rem;

        &:before {
          content: none;
        }

        &:nth-child(2) {
          right: 2.75rem;
        }

        &:nth-child(3) {
          right: 5.25rem;
        }

        &:nth-child(4) {
          right: 7.75rem;
        }

        svg.icon {
          width: 1.5rem;
          height: 1.5rem;
          fill: var(--text_dunkler);
        }
      }

      &:hover {
        a.editlink {
          display: inline-block;

          &:hover {
            svg.icon {
              fill: var(--violettrot);
            }
          }
        }
      }

      &.sortable-ghost {
        /* // Sortable class for the drop placeholder */
        border: 1px solid green;
      }

      &.sortable-chosen {
        /* // name for the chosen item */
        border: 1px solid var(--violettrot);
        background-color: var(--rosa);
      }

      &.sortable-drag {
        border: 1px solid var(--rosa);
        background-color: var(--grau_ganz_hell);
      }

      &.h1,
      &.h2,
      &.file,
      &.bigfile,
      &.mfile,
      &.html,
      &.packmittel,
      &.link {
        h1.title {
          margin: 0;
          padding: 0.25rem;
          font-size: 1.25rem;
        }
      }

      &.h1 {
        background-color: var(--grau_ganz_hell);

        h1.title {
          font-size: 1.5rem;
        }
      }

      &.h2 {
        h1.title {
          padding-left: 0.75rem;
          font-size: 1.25rem;
        }
      }

      &.mfile {
        h1.title {
          font-family: "Roboto";
          font-weight: 300;
          padding-left: 1.25rem;
        }
      }

      &.packmittel {
        h1.title {
          font-family: "Roboto";
          font-weight: 300;
          padding-left: 2.25rem;
        }
      }

      &.html {
        h1.title {
          font-family: "Roboto";
          font-weight: 700;
          padding-left: 2.25rem;
          font-size: 1rem;
          color: var(--text);
        }
      }

      &.file,
      &.bigfile {
        a.file {
          /* display: block; */
          /* padding-left: 1.25rem; */
          /* padding-top: 0.5rem; */
          /* padding-bottom: 0.5rem; */
          display: inline;
          border-width: 0;
        }
      }
      &.link, &.file{
        padding-left: 1.25rem;
      }

      &.mfile,
      &.html,
      &.packmittel {
        padding-bottom: 0.25rem;

        a.file {
          display: block;
          padding-left: 2rem;
          border-width: 0;
        }

        &.mit_titel {
          a.file {
            padding-left: 2.25rem;
          }
        }
      }
      &.html,
      &.packmittel {
        div.html {
          margin: 0rem;
          padding-left: 2.25rem;
          padding-top: 1rem;
          padding-bottom: 1rem;
          a.packshot {
            float: right;
            text-decoration: none;
            border: 1px solid transparent;
            margin: 0.25rem;
            padding: 0;
            max-width: 40vw;

            &:hover {
              border-color: var(--violettrot);
            }

            img {
              max-width: 400px;
              max-height: 400px;
              margin: 0;
              padding: 0;
            }
          }

          ul,
          ol {
            padding-left: 2rem;
          }
        }
      }

      &.kollege {
        img.preview {
          margin: 0.5rem;
          filter: grayscale(1);
        }

        &:hover {
          img.preview {
            filter: none;
          }
        }

        div.html {
          padding-top: 0;
          padding-bottom: 0;
        }
      }

      &.aktuell {
        & > a {
          display: block;
          margin-top: 0.5rem;
          margin-bottom: 0.5rem;
        }

        span.datum {
          display: inline-block;
          font-weight: normal;
          font-style: italic;
          margin-left: 1rem;
        }

        & > ul {
          margin: 0.25rem;
        }
      }

      &.zugangsdaten {
        padding: 0rem;

        h3 {
          font-size: 1.25rem;
          padding: 0.25rem 0.5rem 0 0.5rem;
          margin: 0;
        }

        p {
          font-size: 1rem;
          padding: 0rem 0.5rem;
          margin: 0;
        }
      }

      &.collapsable {
        h1.title {
          cursor: pointer;

          &:before {
            content: "-";
            color: var(--violettrot);
            color: var(--violettrot);
            font-weight: bold;
            /* //margin-right:0.5rem; */
            position: absolute;
            left: 1.1rem;
            top: 0.1rem;
            line-height: 100%;
            font-size: 150%;
          }
        }

        &.collapsed {
          h1.title {
            &:before {
              content: "+";
            }
          }

          div.html {
            display: none;
          }

          a.file {
            display: none;
          }
        }
      }

      span.item_date {
        display: none;
        font-size: 80%;
        font-weight: normal;
        padding: 0rem 0.2rem;
        background-color: var(--grau_ganz_hell);
        border: 1px solid var(--text);
        border-radius: 3px;
        white-space: nowrap;

        &.heute {
          font-weight: bold;
          color: var(--violettrot);
        }

        &.gestern {
          font-weight: bold;
          color: var(--violettrot);
        }

        &.woche {
          font-weight: bold;
        }
      }
    }
  }
}

form {
  display: block;
  margin: 0;

  div.form-group {
    padding: 0.5rem 0;
    margin: 0;
    display: flex;
    flex-direction: column;

    label {
      display: block;

      &.for_checkbox {
        width: inherit;
        text-align: left;
        flex-grow: 1;
      }
    }

    input {
      display: block;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea {
      width: 100%;
    }

    &.block {
      flex-direction: column;

      label {
        display: block;
        width: 100%;
        text-align: left;
      }

      input,
      select {
        display: block;
        width: 100%;
      }

      label.checkbox2 {
        display: inline-block;
        width: inherit;
      }

      input.checkbox2 {
        display: inline-block;
        width: inherit;
      }

      input.antwortbox {
        display: inline-block;
        width: inherit;
      }

      input[type="text"].antwortbox {
        width: 90%;
      }
    }

    &.inlineblock {
      flex-direction: row;

      input {
        display: inline;
        width: inherit;
        flex-grow: 1;
      }
    }

    &.for_checkbox {
      flex-direction: row;
    }

    &.group_access {
      display: none;
    }

    &.trashed {
      background-color: var(--grau_ganz_hell);

      label {
        color: var(--text_heller);
        font-weight: normal;
        text-decoration: line-through;
      }
    }

    div.error_file_to_large {
      display: none;
      color: red;
    }

    &.error_file_to_large {
      div.error_file_to_large {
        display: block;
      }
    }
  }

  label {
    font-weight: bold;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  select,
  textarea {
    padding: 0.25rem 0.5rem;
  }

  input[type="submit"] {
    padding: 0.25rem 1rem;
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 1.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.5rem;
  }

  textarea {
    min-height: 5rem;

    &[data-ckeditor] {
      min-height: 12rem;
    }
  }

  div.progress_frame {
    display: none;
    margin: 5px 0 0 0;
    border: 1px solid var(--violettrot);
    position: relative;

    div.progress_bar {
      background-color: var(--rosa);
      height: 20px;
      width: 0;
    }

    div.progress_number {
      position: absolute;
      top: 0;
      font-size: 10px;
      padding: 2px 12px;
      font-weight: bold;
      color: black;
    }
  }

  code {
    display: block;
    font-size: 10px;
    white-space: pre-line;
  }
}

table {
  width: 100%;
  border-collapse: collapse;

  th {
    text-align: center;
    font-weight: normal;
    padding: 0.25rem;
    border: 1px solid var(--text);
    background-color: var(--grau_ganz_hell);
  }

  tr.rotated th {
    transform: rotate(-90deg);
    width: 40px;
    max-width: 40px;
    height: 105px;
    background-color: transparent;
  }

  td {
    text-align: left;
    padding: 0.25rem;
    border: 1px solid var(--text);
    &.rechts{
      text-align: right;
    }
  }
  tr.fett{
    td,th{
      font-weight: bold;
    }
  }
  tr.no_link_decoration td {
    text-align: right;

    a {
      padding: 0;
      margin: 0;

      &:before {
        content: none;
      }

      &:hover {
        padding: 0;
        margin: 0;
        border-width: 0;
      }
    }
  }
  .image{
    height: 5rem;
  }
  td.nowrap{
    white-space: nowrap;
  }
}

div.presse {
  img.img-left {
    display: block;
    float: left;
    width: 50%;
    margin: 2.5% 2.5% 2.5% 0;
  }

  img.img-right {
    display: block;
    float: right;
    width: 50%;
    margin: 2.5% 0 2.5% 2.5%;
  }

  a {
    content: "";
    color: var(--violettrot);
    font-weight: bold;
    padding: 0;
    border-width: 0;

    &:hover {
      padding: 0;
      background-color: white;
      text-decoration: underline;
    }

    &::before {
      content: "";
      margin-right: 0;
    }
  }
}

@media screen and (min-width: 768px) {
  content {
    div.banner {
      height: 275px;
    }
  }

  form {
    div.form-group {
      flex-direction: row;

      label {
        width: 25%;
        text-align: right;

        &.for_checkbox {
          width: inherit;
          text-align: left;
          flex-grow: 1;
        }
      }

      input[type="text"],
      input[type="email"],
      input[type="password"] {
        width: 75%;
      }

      input[type="checkbox"],
      input[type="radio"] {
        width: 1.5rem;
        height: 1.5rem;
        margin-right: 0.5rem;
      }

      &.block {
        flex-direction: column;

        label {
          display: block;
          width: 100%;
          text-align: left;
        }

        input {
          display: block;
          width: 100%;
        }
      }
    }
  }
}

/*END content*/
:root{
    --break-point:768px;
    --desktop_frame_width:1000px;
    --header-height:2.5rem;
    --menu_width:200px;
    
    --text: #666;
    --text_dunkler: #333;
    --text_heller: #8f8f8f;
    --grau_hell:#d9d9d9;
    --grau_ganz_hell:#eee;
    --grau_table_bg:#ededed;
    --grau_table_line:#e5e5e5;
    
    --rosa:#EAB8E4; /*hsl(307,54,82);*/
    --violett:#A8005F; /* hsl(326,100,33)*/
    --violettrot:#D81881; /* hsl(327,80,47) */
    --rot: #CC333B; /* hsl(357,60,50) */
    --gelb:#FF8400; /* hsl(31,100,50)*/
    --orange:#D1461F; /* hsl(13,74,47)*/
     
}
div.flash{
  text-align: left;
  padding:.7rem 1rem;
  background-color: var(--grau_hell);
  color:var(--text_dunkler);
  margin:0 0 2rem 0;
  display:flex;
  align-items: center;
  svg{
    flex-shrink: 0;
    width:2rem;
    height:2rem;
    display:block;
    fill:var(--text_dunkler);
    vertical-align:middle;
    margin-right:1rem;
  }
  div.message{
    font-weight:700;
    vertical-align: middle;
  }
  &.error{
    svg{
      fill:var(--violettrot);
    }
    div.message{
      color:var(--violettrot);
    }
  }
  &.expired,&.explosion{
    background-color: var(--violettrot);
    color:white;
    a{
      color:white;
      text-decoration: underline;
    }
    svg{
      fill:white;
    }
  }
}
/* Fonts RobotoCondensed */
/*
100	Thin (Hairline)
200	Extra Light (Ultra Light)
300	Light
400	Normal (Regular)
500	Medium
600	Semi Bold (Demi Bold)
700	Bold
800	Extra Bold (Ultra Bold)
900	Black (Heavy)
*/
@font-face {
  font-family: 'RobotoCondensed';
  font-style: normal;
  font-weight: 300;
  src: url(/assets/RobotoCondensed/RobotoCondensed_Light-15a40dac527b70ba531691ce40720311c02db2621778d63e0a64ea34aeff08ed.woff) format('woff');
}
@font-face {
  font-family: 'RobotoCondensed';
  font-style: italic;
  font-weight: 300;
  src: url(/assets/RobotoCondensed/RobotoCondensed_LightItalic-d7608fa72b7a0a7b2b905f4cc79d2780e9f373ec530b67ec81810be1bfdd509b.woff) format('woff');
}
@font-face {
  font-family: 'RobotoCondensed';
  font-style: normal;
  font-weight: 400;
  src: url(/assets/RobotoCondensed/RobotoCondensed_Regular-ce7e51058a256a76e805a35d68fd77dce052f15ced4030b1ba9c45a59a2d8a11.woff) format('woff');
}
@font-face {
  font-family: 'RobotoCondensed';
  font-style: italic;
  font-weight: 400;
  src: url(/assets/RobotoCondensed/RobotoCondensed_Italic-2276173b35edf8208d4e1f479700abdc3af5396e228660e97f2b585c8787a403.woff) format('woff');
}
@font-face {
  font-family: 'RobotoCondensed';
  font-style: normal;
  font-weight: 700;
  src: url(/assets/RobotoCondensed/RobotoCondensed_Bold-3f7c530bb9601a4acc2968c9621c1c2e9e908e5b9126dc2cb5750fc1def93aeb.woff) format('woff');
}
@font-face {
  font-family: 'RobotoCondensed';
  font-style: italic;
  font-weight: 700;
  src: url(/assets/RobotoCondensed/RobotoCondensed_BoldItalic-5d225d4a74e575976037d4e49ea8ddfe0c5765eb6d399c658d7db4f1fb3a9d3c.woff) format('woff');
}
/* Fonts Roboto */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url(/assets/Roboto/Roboto_Thin-593f192d87dee817e09b7a5f0136728ed784a44505b1a0bbe0b18dd885f221e0.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100;
  src: url(/assets/Roboto/Roboto_ThinItalic-55ad7e218374988d9c05e97c70315d63f1a84976e951bdbd34d9c4c3e4eab150.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url(/assets/Roboto/Roboto_Light-01c91013b7ce07da113f41c4797b51f4c155f4b4cda693f69e543c82598c9100.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: url(/assets/Roboto/Roboto_LightItalic-6052ce611ff17e145db87c1df78ee002f7b192404a539ae7be72706071b9b372.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(/assets/Roboto/Roboto_Regular-29194a712013ab096f849e39b61190bf9be1d57f0dc2777ba520afb2caa3f832.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url(/assets/Roboto/Roboto_Italic-b9c205b5d806f089359b465c06020411bc39c1f296b7d538e738709cbda03ce0.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url(/assets/Roboto/Roboto_Medium-54c20a58c46c128ba5b518953746121b4259573415567c62377f655c8b692793.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: url(/assets/Roboto/Roboto_MediumItalic-d34e3f6781a7ad29e1d573b78b39e5c566994760e82cd46fb54412349158fa9f.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url(/assets/Roboto/Roboto_Bold-dab3ef29195e16cc260fb333b9650b30355d9fe823052696f5622ddc75337964.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: url(/assets/Roboto/Roboto_BoldItalic-c2c70bef492154bf9872386509067066bccfa15ce23f47b4a555678967c016e0.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: url(/assets/Roboto/Roboto_Black-1860b7148e75636bc01257f60b57dd39de891e526d6401910207d0573757b705.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 900;
  src: url(/assets/Roboto/Roboto_BlackItalic-f922787892258e0d1341851af64620e5af988814a201e97c9d28d35a9d8d37a9.woff) format('woff');
}
footer{
  padding:0.5rem;
  line-height: 2rem;
  a{
    float:right;
    color:var(--text_dunkler);
    text-decoration: none;
    vertical-align: middle;
    &:hover{
      text-decoration: underline;
    }
    svg.icon{
      width:1rem;
      height:1rem;
    }
  }
}

header{
  display: flex;
  flex-direction: row;
  #controls{
    padding:0.5rem 0;
    text-align: right;
    flex-grow: 1;
    min-height:var(--header-height);
    display: flex;
    justify-content: end;
  }
  a{
    width:1.5rem;
    height:1.5rem;
    margin:0 0.5rem;
    padding:0;
    color:var(--text);
    svg.icon{
      width:1.5rem;
      height:1.5rem;
      fill:var(--text);
    }
  }
}
@media screen and (min-width: 1000px) {
  body{
    header{
      #menu_toggle_fullwidth{
        display:inline-block;
      }
      #menu_toggle_fullwidth_shrink{
        display:none;
      }
    }
  }
  body.fullwidth{
    header{
      #menu_toggle_fullwidth{
        display:none;
      }
      #menu_toggle_fullwidth_shrink{
        display:inline-block;
      }
    }
  }
}
menu{
  font-family: 'RobotoCondensed';
  padding:0;
  margin:0;
  background-color:rgba(0,0,0,0.1);
  a, a:visited{
    display:block;
    font-weight:400;
    color:var(--text_dunkler);
    background-color:rgba(0,0,0,0.05);
    margin-bottom: 1px;
    padding:.25rem .5rem;
    text-decoration: none;
    position: relative;
    padding-left:12px;
    font-size:1.5rem;
    &.l2{
      font-size:1.25rem;
      margin-left:1.3rem;
    }
    &.active{
      background-color:rgba(0,0,0,0.15);
    }
    &:hover{
      background-color:rgba(0,0,0,0.2);
    }
    div.jenapharm{
      position: absolute;
      left:0;
      top:0;
      width:8px;
      bottom: 0px;
    }
  }
  &>span{
    display:block;
    padding-top:1rem;
    text-align: center;
    font-size: 1.5rem;
  }
}


/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}
@media print {
  body{
    background-color:white !important;
    display: block;
    #frame{
      display: block;
      border-width:0;
     max-width:100%;
     header, main menu, footer{
       display:none;
     }
     main{
       display: block;
       content{
         display: block;
         border-width:0;
         div.banner{
           background-image:none !important;
           height:inherit;
           border-width:0;
           min-height: 3em;
           padding:0;
           margin:0;
           h1{
             color:var(--violettrot);
             background-color:white;
             padding:0;
             margin:0;
           }
         }
       }
     }
   }
  }
}
/* END Print */
#search_in_page_form{
  position: relative;
  margin:0.5rem 0;
  padding:.25rem .5rem;
  background-color: var(--grau_ganz_hell);
  color:var(--text_dunkler);
  border:1px solid var(--grau_hell);
  h1{
    padding:0;
    font-size:1.5rem;
  }
  a.close{
    position: absolute;
    right:0.25rem;
    top:0.25rem;
    width:2rem;
    height:2rem;
    border-color:var(--grau_ganz_hell);
    padding:0.25rem 0;
    text-align: center;
    svg{
      width:1.5rem;
      height:1.5rem;
      margin: 0;
    }
    &:before{
      content: "";
    }
    &:hover{
      border-color:var(--violettrot);
      svg{
        fill:var(--violettrot);
      }
    }
  }
  p{
    padding: 0;
    margin:0;
    a{
      border-color:var(--grau_ganz_hell);
      &:hover{
        border-color:var(--violettrot);
      }
    }
  }
}
content .slist .slistitem.html .html,
content .slist .slistitem.packmittel .html,
form div.ck-editor div.ck-content{
  h1,h2,h3,h4{
    font-family: 'RobotoCondensed';
    font-weight:300;
    color:var(--text_dunkler);
    line-height: 1;
    padding:0.25rem 0;
    margin:0;
  }
  h2{
    font-size:1.5rem;
  }
  h3{
    font-size:1.25rem;
  }
  h4{
    font-size:1rem;
    font-weight:400;
  }
  p{
    margin:0;
    padding:0.2rem 0;
    &.footnote{
      padding: 0.15rem 0 0.15rem 0.25rem;
      font-size: 80%;
      line-height: 1;
    }
  }
  ul,ol{
    padding: 0.2rem 0.2rem 0.2rem 1.25rem;
    margin: 0;
  }
  a{
    /* //white-space: nowrap; */
    padding:0;
    margin:0;
    border-color:transparent;
    &:before{
      content:none;
    }
  }
  mark{
    &.marker-rosa, &.marker-violett, &.marker-violettrot, &.marker-rot, &.marker-gelb, &.marker-orange{
      color:var(--text_dunkler);
    }
    &.marker-rosa{
      background-color:var(--rosa);
    }
    &.marker-violett{
      background-color:var(--violett);
    }
    &.marker-violettrot{
      background-color:var(--violettrot);
    }
    &.marker-rot{
      background-color:var(--rot);
    }
    &.marker-gelb{
      background-color:var(--gelb);
    }
    &.marker-orange{
      background-color:var(--orange);
    }
    &.pen-rosa, &.pen-violett, &.pen-violettrot, &.pen-rot, &.pen-gelb, &.pen-orange{
      background-color:inherit;
    }
    &.pen-rosa{
      color:var(--rosa);
    }
    &.pen-violett{
      color:var(--violett);
    }
    &.pen-violettrot{
      color:var(--violettrot);
    }
    &.pen-rot{
      color:var(--rot);
    }
    &.pen-gelb{
      color:var(--gelb);
    }
    &.pen-orange{
      color:var(--orange);
    }
  }
  figure{
    text-align: left;
    margin:0;
    &.image{
      display:block;
      max-width:100%;
      margin:0.25rem auto;
    }
    &.image-style-side{
      float:right;
      margin:0 .25rem .25rem 0;
    }
    &.table{
      max-width:100%;
      th,td{
        padding:0.1rem 0.25rem;
        text-align:left;
      }
      th{
        background-color:var(--grau_ganz_hell);
        font-weight:bold;
        text-align: center;
      }
    }
  }
}
body{
  text-align: center;
  /*background-color:red;*/
  #frame{
    position: relative;
    text-align: left;
    display:flex;
    flex-direction: column;
    margin:0 auto;
    max-width: var(--desktop_frame_width);
    &>*{
      min-height:var(--header-height);
    }
  }
  &.fullwidth>#frame{
    max-width:100%;
  }
  &.public{
    #frame{
      width:90%;
      max-width:var(--break-point);
      margin:3em auto;
    }
  }
}
@media screen and (max-width: 768px) { 
  body{
    #frame{
      width:100%;
      max-width: 100%;
      margin:0;
    }
    &.public{
      #frame{
        width:90%;
        max-width: 90%;
        margin:3em auto;
      }
    }
  }
}
body #frame>*{
  border:1px solid rgba(0,0,0,0.05);
}
header{
  position: fixed;
  width:100%;
  background-color:rgba(255,255,255,0.25);
  background-color:rgba(220, 220, 220, 0.75);
  max-width:var(--desktop_frame_width);
  z-index:100000;
}
body.fullwidth header{
  max-width:100%;
}

main{
  background-color:white;
  margin: 0;
  display:flex;
  flex-direction: column;
  menu{
    display:none;
    margin:0;
    padding:var(--header-height) 0 0 0;
  }
  content{
    margin:0;
    padding:var(--header-height) .5rem .5rem .5rem ;
    flex-grow:1;
  }
}
@media screen and (min-width: 768px) { 
  main{
    display:flex;
    flex-direction: row;
    menu{
      display:block;
      width:var(--menu_width);
      min-width:var(--menu_width);
    }
  }
}
footer{
  background-color:rgba(0,0,0,0.05);
}
/* END Structure */
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */