aside{
  div.box{
    margin-bottom: 1rem;
    padding-bottom:1rem;
    background-color:color-mix(in srgb, var(--grau_bg), transparent 30%);

    h1{
      line-height:58px;
      padding:0 1rem;
      font-size:20px;
      background-color:color-mix(in srgb, var(--grau_bg), transparent 65%);
      background-color:rgba(177, 177, 177, .8);
      font-family: "RobotoTHIN";
      font-size:24px;
      color:var(--violett);
      color:color-mix(in srgb, var(--violett), black 2%);
      height:58px;
      line-height:58px;
      margin-top: 0;
    }
    h2{
      font-size:16px;
      margin:14px 14px 6px 14px;
    }
    p{
      margin:auto 14px;
      font-size:16px;
    }
    img{
      margin:0 14px 14px 14px;
      display:block;
      width:88%;
    }
    a.mehr{
      display:block;
      text-align:right;
      line-height: 2;
    }
    a.list{
      font-size:16px;
      display:block;
      margin:6px 16px;
      color:var(--violettrot);
      text-decoration:none;
      &:hover{
        text-decoration: underline;
      }
    }
    div.faq{
      cursor: pointer;
      h2{
        font-size:16px;
        font-weight:normal;
        color:var(--violettrot);
      }
      p,ul{
        font-size:13px;
        max-height:0;
        overflow:hidden;
        transition-property: max-height;
        transition-duration: 1s;
      }
      &.active{
        p,ul{
          max-height:1000px;
        }
      }
    }
    a{
      color:var(--violettrot);
      text-decoration:none;
      &:hover{
        text-decoration:underline;
      }
    }
    &.doccheck{
      p{
        margin:6px 14px;
        font-size:14px;
        &.doccheck a{
          display: block;
        }
      }
      h3{
        font-size:14px;
        margin:14px 14px 6px 14px;
      }
      form{
        margin:12px 0 20px 0;
      }
      label{
        display:inline-block;
        width:80px;
        font-weight:bold;
        font-size:14px;
      }
      input{
        font-size:14px;
        width:140px;
        padding:2px 0px;
        border-width:2px;
      }
      input[type=submit]{
        font-weight: bold;
      }
    }
  }
}

body{
  line-height:1.4;
  font-size:11px;
  font-family: Arial, sans-serif;
  font-weight:400;
  color:var(--text);
}

html{
  scroll-padding-top: 3rem;
}

html, body,body *{
  padding:0;
  margin:0;
  position:relative;
}
#frame{
  text-align: left;
}
table.cookies{
	border-collapse: collapse;
	th{
		text-align: center;
	  font-weight: bold;
	}
	th, td{
		padding:3px 5px;
		border:1px solid gray;
	}
}
div.youtube{
	&.error{
		background-color:var(--grau_bg);
	}
	p{
		padding:2rem;
		font-family:Courier;
	}
}
div.flash{
  text-align: left;
  padding:.7rem 1rem;
  background-color: white;
  color:var(--grau);
  margin:0 0 0 0;
	border-bottom:1px solid var(--grau);
  display:flex;
  align-items: center;
	border:2px solid var(--grau);
	font-size:14px;
  svg{
    flex-shrink: 0;
    width:2rem;
    height:2rem;
    display:block;
    fill:var(--grau);
    vertical-align:middle;
    margin-right:1rem;
  }
  div.message{
    font-weight:700;
    vertical-align: middle;
  }
  &.error{
		border:2px solid var(--violett);
    svg{
      fill:var(--violett);
    }
    div.message{
      color:var(--violett);
    }
  }
  &.trial{
    background-color:var(--orange);
    color:white;
    svg{
      fill:white;
    }
  }
  &.expired,&.explosion{
    background-color: var(--violett);
    color:white;
    a{
      color:white;
      text-decoration: underline;
    }
    svg{
      fill:white;
    }
  }
}
.clickable{
  cursor: pointer;
}
table.cookies{
	border-collapse: collapse;
}
table.cookies th{
	text-align: center;
  font-weight: bold;
}
table.cookies th, table.cookies td{
	padding:3px 5px;
	border:1px solid gray;
}
table.cookies td a{
	display:inline-block;
	width:32px;
	height:65px;
	background-size: cover;
}
table.cookies td a.erlauben{
	background-image:url(/assets/css/nein64-a7a82cc688f22f880de308536a9aca2b9f4c84e5895920e9102d6521ffff4a78.png);
}
table.cookies td a.verweigern{
	background-image:url(/assets/css/ja64-e1380de68bf513d117e30c2a3167c4b52e13ddf3c0bd6f3fb7ba9967093dcca1.png);
}

