/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans-v34-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans-v34-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

.strong {font-weight: 600;}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

   * {box-sizing: border-box;
    --bs-gutter-x: 0.7em;
    --bs-gutter-y: 0.7em;
  }

   body {padding:0;
    margin:0;
    font-family: 'Open Sans', sans-serif;
    color:#333;
    font-size:14px;  
    line-height: 1.6;
    background:#f0f0f0;
  }

  a {text-decoration: none;
      color:#fcb117;}

  a:hover {
        color:#ff9300;}



  .btn-primary {background:#fcb117;
      display:block;
    border:none;
    width:100%;}    
    
  .btn-primary:hover {background:#333;}

  .btn-secondary {background:#333;
    display:block;
  border:none;
  width:100%;}    
  
.btn-secondary:hover {background:#fcb117;}

.btn-ohne {border:none;
  background:none;
  margin-left:2rem;}

  .btn-ohne:hover {color:#fcb117;}

  ul.liste {list-style:none;}

  ul.liste li {position: relative;
      line-height: 1.57em;
      font-size:var(--font-size);
      margin:0.25em 0;}
    
  ul.liste li:before {font-family: "Font Awesome 5 Free";
      font-weight: 900; 
      content: "\f054";
      color:#fcb117;
      position:absolute;
      left:-1.85em;
      top:0;
      font-size:0.75em;
  }

  .card {height:100%;
    border-radius:10px;}

  .card-body {padding:2em;}

  .onlyflex {display:flex;  
    gap:1rem;}

  .onlyflex > div {width:100%;
  height:unset;}
  
  .onlyflex > div.preview {max-width:400px;}

/* ==========================================================================
   LOGIN-Bereich
   ========================================================================== */
  #loginSection {display:flex;
    height:100vh;
    background:#fff;}

  #loginSection #formlogo {max-width:308px;
    margin:0 auto 3.5em;}

  #loginSection > div {width:50%;
    display:flex;
    align-items:center;
    justify-content: center;}

    #loginSection > div:first-child {
      background:url(/img/shutterstock_1986979817.jpg);
      background-size:cover;
      background-position:center;
    }

    #loginSection form {width:100%;
      max-width:400px;
    position:relative;
     z-index:1;}

      #loginSection form .formfield {margin-bottom:1em;}

      #loginSection form .formfield label {margin-bottom:0.3em;
        display:block;
        font-size:0.8em;
      width:100%;}

    #loginSection .form-control {display:block;
      width:100%;
      border:1px solid #ccc;
      padding:0.5em;}

      #loginSection .btn-ohne {width:100%;
        display:block;
        text-align: center;
        margin-top:0.5em;
        text-decoration: none;
        color:#333;}

        #loginSection > div:last-child:after {
          content: "";
          width: 0px;
          height: 0px;
          border-bottom: 100vh solid transparent;
          border-right: 350px solid #fff;
          border-top: 0 solid transparent;
          border-left: 0px solid transparent;
          position: absolute;
          top: 0;
          left: calc(50% - 250px);
      }
      #loginSection > div:last-child:before {
          content: "";
          width: 0px;
          height: 0px;
          border-top: 100vh solid transparent;
          border-right: 350px solid #fff;
          border-bottom: 0 solid transparent;
          border-left: 0px solid transparent;
          position: absolute;
          top: 0;
          left: calc(50% - 250px);
      }


  /* ==========================================================================
   ALLGEMEINES
   ========================================================================== */   

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

    h1 {color:#fcb117;  
        margin:0 0 0.5em;  
        font-size:1.8em;} 
        
        h1 span {
          color:#555;
          }

          h1 .h1zusatz {display:block;
            margin-top:0.3rem;
          font-size:12px;}

          h1 span a {color:#333;
          }

          h1 span a:hover {color:#fcb117;
          }

    h2 {color:#fcb117;          
        margin:0 0 0.5em; 
        text-transform: uppercase;
        font-size:1.35em;}





/* Header  ======================================= */
header {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  width: calc(100% - 2.6rem);
  -webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.05);
  box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.05);
  margin: 1rem 1.3rem 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.125);
}