#cookie-info{
	position: fixed;
	top:0;
	left:0;
	right:0;
	background-color:gray;
	background-color:rgba(40,40,40,.7);
	text-align:left;
	z-index: 100000;
}
#cookie-info div.cookie-box{
	padding:10px 20px;
	background-color:rgba(250, 250, 250, 0.85);
	border-bottom:1px solid black;
}
#cookie-info h1{
	font-size:18px;
	margin-bottom:12px;
}
#cookie-info p{
	font-size:12px;
}
#cookie-info a{
	color:#d81881;
}

#cookie-info.hidden{
	display:none;
}
body.cookie-overlay #cookie-info{
	position:fixed;
	left:0;
	right:0;
	top:0;
	bottom:0;
	text-align:center;
}
body.cookie-overlay #cookie-info div.cookie-box{
	background-color:white;
	max-width: 100vw;
	padding:25px 10px 25px 250px;
	/*width:550px;*/
	/*padding:25px 10px 25px 10px;*/
	width:400px;
	margin:10vh auto;
	background-image: url(/assets/css/cookie-hd-8d33f553d8369201bacf1ee63243add08a254378f265bba5ecf0308fdc1ad04d.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
@media (max-width: 500px) {
	body.cookie-overlay #cookie-info div.cookie-box{
		width:inherit;
		padding:10px 10px 40vw 10px;
/*		padding:10px 10px 10px 10px; */
		margin:10vh auto;
		background-size: 100vw;
		background-position: center bottom;
	}
	table.cookies{
		overflow-x: auto;
	}
}
body.cookie-overlay #cookie-info div.cookie-box p.buttons{
	text-align: center;
	line-height: 2;
}
#cookie-info a{
	text-decoration: none;
}
#cookie-info div.cookie-box p.buttons{
	margin-top:12px;
}
#cookie-info div.cookie-box p.buttons a.cookie_button{
	text-align: center;
	display: inline-block;
	line-height: 1;
	padding: 4px 4px;
	background-color:#d80676;
	color: white;
	font-size: 14px;
}
#cookie-info div.cookie-box p.buttons a.cookie_evil{
	text-align: center;
	display: inline-block;
	padding:4px 34px;
	color:#d80676;
	font-size:14px;
	font-weight:normal;
}
#cookie-info div.cookie-box a.cookies_close{
	position:absolute;
	top: -5px;
	right: -5px;
	text-align: center;
	display: inline-block;
	padding:3px 9px;
	border-radius:28px;
	background-color:#d80676;
	color:white;
	font-weight:bold;
	line-height:24px;
}
body.cookie-overlay #cookie-info div.cookie-box a.cookies_close{
	top: -20px;
}
:root{
    --grau:#4d4d4d;
    --grau_bg:#ededed;

    --text:black;

    /* http://www.workwithcolor.com/color-converter-01.htm */
    --rosa:#EAB8E4;
    --violett:#A8005F;
    --violettrot: #D81881;
    --rot:#CC333B;
    --gelb:#FF8400;
    --orange:#D1461F;
}
body{
  text-align: center;
}
#frame{
  position:relative;
  width:1000px;
  text-align: left;
  margin:0 auto;
}
nav{
  height:52px;
  position:fixed;
  width:inherit;
  background-color: color-mix(in srgb, white, transparent 15%);
}
header{
  height:463px;
  overflow:hidden;
  img{
    width:100%;
  }
}
nav{
  a.logo{
    vertical-align: top;
  }
  span.ebene1{
    display:inline-block;
    margin-top: 23px;
    vertical-align: top;
    position:relative;
    a{
      color:black;
      text-decoration: none;
      font-size:18px;
      margin-left: 5px;
      margin-right: 5px;
    }
    span.ebene2{
      display:none;
      top:29px;
      left:-8px;
      width:200px;
      position:absolute;
      background-color: color-mix(in srgb, white, transparent 15%);
      padding:8px 0;
      &.frauengesundheit{
        width:260px;
      }
      a{
        display:block;
        padding:3px 8px;
      }
    }
    &:hover{
      &>a{
        border-bottom:5px solid var(--rosa);
      }
      span.ebene2{
        display:block;
      }
    }
  }
}
body.startseite{
  header{
    height:400px;
  }
}
main{
  display: flex;
  top:-58px;
  flex-wrap: wrap;
}
body.startseite{
  main{
    top:0px;
  }
}
section{
  width:70%;
  &.ganze_breite{
    width:100%;
  }
  h1:first-child{
    line-height:58px;
    padding:0 1rem;
    background-color:color-mix(in srgb, var(--violett), transparent 30%);
    font-family: "RobotoTHIN";
    font-size:34px;
    color:white;
    margin:0;
    margin-bottom:2rem;
  }
}
aside{
  width:30%;
}
/* http://stackoverflow.com/questions/3588628/can-i-change-the-viewport-meta-tag-in-mobile-safari-on-the-fly */
img.img-center{
  display:block;
  width:95%;
  margin:2.5%;
}
img.img-right{
  display:block;
  float:right;
  width:50%;
  margin:2.5% 0 2.5% 2.5%;
}
img.img-left{
  display:block;
  float:left;
  width:50%;
  margin:2.5% 2.5% 2.5% 0;
}

/* Navigation variabel unterstreichen */
nav span.ebene1:hover{
  &>a{
    &.frauengesundheit{
      border-bottom-color: var(--violettrot);
    }
    &.maennergesundheit{
      border-bottom-color: var(--orange);
    }
    &.hautgesundheit{
      border-bottom-color: var(--violett);
    }
    &.kontrastmittel{
      border-bottom-color: var(--rosa);
    }
    &.unternehmen{
      border-bottom-color: var(--gelb);
    }
    &.service{
      border-bottom-color: var(--rot);
    }
  }
}

/* Boxen auf Startseite und subnavigation am Ende des Inhalts */
div.nav2 div.box{
  .arrow{
    height: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
    svg{
      height: 20%;
    }
  }
  &:nth-child(6n+1){
    div.balken{
      background-color: color-mix(in srgb, var(--violettrot), transparent 30%);
    }
    .arrow .icon{
      fill: var(--violettrot);
    }
  }
  &:nth-child(6n+2){
    div.balken{
      background-color:color-mix(in srgb, var(--orange), transparent  30%);
    }
    .arrow .icon{
      fill: var(--orange);
    }
  }
  &:nth-child(6n+3){
    div.balken{
      background-color: color-mix(in srgb, var(--violett), transparent  30%);
    }
    .arrow .icon{
      fill: var(--violett);
    }
  }
  &:nth-child(6n+4){
    div.balken{
      background-color:color-mix(in srgb, var(--rosa), transparent  30%);
    }
    .arrow .icon{
      fill: var(--rosa);
    }
  }
  &:nth-child(6n+5){
    div.balken{
      background-color: color-mix(in srgb, var(--gelb), transparent  30%);
    }
    .arrow .icon{
      fill: var(--gelb);
    }
  }
  &:nth-child(6n+6){
    div.balken{
      background-color: color-mix(in srgb, var(--rot), transparent  30%);
    }
    .arrow .icon{
      fill: var(--rot);
    }
  }
}