header ul {padding:0;
  margin:0;
}

header li {display: inline-block;
  margin:0 0.5em;
}

header img {max-height:25px;}

header .navbar {padding:0;
  align-items: unset;}

header .navbar .container-fluid {padding:0;}

header .navbar-brand {padding:0.5em 0 0.5em 1.5em;
position:relative;
display:flex;
align-items:center;}

header .navbar-nav {display: flex;
  height:100%;
  align-items: center;}

header .navbar-nav > ul {padding:0.7em;}

header .navbar-nav > ul > li {text-transform: uppercase;
position: relative;}

.navbar-light .navbar-nav .nav-link:hover, 
.navbar-light .navbar-nav .nav-link:focus {color:#fcb117;}

.navbar-light .navbar-nav .nav-link.active {color:#fcb117;}

.nav-link i {margin-right:0.35em;}

.navbar-light .navbar-nav .nav-link {
  color: rgba(0, 0, 0, 0.4);
}

.navbar-collapse {
  flex-grow: 0;
  height:100%;
}

header .navbar-nav > ul#headericon {
  position: relative;
  margin-top:0.25rem;
  font-size: 1.2em;}

  #navbarNavAltMarkup {background:#fcb117;
  position: relative;}

#navbarNavAltMarkup:before {content:"";
display:block;
position:absolute;
top:0;
left:-25px;
width: 0px;
height: 0px;
transform:rotate(360deg);
border-style: solid;
border-width: 0 25px 57px 0;
border-color: transparent #fcb117 transparent transparent;
}

header .navbar-nav > ul#headericon > li {margin:0 0.75em;}

ul#headericon a {color:#fff;
  position:relative;}

ul#headericon a:hover {color:#000;}

  ul#headericon a span {display:none;}

  .sublogotitle {color:#bbb;
    line-height: 1.35;
    font-size:0.7em;
    	margin:0 0 0 1em;
    padding:0 0 0 1em;
    border-left:1px solid #ddd;
    text-transform:uppercase;
    letter-spacing: 0.02em;}

  @media all and (min-width:901px) {
    header .navbar-nav > ul > li a:after  {
      opacity:0.85;
      pointer-events: none;
      width:90px;
      content: attr(data-menu);
      position: absolute;
      right:1.5rem;
      top: 0.1rem;
      font-size: 0.7rem;
      padding: 1px 10px;
      display: none;
      color: white;
      background: rgba(0, 0, 0, 0.75);
      border-radius: 4px;
      transition: opacity 0.1s ease-out;
      z-index: 99;
      text-align: center;
    }
    
    header .navbar-nav > ul > li a:hover::after {
      display: inline-block;
    }
  }


/* Mainbereich  ======================================= */
    main {padding:0 2em 1em;}

    #bodyWelcome {max-width:400px;}

    .nolist {padding:0;
        margin:0 0 1rem;
        list-style: none;}

    #welcome {display:flex;
          flex-direction: row;
          }

    #welcome > div:last-child {background:url(/img/Background_SLM_2.png);
            background-position: center;
            background-size:cover;
            width: 70%;
            position: relative;
            -webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
overflow: hidden;
          }

    #welcome > div:last-child:after {content:"";
            height:100%;
            width:60%;
            background: rgb(255,255,255);
            background: -moz-linear-gradient(90deg, rgba(255,255,255,1) 5%, rgba(255,255,255,0) 100%);
            background: -webkit-linear-gradient(90deg, rgba(255,255,255,1) 5%, rgba(255,255,255,0) 100%);
            background: linear-gradient(90deg, rgba(255,255,255,1) 5%, rgba(255,255,255,0) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
            position:absolute;
            top:0;
            left:0;
            display:block;
          }


          .fragelist {
            display:flex;
            justify-content: space-between;
            border-bottom:1px solid #ddd;
            background:#fff;
            padding:1em 0.5em;
          }

          .fragelist > div:first-child {width:calc(100% - 100px)}

          .fragelist > div:nth-child(2),
          .fragelist > div:nth-child(3) {width:calc(100% - 100px)}

          .fragelist > div:last-child {width:100px;
            min-width:100px;
          text-align: right;}

          .fragelist p {padding:0;
            margin:0;}

            .fragelist ul {list-style: none;
              padding:0;
              margin:0;}

              .fragelist li span {font-weight:600;
                display:inline-block;
                margin-right:0.5em;}

                .configThema {display:flex;
                  justify-content: flex-end;
                  width:80px;
                  min-width:80px;
                  gap:1rem;
                margin-right:1rem;}
                  
                  .delete:not(.btn) {background: none;
                      color:#fcb117;
                    border:none;
                  outline:none;}

                  .delete:not(.btn):hover {
                    color: #ff9300;
                }

                .modal-footer {display:flex;
                  flex-wrap:nowrap;
                gap:0.5rem;}

                .frageAction {margin-left:1rem;}

                .configFrage {display:flex;
                  justify-content: flex-start;
                  width:100%;
                  min-width:100%;
                  gap:1rem;}

/* Kurs  ================================== */
.kursthema {
  display:flex;
  gap:1em;
  align-items:center;
  padding: 0.75em 0;
  border-bottom:1px solid #ddd;
}

.kursthema span {font-weight:600;}

.kursthema:last-child {border:none;}

.kursthema > div:first-child {width:40px;
  min-width:40px;
  display:flex;
  height:40px;
  border-radius:100%;
  border:1px solid #fcb117;
  align-items:center;
  justify-content: center;
  color:#fcb117;}
.kursthema > div:nth-child(2) {width:100%;}
.kursthema > div:nth-child(3) {width:150px;}
.kursthema > div:nth-child(4) {width:80px;}
.kursthema > div:last-child {width:30px;}

.kurskategorie {margin-bottom:3em;}

.kurskategorie:first-child .kursthema:first-of-type > div:last-child input {display:none;}


.kursthema > div > span {
  display:block;}

.kursthema[data-type="6"] {margin-top:2rem;}
.kursthema[data-type="6"] > div:nth-child(2) span {color:#fcb117;
  font-size:1.3rem;
margin-bottom:0;}

/* Formulare  ================================== */
.formfield  {display:block;
  margin-bottom:1.5em;
}       

.formfield label {display:block;
width:100%;
font-size:0.75em;
text-transform: uppercase;}

.formfield input,.formfield textarea  {display:block;
  width:100%;
  padding:0.5em;
  border:none;
  border-bottom:1px solid #ddd;}

  .formfield input[type="checkbox"] {
    width: auto;
    display: inline-block;
    margin-right: 0.5em;
}

  .formfield textarea  {min-height:200px;}

  .formfield input:focus {border-color:#fcb117;
    outline:none;
    box-shadow:none;}

  form button.btn {display: inline-block;
    width:auto;}  

    #loginSection form button.btn {display: block;
      width:100%;} 

    .flex {display:flex;
    justify-content: space-between;
  align-items:flex-start;
margin-bottom:1em;}

#zielmail {width:20%;
  min-width:250px;
display:flex;
align-items:center}

#zielmail label {margin-right:0.5em;}

#zielmail input {padding:0.5em;
  border:1px solid #ddd;
  border-radius:5px;
  width:100%;
  margin-right:0.5em;
}

#zielmail button {padding:0;
  border:none;
  background:none;
}

#zielmail button.pointerevent {
  pointer-events: none;
}

#zielmail button:hover {color:#fcb117;
}

#zielmail .fa-check {color:#88D494;
  }

#zielmail input:focus {border-color:transparent;
  border-bottom-color:#fcb117;
  border-radius:0;
  outline:none;
  box-shadow:none;
}

.reihenfolge {font-size:1.5em;
opacity:0.2;}

#kursDesign {margin-bottom:3em;
  border:1px solid #efefef;
  border-radius:10px;
  padding:2em;
  background: #fafafa;
}

input[type="color"] {
  padding:0;
  outline:none;
  background:none;
  width:70px;
}

#kursDesign h2 {font-size:1em;
width:100%;}

#kursDesign form {display:flex;
flex-wrap:wrap;
justify-content: space-between;}