/* Hintergrund für erste überschrift, über dem Startbild und überschriften in den rechten boxen (aside) */
body.frauengesundheit{
  section h1:first-child{
    background-color:color-mix(in srgb, var(--violettrot), transparent 30%);
  }
  aside div.box h1{
    color:color-mix(in srgb, var(--violettrot), black 2%);
  }
}
body.maennergesundheit{
  section h1:first-child{
    background-color:color-mix(in srgb, var(--orange), transparent  30%);
  }
  aside div.box h1{
    color:color-mix(in srgb, var(--orange), black 2%);
  }
}
body.hautgesundheit{
  section h1:first-child{
    background-color:color-mix(in srgb, var(--violett), transparent  30%);
  }
  aside div.box h1{
    color:color-mix(in srgb, var(--violett), black 2%);
  }
}
body.kontrastmittel{
  section h1:first-child{
    background-color:color-mix(in srgb, var(--rosa), transparent  30%);
  }
  aside div.box h1{
    color:color-mix(in srgb, var(--rosa), black 2%);
  }
}
body.unternehmen{
  section h1:first-child{
    background-color:color-mix(in srgb, var(--gelb), transparent  30%);
  }
  aside div.box h1{
    color:color-mix(in srgb, var(--gelb), black 2%);
  }
}
body.service{
  section h1:first-child{
    background-color:color-mix(in srgb, var(--rot), transparent  30%);
  }
  aside div.box h1{
    color:color-mix(in srgb, var(--rot), black 2%);
  }
}
@font-face{
	font-family: 'RobotoTHIN';
	src: url(/assets/RobotoCondensed-Light-webfont-15a40dac527b70ba531691ce40720311c02db2621778d63e0a64ea34aeff08ed.woff) format('woff');
}
footer{
  margin-top:1rem;
  padding:.5rem 0;
  border-top:1px solid var(--grau);
  background-color:white;
  text-align:right;
  a,span{
    font-size:11px;
    text-decoration:none;
    padding:0 9px;
    color:var(--grau);
  }
  span{
    float:left;
  }
  a{
    border-right:1px solid var(--grau);
    &:last-child{
      border-right:none;
      margin-right:0;
    }
  }
  a:hover{
    text-decoration:underline;
  }
}
form.verwaltung{
  div.form-group{
    margin-bottom:1rem;
    label{
      display:block;
      font-size:16px;
      font-weight:bold;
      &.inline{
        display:inline-block;
        min-width: 120px;
      }
    }
    input[type="text"],input[type="date"],input[type="submit"],input[type="file"],select,textarea{
      font-size:16px;
      padding:5px 10px;
    }
    input[type="text"],textarea{
      display:block;
      width:90%;
    }
    textarea{
      height:80px;
      &.ckeditor{
        height:280px;
      }
    }
  }
}
div.bilderliste{
  a{
    display:inline-block;
    width:160px;
    float:left;
    margin:10px;
    border:1px solid var(--grau);
    &:hover{
      border:1px solid var(--violett);
    }
    img{
      width:100%;
    }
  }
}
ul.hnavlist{
  position:relative;
  list-style-type: none;;
  color:var(--violettrot);
  padding-left:10px;
  li{
    padding:3px 0px;
    position: relative;
    a{
      position:relative;
      color:var(--violettrot);
      font-size:16px;
      text-decoration: none;
      font-weight: normal;
      &:hover{
        text-decoration: underline;
      }
    }
    span{
      color:var(--text);
    }
    &:before {
      content: "\25b6";
      padding-right:5px;
      vertical-align:top;
    }
  }
}
@media screen and (max-width: 768px) {
  body{
    #frame{
      width:100%;
      min-width:320px;
    }
    nav{
      vertical-align: top;
      height: fit-content;
      span.ebene1{
        display:none;
        margin-top: 1px;
        cursor: pointer;
        &:first-child{
          clear: both;
        }
        a{
          display:block;
          padding:5px 10px;
          text-decoration: none;
          font-size:20px;
        }
        span.ebene2{
          display:none;
          width:100%;
          position:relative;
          top: 0;
          &.frauengesundheit{
            width:100%;
          }
          a{
            padding:3px 20px;
            font-size:16px;
          }
          &.visible{
            display: block;
          }
        }
        &:hover,&:focus{
          &>a{
            font-weight:bold;
          }
          span.ebene2{
            display:block;
          }
        }
      }
      &.hamburger{
        span.ebene1{
          display:block;
        }
      }
      a.logo{
        height:60px;
        width:145px;
        img{
          height:50px;
        }
      }
      a.kontakt, a.hamburger{
        position: relative;
        display: inline-block;
        float:right;
        top:20px;
        margin:0 10px;
      }
      a.hamburger{
        width:25px;
      }
    }
    header{
      height:auto;
      img{
        width:100%;
      }
    }
    main{
      display: block;
      top:-48px;
    }
    section{
      width:100%;
      img.appicon{
        width:40vw;
        height:40vw;
      }
      div.serviceboxen{
        margin:10px 14px;
        div.servicebox{
          transform: scale(0.6);
          transform-origin: 0 0;
          margin-right: -20%;
          margin-bottom: -20%;
        }
      }
      div.managementboxen{
        margin:20px 14px;
        div.managementbox{
          transform: scale(0.6);
          transform-origin: 0 0;
          margin-right: -20%;
          margin-bottom: -20%;
        }
      }
      iframe{
        width:90vw;
        height:50vw;
      }
      form.grau{
        div.form-group{
          display:block;
          width:100%;
        }
      }
      h1:first-child{
        line-height:normal;
        font-family: "RobotoTHIN";
        padding:6px 1rem;
        font-size:24px;
        color:white;
        margin:0 0 12px 0;
      }
      div.doccheck{
        a{
          margin-right:0;
          display:block;
        }
      }
      form{
        overflow-x: auto;
      }
    }
    aside{
      width:100%;
      div.doccheck{
        display:none;
      }
      div.box{
        img{
          margin:0 0 14px 0;
          width:100%;
        }
      }
    }
    footer{
      text-align: center;
      span{
        float:none;
        display:block;
      }
    }
  }
  body.startseite, body{
    div.nav2{
      display:block;
      padding-left:0;
      div.box{
        width:100%;
        div.balken{
          width:8px;
        }
        a{
          font-size:20px;
          top:19px;
          &.zweizeilig{
            font-size:20px;
            top:19px;
            br{
              display:none;
            }
          }
        }
      }
    }
  }
  body.startseite{
    header{
      height:auto;
    }
    main{
      top:0px;
    }
    div.nav2{
      div.box{
        a{
          top:60px;
        }
      }
    }
    footer{
      border-top-color:color-mix(in srgb, var(--grau), transparent  30%);
    }
    .swiper-button-prev, .swiper-button-next {
      height:22px;
    }
  }
}
div.nav2{
  display:flex;
  clear:both;
  flex-wrap: wrap;
  margin-top:12px;
  margin-top:30px;
  margin-bottom:20px;
  padding-left:14px;
  div.box{
    display:block;
    background-color: var(--grau_bg);
    height:60px;
    width:32.33%;
    position:relative;
    margin:0 1% 1% 0;
    padding:0;
    &:hover{
      background-color: color-mix(in srgb, var(--grau_bg), black 3%);
      cursor:pointer;
    }
    img{
      position:absolute;
      top:0;
      left:0;
      bottom:0;
      width:60px;
      margin:0;
    }
    div.balken{
      position:absolute;
      top:0;
      left:0;
      bottom:0;
      width:12px;
      background-color:color-mix(in srgb, var(--rot), transparent  60%); 
    }
    a{
      display:block;
      position:absolute;
      padding-left:65px;
      font-size:16px;
      font-weight:normal;
      color:black;
      top:21px;
      font-family: "RobotoTHIN";
      text-decoration: none;
      &.zweizeilig{
        font-size:15.5px;
        top:11px;
      }
    }
    a.pfeil{
      position: absolute;
      display:inline-block;
      right:5px;
      padding:0;

      svg{
        display:inline-block;
        height:26px;
        width:26px;
        fill:var(--rot);
      }
    }
  }
}
body.startseite{
  section{
    width:100%;
  }
  div.nav2{
    width:100%;
    padding:0;
    margin-top:21px;
    div.box{
      display:block;
      height:143px;
      margin:0;
      margin-bottom:1%;
      margin-right:1%;
      width:32.66%;
      &:nth-child(3n+3){
        margin-right:0;
      }
      img{
        width:117px;
      }
      a{
        padding-left:123px;
        font-size:18px;
        top:60px;
        &.zweizeilig{
          font-size:17.5px;
          top:47px;
        }
      }
      a.pfeil{
        top:54px;
        svg{
          height:34px;
          width:34px;
        }
      }
    }
  }
}
nav{
  font-family: "RobotoTHIN";
  display:block;
  z-index:10000;
  a.logo{
    width:130px;
    height:100%;
    overflow:hidden;;
    display:inline-block;
    margin-right: 30px;
    img{
      display: block;
      height:45px;
      padding: 5px;
    }
  }
  a.kontakt, a.hamburger{
    width:30px;
    height:30px;
    right:5px;
    bottom:3px;
    position:absolute;
    svg{
      width:100%;
      height:100%;
      fill:color-mix(in srgb,black, transparent  60%);
    }
    &:hover{
      svg{
        fill:black;
      }
    }
  }
  a.hamburger{
    display:none;
  }
  a{
    color:black;
    font-size:1rem;
  }
}
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */

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

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