#kursDesign input {background:none;}

#kursDesign form > div {width:calc(50% - 1.5em);}

/* Pagination Tabelle  ================================== */
table {
  width: 100%;
  margin-top:1em!important;
}

table.dataTable.no-footer {
  border-bottom:1px solid #ddd;
}

table.dataTable.no-footer ~ * {font-size:0.8em;
  margin-top:1em;}

.dataTables_wrapper .dataTables_filter {
  float: none;
  width: calc(100% - 60px);
  display: inline-block;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: #fff;
  border-left: 2px solid #fcb117!important;
}

.dataTables_wrapper .dataTables_length {
  width: 50px;
  margin-right: 10px;
  float: none;
  display: inline-block;
}

.dataTables_wrapper .dataTables_filter label {
  width: 100%;
}

.dataTables_wrapper .dataTables_filter input {
  width: 100%;
  padding: 0.5em 1em;
  border: 1px solid #ddd;
  height: 40px;
}

.dataTables_wrapper .dataTables_filter input:focus {
  outline: none;
  border-bottom-color: #fcb117;
}

.dataTables_wrapper .dataTables_length select {
  height: 40px;
  border-color: #ddd;
}

tr,
td,
th {
  border: none;
}

th {
  font-size: 0.8em;
  text-transform: uppercase;
}

tbody th,
tbody td,
thead th,
thead td,
.dataTables_info {
  padding: 12px!important;
  border: none;
}

table.dataTable tbody tr:not(:last-child) td {border-bottom:1px solid #efefef;}

.dataTables_wrapper .dataTables_paginate {
  margin-bottom: 1.5em;
}

table.dataTable thead th, table.dataTable thead td {border-bottom:1px solid #ddd;}

.actions {width:130px;
text-align: right;
background: none !important;}

.actions a {margin: 0 0.5em;}

/*==========  Rückmeldung Skripte  ===============*/

.alerts {
  background: none;
  position: fixed;
  bottom: 1em;
  right: 1em;
  width: 400px;
  z-index: 9999;
  -webkit-animation: moveAlert 4s;
  -webkit-animation-fill-mode: forwards;
  pointer-events: none;
  transform: translateX(0);
  color: #fff;
}


@-webkit-keyframes moveAlert {
  from {
      -webkit-transform: translateX(500px);
  }
  10% {
      -webkit-transform: translateX(0px);
  }
  12% {
      -webkit-transform: translateX(0px);
  }
  16% {
      -webkit-transform: translateX(0px);
  }
  80% {
      -webkit-transform: translateX(0px);
  }
  85% {
      -webkit-transform: translateX(0px);
  }
  to {
      -webkit-transform: translateX(500px);
  }
}

@keyframes moveAlert {
  from {
      transform: translateX(500px);
  }
  10% {
      transform: translateX(0px);
  }
  12% {
      transform: translateX(0px);
  }
  16% {
      transform: translateX(0px);
  }
  80% {
      transform: translateX(0px);
  }
  85% {
      transform: translateX(0px);
  }
  to {
      transform: translateX(500px);
  }
}

.alerts .alert {
  position: relative;
  border: none !important;
  margin-bottom: 0;
  border-radius: 10px;
}

.alerts .alert .icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-left: -15px;
  width: 80px;
  text-align: center;
}

.alerts .alert .copy {
  margin-left: 45px;
  padding-left: 20px;
  line-height: 1.2;
}

.alerts .alert .copy h4 {
  font-size: 18px;
  font-weight: 200;
  margin-bottom: 5px;
  color: #fcb117;
}

.alerts .alert-error .copy h4 {color:#fff;}

.alerts .alert .copy p {
  font-size: 12px;
  margin-bottom: 0;
  line-height: 1.5;
}

.alerts .alert.alert-success {
  background-color: #333;
  color: #fff;
  box-shadow: 0 0 10px rgb(0 0 0 / 10%);
}

.alerts .alert.alert-error {
  background-color: #850000;
  color: #fff;
  box-shadow: 0 0 10px rgb(0 0 0 / 10%);
}

.alerts svg {
  width: 50px;
  display: block;
  margin: 0 auto;
}

.alerts svg polyline {
  stroke: #fcb117;
}

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
}

.path.circle {
  opacity: 0;
  -webkit-animation: dash 0.9s 0.95s ease-in-out;
  animation: dash 0.9s 0.95s ease-in-out;
}
.path.line {
  stroke-dashoffset: 1000;
  -webkit-animation: dash 0.9s 0.35s ease-in-out forwards;
  animation: dash 0.9s 0.35s ease-in-out forwards;
}

.path.check {
  stroke-dashoffset: -100;
  -webkit-animation: dash-check 0.9s 0.35s ease-in-out forwards;
  animation: dash-check 0.9s 0.35s ease-in-out forwards;
}



@-webkit-keyframes dash {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes dash {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes dash-check {
  0% {
    stroke-dashoffset: -100;
  }
  100% {
    stroke-dashoffset: 900;
  }
}
@keyframes dash-check {
  0% {
    stroke-dashoffset: -100;
  }
  100% {
    stroke-dashoffset: 900;
  }
}



/*==========  MEDIA QUERIES  ===============*/

@media all and (max-width:900px) {
  .onlyflex {flex-wrap:wrap;}
  
  .onlyflex > div.preview {max-width:100%}

  h1 span:not(.h1zusatz) {
    color:#fff;
    }

  #loginSection {flex-wrap:wrap;}

  #loginSection > div {
    width: 100%;
  }

  #loginSection > div:last-child:before,
  #loginSection > div:last-child:after {display:none;}

  table.dataTable tbody tr {padding:1em;
    display:block;
    width:100%;}

  table.dataTable tbody tr td {
      display:block;
      width:100%;
      padding:0!important;
      max-width:100%;
  }

  table.dataTable tbody tr td:first-child {
    font-weight:600;
}

  #welcome > div:last-child {display:none;}

  #bodyWelcome {width:100%;
    max-width: unset;}

    div#welcome {
      background: #333;
      color:#fff!important;
  }

  #kundentabelle thead {display:none;}

  table.dataTable tbody tr td.datawert::before {
    content: attr(data-label);
    display:inline-block;
    margin-right:0.5em;
    width:130px;
    font-weight: 600;
  }

  table.dataTable tbody tr td:not(.datawert) + td.datawert {margin-top:0.5em;}

  .navbar-toggler {
    border:none;
  }

  .navbar-toggler:focus {
    border:none;
    box-shadow: none;
  }

  .navbar-toggler-icon {background:none;
  height:unset;}

  header .navbar-nav > ul#headericon {width:100%;}

    header .navbar-nav > ul#headericon:before {display: none;}

    header ul li {display:block;
      margin:0.5em 0;}  

      header .navbar-nav {padding:0;
        margin:1em 0 0 0;}
    
      header .navbar-nav li {display:block;
        margin:0;
        padding:0;} 

      header .navbar-nav > ul#headericon > li {margin:0.5em 0;
      padding:0 1em}

      #navbarNavAltMarkup {background:#fff;}
    
      .navbar-toggler {margin-right:1em;} 
    
      header .navbar-nav > ul#headericon {margin:0;
        background:none;
        border-top:1px solid #efefef;}
    
      header .navbar-nav > ul#headericon a span {display:inline-block;
        color:var(--bs-nav-link-color);}
    
      header .navbar-nav > ul#headericon a i
       {color:#fcb117;
        margin-right:1rem;}

       header .navbar-nav > ul#headericon {
      font-size:1em;}

      header .navbar-nav > ul#headericon a {color:#333;}


      #kursDesign form > div {
        width: 100%;
    }

    .flex,
    .kursthema {flex-wrap:wrap;}

    .kursthema > div:nth-child(2) {width:calc(100% - 40px - 1em);}
    .kursthema > div:nth-child(3) {margin-left:calc(40px + 1em);
        width:calc(100% - 40px - 3em - 30px - 30px);}

        .kursthema > div:nth-child(4) {
          width: calc(100% - 60px);
      }

}



    
/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .sr-only class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  /*
   * Printing Tables:
   * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
   */
  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}