html {
  font-family: sans-serif; /* 1 */
  line-height: 1.15; /* 2 */
  -ms-text-size-adjust: 100%; /* 3 */
  -webkit-text-size-adjust: 100%; /* 3 */
}

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

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * 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
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

figcaption,
figure,
main { /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 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
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active,
a:hover {
  outline-width: 0;
}

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 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 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

/**
 * 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 style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

/**
 * 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
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

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

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

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

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

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif; /* 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;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}

/**
 * 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;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 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 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

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

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 and cancel buttons in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-cancel-button,
[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 IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */

details, /* 1 */
menu {
  display: block;
}

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

summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
  display: inline-block;
}

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

template {
  display: none;
}

/* Hidden
   ========================================================================== */

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

[hidden] {
  display: none;
}

section {
  table.table_light {
    border-collapse: collapse;
    margin: 1rem;

    tr {}

    th,
    td {
      font-size: 14px;
      padding: 10px 5px;
      vertical-align: top;
    }
  }

  &>table.cookies {
    margin: 0.5rem 1rem;

    th {
      text-align: center;
      padding: 4px;
    }
  }

  &>p,
  &>figure,
  &>h1,
  &>h2,
  &>h3,
  &>h4,
  &>h5,
  &>ol,
  &>ul,
  &>hr,
  &>form,
  &>iframe,
  &>code,
  &>video,
  &>div.youtube {
    margin: 0.5rem 1rem;
  }

  p,
  li {
    font-size: 16px;

    * {
      font-size: 16px;
    }

    sup {
      font-size: 70%;
    }
  }

  hr {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

  h1 {
    font-size: 28px;
    line-height: 1.4;
    font-weight: normal;
  }

  h2 {
    font-size: 21px;
    font-weight: normal;
    margin-top: 1.5rem;
    border-top: 1px solid var(--grau_bg);
    padding-top: 1.5rem;

    &.ohne_linie {
      border-top-width: 0;
    }
  }

  h3 {
    font-size: 16px;
    font-weight: bold;
  }

  h4 {
    font-size: 14px;
    font-weight: bold;
  }

  h5 {
    font-size: 14px;
    font-weight: normal;
    text-decoration: underline;
  }

  ul,
  ol {
    padding-left: 20px;
  }

  a {
    color: var(--violettrot);
    text-decoration: none;
    font-weight: bold;

    &:hover {
      text-decoration: underline;
    }
  }

  figure.image-style-side {
    float: right;
    max-width: 40%;
    margin-top: 0;
    padding-top: 0;

    img {
      width: 100%;
    }
  }

  code {
    border: 1px solid var(--grau);
    width: 100%;
    padding: 5px 16px;
    display: block;
    white-space: pre;
    overflow-x: auto;
  }

  img.img-center {
    display: block;
    width: 95%;
    margin: 2.5%;
  }

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

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

  img.produktfoto {
    float: right;
    max-width: 50%;
    margin-right: 2.5%;
  }

  img.produktfoto_links {
    max-width: 50%;
  }

  img.appicon {
    float: right;
    margin: 0 0 5px 5px;
    width: 180px;
    height: 180px;
  }

  div.serviceboxen {
    display: block;
    margin: 20px 14px;
    padding: 0;

    div.servicebox {
      display: inline-block;
      height: 255px;
      height: 240px;
      width: 200px;
      margin-right: 14px;
      margin-bottom: 14px;
      background-color: var(--grau_bg);
      position: relative;

      &.niedrig {
        height: 170px;
      }

      p {
        font-size: 13px;
        text-align: center;
        font-weight: bold;
        margin: 0;
        left: 14px;
        right: 14px;
        top: 19px;
        position: absolute;

        &.zweizeilig {
          top: 6px;
        }
      }

      img {
        display: inline-block;
        width: 130px;
        max-height: 130px;
        margin: 0;
        position: absolute;
        top: 50px;
        left: 35px;
      }

      a {
        position: absolute;
        font-size: 11px;
        text-align: center;
        font-weight: bold;
        margin: 0;
        bottom: 14px;
        right: 0;
        left: 14px;
        right: 14px;
      }

      div.balken {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 10px;
        background-color: #c9c9c9;
      }
    }
  }

  div.managementboxen {
    display: block;
    margin: 20px 14px;
    padding: 0;

    div.managementbox {
      display: inline-block;
      height: 250px;
      width: 200px;
      margin-right: 12px;
      margin-bottom: 12px;
      background-color: var(--grau_bg);
      position: relative;

      p {
        font-size: 13px;
        text-align: center;
        margin: 0;
        left: 14px;
        right: 0px;
        bottom: 7px;
        line-height: 1.2;
        position: absolute;

        &.mehrzeilig {
          line-height: 1;
          bottom: 3px;
        }
      }

      img {
        display: inline-block;
        width: 200px; 
        margin: 0;
        position: absolute;
        top: 0px;
        left: 0px;
      }

      div.balken {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 10px;
        background-color: color-mix(in srgb, var(--violettrot), transparent  70%);
      }
    }
  }

  form.doccheck {
    label {
      display: inline-block;
      width: 93px;
      font-weight: normal;
      font-size: 16px;
      text-align: right;
      margin-right: 5px;
    }

    input {
      font-size: 16px;
      width: 140px;
      padding: 2px 0px;
      border-width: 2px;
    }

    input[type=submit] {
      font-weight: bold;
    }
  }

  form.grau {
    background-color: var(--grau_bg);
    padding: 15px 10px;

    p {
      line-height: 1.5;
      padding: 5px 0;
    }

    h2 {
      margin-top: 0;
      padding-top: 0;
      border-top-width: 0;
    }

    &>h2 {
      clear: both;
    }

    div.form-group {
      display: inline-block;
      width: 48.5%;
      font-size: 16px;
      line-height: 1.5;
      padding: 3px 0;

      label {
        display: inline-block;
        width: 38%;
        text-align: right;
        font-weight: bold;

        &.required {
          color: var(--violettrot);
        }
      }

      input[type=text],
      select {
        display: inline-block;
        width: 58%;
        padding: 2px 0;
      }

      textarea {
        display: block;
        width: 100%;
        height: 80px;
      }

      &.breites_label {
        width: 100%;
      }

      &.full-width {
        width: 100%;
        text-align: center;

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

        input[type=submit] {
          margin: 2px auto;
          padding: 3px 30px;
        }
      }

      &.bestellblock {
        width: 100%;
        padding-top: 1rem;
        clear: both;

        h2 {
          font-size: 1.2rem;
          font-weight: normal;
        }

        img {
          float: right;
          margin: 0 0 0 5px;
        }

        label {
          width: 25%;
        }

        select {
          width: 25%;
        }
      }
    }
  }

  div.box_achtung {
    margin: 0.5rem 1rem;
    padding: 0.5rem;
    background-color: var(--rosa);
    border: 1px solid var(--violettrot);
    border-radius: 4px;

    h2 {
      border-top-width: 0;
      margin-top: .5rem;
      padding-top: .5rem;
    }
  }

  #selbstCheck,
  #testoSelbstCheck {
    th.schraffiert {
      font-size: 130%;
    }

    input.summe {
      width: 20px;
      text-align: center;
    }
  }

  div.doccheck {
    background-color: var(--grau_bg);
    margin: 20px 10px 20px 14px;

    h1 {
      margin-bottom: 12px;
    }

    h3 {
      display: none;
    }

    p,
    form {
      padding: 5px 10px;
    }

    a {
      margin-right: 2rem;
    }

    h1 {
      margin-bottom: 0;
      background-color:color-mix(in srgb, var(--grau), transparent  50%) !important;
      color: white;
    }
  }

  video {
    width: 96% !important;
    height: auto !important;
  }
}
.swiper{
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  .arrow{
      position: absolute;
      top: 45%;
      height: 100px;
      width: 50px;
      background-size: cover;
      background-repeat: no-repeat;
      cursor: pointer;
      svg{
        .icon {
          fill: var(--violettrot);          
        }
      }
      &.invisible{
        display: none;
      }
  }
    .arrow.left{
      left: 5%;
      background-image: url(/assets/left-214f97cb989ef6d9b5331908b48a90548016dfe5cfc96018ebe035aef58f1438.svg);

    }
    .arrow.right{
      right: 5%;
      background-image: url(/assets/right-ee71ce3e3eeca8f65fdb79c6f2a9bd721ef308cff0230ba9f4a66df3727d865b.svg);
    }
}
div.swipeable {
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  
}
div.swipeable::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background: transparent;
}
.swiper-slide{
  min-width: 100%;
  height: 100%;
}

/*
 * 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.
 *



 */