.content .expert{
    display: flex;
    align-items: center;
    img{
        width: 20cqw;
        height: 20cqw;
        object-fit: contain;        
        margin-right: 2cqw;
    }
}

@container content (width >= 600px) {
    .content .expert img{
        width: 12cqw;
        height: 12cqw;
        margin-right: 0.5cqw;
    }
}
.highlight {
  display: flex;
  background-color: white;
  .info-section {
    width: 100%;
  }
  .actions {
    display: flex;
    .button {
      margin-right: 0.5cqw;
      height: 100%;
    }
  }
}
.aktuelles .actions {
  display: flex;
  height: fit-content;
  .button {
    margin-left: 0.5cqw;
    height: 100%;
  }
}
.content .pages {
  a {
    color: var(--dark-gray);
    font-weight: normal;
    &.active {
      color: var(--primary);
      font-weight: bold;
    }
  }
}
.praxistipps {
  display: flex;
  .actions {
    display: flex;
    height: fit-content;
    justify-content: center;
    flex-direction: column;
    .button {
      height: 100%;
      margin-bottom: 0.5cqw;
      align-self: flex-end !important;
    }
  }
}

.virtual-event {
  .overview {
    #image {
      margin-top: 2cqw;
      background-image: url(/assets/top-view-621330334e0997f04edde2d1965167c44330702603fb704c69acf95c42b54baf.jpg);
      background-size: contain;
      background-repeat: no-repeat;
      height: 994px;
      width: 352px;
      position: relative;
    }
    .marker {
      position: absolute;
      width: 10px;
      height: 10px;
      background-color: red;
      border-radius: 50%;
    }
  }
}
.presse .actions.column .button {
  margin-left: 0.5cqw;
}
.changelogs .changelog {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.changelogs .title {
  font-weight: 600;
}

.insert-before {
  border-top: 3px solid rgb(236, 32, 127);
}
.insert-after {
  border-bottom: 3px solid rgb(236, 32, 127);
}

.content .admin-info {
  border-bottom: 1px solid var(--light-gray);
  display: grid;
  grid-template-columns: 3fr 1fr;
  .actions {
    margin-top: 2cqw;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 2cqw;
    .button {
      align-self: flex-start;
    }
    &.column {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: flex-start;
      .button {
        align-self: flex-end;
      }
    }
  }
  article {
    border-bottom: none;
  }
}

.content .admin-info:last-child {
  border-bottom: none;
}

.content .admin-info.server {
  .image {
    display: flex;
    align-items: center;
  }
  .actions {
    margin-bottom: 2cqw;
  }
}

div.details {
  font-size: small;
  border-bottom: .1cqw solid var(--light-gray);
  padding-bottom: 3cqw;
  margin-bottom: 3cqw;
  width: 100%;

  div {
    display: grid;
    grid-template-columns: 1fr 2.5fr;
    margin-top: 0.5cqw;
  }
}
.praxisservice-articles{
  #document-numbers{
    .field{
      width: 70cqw;
      display: flex;
      justify-content: space-between;
      a{
        cursor: pointer;
      }
    }
  }
}
.edit-event{
  display: flex;
  div.main-content{
    width: 100%;
  }
  a.button{
    height: fit-content;
    align-self: start;
  }
}

@container content (width >= 600px) {
  .content .admin-info {
    grid-template-columns: 1fr 1fr;
  }
  .praxistipps .actions {
    flex-direction: row;
    .button {
      margin: 0 0 0 0.5cqw;
    }
  }
}
/*ckeditor */
form div.ck-editor{
  margin-bottom: 2cqw !important;
  div.ck-content {
    min-height:300px;
  }

  .ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused{
    border: 1px solid var(--light-gray);
    box-shadow: none;
  }
}
form div.ck-editor:has(.ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused) {
  outline: 2px solid var(--dark-gray);
}
form div.ck-editor:has(.ck.ck-editor__editable:not(.ck-editor__nested-editable)) {
  outline: 1px solid var(--dark-gray);
}
.ck-rounded-corners .ck.ck-editor__top .ck-sticky-panel .ck-toolbar{
  border-radius: 0 !important;
}
.content {
  h1 {
    margin: 0;
    color: var(--primary);
    padding: 0;
    font-size: 5cqw;
  }
  h2 {
    font-size: 4cqw;
    color: var(--primary);
    margin: 2cqw 0;
  }
  h3{
    color: var(--primary);
    font-size: 3.8cqw;
    margin-bottom: 0.5cqw;
  }
  h4{
    color: var(--primary);
    font-size: 3.7cqw;
    margin-bottom: 0.5cqw;
  }
  h5{
    color: var(--primary);
    font-size: 3.5cqw;
    margin: 1cqw 0;
  }
  p, span, li{
    font-size: 3.5cqw;
  }
  a, button {
    text-decoration: none;
    font-weight: 600;
    font-size: 3cqw;
  }
  li{
    padding: 0.5cqw 0;
  }
  li form{
    display: inline;
  }
  p a, p button, li a, span a, li form button{
    color: var(--primary);
    background-color: transparent;
    padding: 0;
  }
  label{
    font-size: 2.5cqw;
    color: var(--dark-gray);
    display: block;
  }
  input, textarea, select{
    padding: 2.5cqw;
    border: 1px solid var(--dark-gray);
    border-radius: 0.5cqh;
    font-size: 2.5cqw;
  }
  input[type="file"]{
    border: none;
  }
  textarea{
    resize: vertical;
    font-family: inherit;
  }
  select{
    display: block;
    background-color: white;
  }
  input:focus, textarea:focus, select:focus{
    outline: 2px solid var(--dark-gray);
  }
  img{
    width: 100%;
  };
  hr{
    border: 1px solid var(--secondary);
    border-radius: 10px;
    margin: 4cqw 0;
  }
  table{
    width: 100%;
    border-collapse: collapse;
    border: 1px solid black;
    margin-bottom: 2cqw;
    tr{
      border-bottom: 1px solid black;
    }
    th, td {
      text-align: center;
      padding: 8px;
    }
    th.vertical{
      font-weight: normal;
    }
    .left{
      text-align: left;
    }
    .right{
      text-align: right;
    }
    &.with_borders{
      th, td{
        border: 1px solid black;
      }
    }
    .link{
      font-weight: 600;
      color: var(--primary);
    }
  }

  div.swipeable {
    display: flex;
    overflow: scroll;
    a.arrow{
      position: absolute;
      bottom: 50%;
      border: none;
      &.invisible{
        display: none;
      }
      svg{
        .icon {
          stroke: white;          
        }
        .circle{
          fill: var(--primary);
        }
      }
    }
    a.arrow.left{
      left: 3%;
    }
    a.arrow.right{
      right: 3%;
    }

    a.arrow.bottom{
      bottom: 15%;
    } 
    a.arrow.middle{
      bottom: 50%;
    }
    &.invisible {
      display: none;
    }
  }
  div.swipeable::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background: transparent;
  }
  article,
  div.card {
    container-type: inline-size;
    .subtitle,
    .category,
    .title {
      font-weight: 600;
    }
    .title {
      color: black;
    }
    .subtitle, .category {
      color: var(--dark-gray);
      margin: 1.5cqw 0;
    }
  }

  article:nth-last-child(1) {
    border-bottom: none;
  }
  article:nth-last-child(2):nth-child(odd) {
    border-bottom: none;
  }
  article {
    display: flex;
    padding: 2cqw 0;
    border-bottom: 1px solid
      color-mix(in srgb, var(--dark-gray), transparent 50%);
    img {
      height: 10cqh;
      width: 10cqh;
      object-fit: cover;
      border-radius: 1cqw;
    }
    &.image {
      .info {
        padding: 0 0 0 0.5cqh;
      }
    }
    .subtitle, .category, .subtitle a, .category a {
      font-size: 3.2cqw
    }

    .title {
      margin: 0;
      font-size: 3.5cqw;
    }
  }

  div.card {
    min-width: 50cqw;
    height: 55cqw;
    margin: 2cqw;
    box-shadow: 0 4px 8px 4px
      color-mix(in srgb, var(--dark-gray), transparent 80%);
    border: none;
    img {
      height: 50cqw;
      width: 100%;
      object-fit: cover;
    }
    .info {
      padding: 3cqw;
    }
    .title {
      display: block;
      margin: 0;
      font-size: 6cqw;
      overflow: hidden;
      text-overflow: ellipsis;
      max-height: 3lh;
    }
    .subtitle {
      font-size: 5.3cqw;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;
      a{
        font-size: 5.3cqw;
      }
    }
  }

  div.card.contain img{
    object-fit: contain;
  }
  div.card.cover{
    object-fit: cover;
    &.top img{
      object-position: top;
    }
    &.bottom img{
      object-position: bottom;
    }
  }
  .boxes{
    position: relative;
  }
  .boxes div.card img{
    height: 65cqw;
  }
  .boxes div.card.no_text img{
    height: 100cqw;
  }
  .smaller-font{
    font-size: 75%;
  }
  .no-display{
    display: none !important;
  }
  .section {
    padding: 5cqw 3cqw;
    &.overflow{
      overflow-y: hidden;
    }
  }
  .alert-information{
    color: var(--primary);
    font-weight: bold;
  }
  .button, button {
    background-color: var(--primary);
    padding: 1.5cqw 2cqw;
    color: white;
    font-weight: 600;
    border-radius: 0.5cqh;
    width: fit-content;
    align-self: center;
    border: none;
    cursor: pointer;
  }
  .content-wrapper {
    display: flex;
    flex-direction: column;
  }
  .container {
    margin: 0 0 4cqw 0;
  }
  .fit-content{
    width: fit-content;
    height: fit-content;
  }
  .clickable{
    cursor: pointer;
    border: none;
  }
  .breadcrumbs {
    a{
      color: var(--dark-gray);
      font-weight: 500;
    }
    a:last-child{
      color: var(--primary);
      font-weight: 600;

    }
  }
  .navigation-list{
    display: flex;
    flex-direction: column;
    .list-item{
      border-bottom: 1px solid color-mix(in srgb, var(--dark-gray), transparent 70%);
      padding: 1cqw;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: var(--primary);
      font-weight: 600;
      svg{
        .icon {
          stroke: var(--primary);          
        }
        .circle{
          fill: white;
        }
      }
    }
  }
  .file, 
  .speaker{
    display: flex;
    justify-content: space-between;
    margin-bottom: 1cqw;
    a{
        color: var(--primary);            
    }
    button{
        color: var(--primary);
        background-color: transparent;
        padding: 0;
    }
  }
  .speaker{
    margin: 0;
    padding: 1cqw 0;
  }
  .invisible{
    display: none;
  }
  .space-between{
    display: flex;
    justify-content: space-between;
  }
  div.preview-image{
    width: 40%;
    float: right;
    margin-left: 2cqw;
    margin-bottom: 2cqw;
    img{
      display: block;
    }
    p{
      margin-top: 0;
      color: var(--dark-gray);
    }
  }
}

@container content (width >= 600px) {
  .content {
    h1{
      font-size: 4cqw;
    }
    h2 {
      font-size: 3cqw;
    }
    h3{
      font-size: 2.5cqw;
    }
    h4{
      font-size: 2.2cqw;
    }
    h5{
      font-size: 2cqw;
    }
    p, a, li, label, button, span{
      font-size: 1.8cqw;
    }
    input, textarea, select{
      padding: 1cqw;
      font-size: 1.8cqw;
    }
    .container:has(article) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 1cqh;
    }
    .section {
      padding: 2cqw;
    }
    .sub-section{
      padding-bottom: 1cqw;
    }
    .sub-section:last-child{
      border-bottom: none;
    }
    .button, button{
      padding: 1cqw 1.5cqw;
    }
    div.swipeable{
      overflow: hidden;
    }
    div.card {
      min-width: 28cqw;
      height: 28cqw;
    }
    div.two-columns{
      column-count: 2;
      h1, h2, h3, h4, h5{
        -webkit-column-break-after: avoid;
      }
    }
    .file, 
    .speaker{
      display: flex;
      justify-content: space-between;
      width: 50cqw;
    }
  }
}
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{
  position:relative;
	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;
}
.heading {
  display: flex;
  justify-content: space-between;
  .actions {
    display: grid;
    row-gap: 0.5cqw;
    input,
    select {
      width: 100%;
    }
    svg {
      width: 10cqw;
      height: 10cqw;
      .icon {
        fill: var(--primary);
      }
      .circle {
        fill: white;
      }
    }
  }
}

.warning {
  color: var(--primary);
  font-weight: bold;
}

.success {
  color: var(--success);
  font-weight: bold;
}

@container content (width >= 600px) {
  .heading .actions svg {
    width: 6cqw;
    height: 6cqw;
  }
}
#flash {
  position: fixed;
  display: block;
  width: 100%;
  top: 0;
  .alert {
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    color: #242424;
    background-color: #97d3ea;
  }
  .alert-danger {
    background-color: #ee7868;
  }
  .alert-danger,
  .alert-warning {
    animation: appear 2s both;
  }
  .alert-info {
    animation: appear-then-fade 4s both;
  }
  p {
    display: inline-block;
    padding: 0;
    margin: 0;
  }
  .close {
    background: none;
    border: none;
    padding: 0;
  }
}
main #flash {
  top: 2vw;
  left: 2vw;
  right: 2vw;
  width: inherit;
}
@keyframes appear-then-fade {
  0%,
  100% {
    opacity: 0;
  }
  5%,
  60% {
    opacity: 1;
  }
}
@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@font-face {
  font-family: "Open Sans";
  src: url(/assets/OpenSans-Italic-VariableFont_wdth,wght-b3602df718ff7380c3cecd91c301668a21b3a205ce237b269576fe3a983a8b06.otf) format("truetype");
  font-style: italic;
}

@font-face {
  font-family: "Open Sans";
  src: url(/assets/OpenSans-VariableFont_wdth,wght-bed10e81a35efbfb483867bb2928fdca4d677f15a6386a78c53a4b607da1e564.otf) format("truetype");
}
footer{
    background-color: var(--primary);
    font-size: 4cqw;
    container-type: inline-size;
    .links{
        margin: 2cqw 1cqw;
        display: flex;
        flex-direction: column;
        a{
            color: white;
            text-decoration: white;
            font-weight: 600;
            padding: 2cqw 0;
        }
    }  

    .copyright{
        margin: 2cqw 1cqw;
        color: white;
    }
}


@container outer-frame (width >= 400px) {
    footer {
        font-size: 3cqw;
        .links{
            display: grid;
            grid-template-columns: 50% 50%;
            a{
                padding-right: 1cqw;
            }
        }
    }
} 

@container outer-frame (width >= 600px) {
    footer {
        font-size: 1.7cqw;
        .links{
            display: block;
        }
    }
}
@container outer-frame (width >= 1000px) {
    footer {
        font-size: 1.5cqw;
        .links{
            display: block;
        }
    }
}
.form {
    &.filters{
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        .field{
            margin-right: 1cqw;
        }
    }
    input[type="text"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="email"], textarea, input[type="file"], input[type="password"]{
        width: 89cqw;
        margin-bottom: 1cqw;
    }
    img{
        height: 30cqw;
        width: 30cqw;
        object-fit: contain;
    }
    select{
        margin-bottom: 1cqw;
    }
    .field p.field-description{
        display: block;
        margin-top: 0;
        color: var(--dark-gray);
    }
    .multiple-choice {
        &.one-line{
            display: flex;
            flex-direction: row;
            .item{
                margin-right: 2cqw;
                input[type="checkbox"]{
                    margin-right: 0.5cqw;
                }
            }
        }
        .item{
            display: flex;
            align-self: center;
            margin-bottom: 1cqw;    
            input[type="checkbox"], input[type="radio"]{
                width: fit-content;
                margin: 0 2cqw 0 0;
            }
            label{
                color: black;
            }
        }
    }
    .field p{
        display: inline;
    }
    .field .ck p{
        display: block;
    }
    .one-line{
        display: flex;
        flex-direction: column;
    }
}
.form .form{
    width: fit-content;
}
@container content (width >= 600px) {
    .form {
        input[type="text"], 
        input[type="number"], 
        input[type="email"], 
        input[type="date"], 
        input[type="datetime-local"], 
        textarea, 
        input[type="file"], 
        input[type="password"], 
        select{
            width: 40cqw;
            &.wide{
                width: 70cqw;
            }
            &.smaller{
            width: 15cqw;
            }
        }
        img{
            width: 15cqw;
            height: 15cqw;
        }
        .one-line{
            flex-direction: row;
            .field{
                margin-right: 0.5cqw;
            }
        }
       
    }     
}
header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1cqh;
    background-color: white; 
    box-shadow: 0 0.2cqh 1cqh color-mix(in srgb, var(--dark-gray), transparent 70%);
    min-width: 0;
    /*z-index: 1;*/
    .logo img{
        width: 30cqw;
        max-width: 8rem;
    }
    div.options{
        display: flex;
        justify-content: center;
        align-items: center;
        a{
            margin-left: 3cqw;
            svg{
                width: 5cqw;
                height: 100%;
                max-width:1.5rem;
                .circle{
                    fill: transparent;
                }
                .icon{
                    fill: var(--dark-gray);
                }
         
            }
            &.hamburger.invisible{
                display: none;
            }
            &.hamburger-close{
                display: none;
                &.visible{
                    display: block;
                }
            }
        }
        
    }
}
@container outer-frame (width >= 800px) {
    /* menu is displayed left of content; no hamburger menu */
    header{
      /* position: static; */
      .logo img{
        width: 20cqw;
      }
      div.options a svg{
        width: 4cqw;
        margin: 0;
      }

      div.options .hamburger, 
      div.options .hamburger-close,
      div.options .hamburger-close.visible{
        display: none;
      }
    }
}  
#startseite-title-container{
  background-image: url(/assets/welcome_background-d51d82d83c5e7cb210d93409da910de07675e92b369840498c5e068cf9d7141e.jpeg);
  background-size: cover;
}
#title-container {
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.15),
    var(--primary) 115%
  );
  
 
  container-type: inline-size;
  h1.welcome-title {
    color: white;
    display: flex;
    align-items: end;
    padding: 1cqw 3cqw;
    font-size: 7cqw;
  }
}

#pharmareferenten {
  container-type: inline-size;
  position: relative;
  color: var(--dark-gray);
  div.container {
    border-radius: 1cqh;
    background-color: color-mix(in srgb, white, transparent 15%);
    margin: 2cqw;
    .swipeable{
      align-items: end;
    }
    div.person {
      min-width: 70cqw;
      div.personal-info {
        display: flex;
        svg {
          margin-right: 2cqw;
          width: 6cqw;
          height: 6cqw;
        }
        svg .icon {
          fill: white;
        }
        svg.icon{
          fill: white;
        }
        svg .circle {
          fill: var(--primary);
        }
        img, .image  svg{
          height: 20cqw;
          width: 17cqw;
          object-fit: cover;
          aspect-ratio: 3 / 4;
          border-radius: 1cqh;
          margin-right: 1cqw;
        }
        .image svg .icon{
          fill: var(--dark-gray);
        }
        p {
          margin: 0;
          font-size: 3cqw;
          &.name {
            font-weight: 600;
          }
        }
      }
    }
    div.logos {
      display: flex;
      justify-content: space-around;
      background-color: var(--light-gray);
      border-radius: 0 0 1cqh 1cqh;
      padding: 1cqw 0;
      img {
        width: 20cqw;
        aspect-ratio: 19 / 6;
        object-fit: contain;
      }
    }
  }
}

#navigation {
  container-type: inline-size;
  position: relative;
  .svg-container{
    padding-top: 2px;
  }
  .navigation-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 4cqh 0 0;
    text-align: center;
    color: var(--primary);
    font-size: 3cqw;
    min-width: 28cqw;
    svg {
      width: 14cqw;
      .circle {
        fill: var(--secondary);
      }
      .icon {
        fill: var(--primary);
        &.stroke {
          stroke: var(--primary);
        }
      }
      .icon-middle {
        fill: var(--secondary);
      }
    }
  }
  .navigation-option:last-child {
    margin: 0;
  }
}
#podcast {
  container-type: inline-size;
  .container {
    background-image: url(/assets/podcasts-a009bb00341776af85913f362a0c2dd40f534dbe8c27d8a520fc2283a137138c.png);
    background-size: contain;
    aspect-ratio: 1 / 1;
    margin: 0;
  }
  h2,
  h3 {
    color: white;
    font-weight: 600;
    text-align: center;
  }
  h2 {
    font-size: 12cqw;
  }
  h3 {
    font-size: 7cqw;
    margin: 0 0 15cqw 0;
  }
}
#highlights {
  position: relative;
  .container{
    margin: 0;
  }
}

@container content (width >= 600px) {
  #pharmareferenten div.container div.person {
    min-width: 45cqw;
    max-width: 50cqw;
    p.job {
      font-size: 2.2cqw;
    }
    div.personal-info {
      p {
        font-size: 2cqw;
      }
      img, .image svg{
        height: 13cqw;
        width: 13cqw;
      }
      svg {
        width: 5cqw;
        height: 5cqw;
      }
    }
  }
  #navigation .navigation-option {
    font-size: 2cqw;
    min-width: 20cqw;
    svg {
      width: 10cqw;
    }
  }
  #podcast .container {
    aspect-ratio: 4 / 3;
    background-position: 100%;
    h2 {
      font-size: 8cqw;
    }
    h3 {
      font-size: 6cqw;
    }
  }
}
.loader {
    width: 20px;
    height: 20px;
    padding: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--primary);
    --_m: 
        conic-gradient(#0000 10%,#000),
        linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
                    mask: var(--_m);
    -webkit-mask-composite: source-out;
                    mask-composite: subtract;
    animation: l3 1s infinite linear;
    display: none;
    &.visible{
        display: block;
    }
}
@keyframes l3 {to{transform: rotate(1turn)}}
.content{
    .login{
        h2{
            font-size: 6cqw;
        }
        .field{
            margin: 2cqw 0;
            width: 88cqw;
            label{
                color: var(--dark-gray);
                font-weight: 600;
            }
            input{
                width: 100%;
            };
            a.passwort-reset{
                font-size: 2cqw;
                color: var(--dark-gray);
                cursor: pointer;
            }
        }
        .login-button{
            padding: 2cqw;
            font-size: 3cqw;
            font-weight: 600;
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 1cqw;
            cursor: pointer;
            width: fit-content;
        }
        p{
            font-size: 3cqw;
        }
    }
}


@container content (width >= 600px) {
    .content{
        .login{
            h2{
                font-size: 3cqw;
            }
            .field{
                width: 40cqw;
                a.passwort-reset{
                    font-size: 1cqw;
                }
            }
            input, label{
                font-size: 1.4cqw;
            }
            .login-button{
                padding: 1cqw;
                font-size: 1.4cqw;
                border-radius: 0.5cqw;
            }
            p{
                font-size: 1.4cqw;
            }
        }
    }
    
}
.consent-digital{
    margin-top: 3cqw; 
    img{
        height: 150px;
        width: 150px;
    }
}
#menu{
    display: none;
    container-type: inline-size;
    background-color: white;
    div.menu-item, div.submenu-item{
        margin: 1cqh;  
        a{
            font-weight: 600;
            display: block;
            text-decoration: none;
            color: black;
            font-size: 3.5cqw;
            &.internal{
                color: var(--primary);
            }
        }   
    }
    div.submenu-item > a{
        padding-bottom: 0;
        font-weight: 100;
        &.active{
            color: var(--primary);
        }
    }
    div.menu-item{
        border-bottom: 1px solid
        color-mix(in srgb, var(--dark-gray), transparent 50%);
        padding-bottom: 1cqh;
        .active{
            color: var(--primary);
        }
        a{
            padding: 1cqw;
        }
    }
    div.menu-item:last-child{
        border-bottom: none;
        margin-bottom: 0;
    }

}
#menu.visible{
    display: block;
    z-index: 1;
}

@container outer-frame (width >= 500px) and (width < 800px)  {
    #menu{
        width: 55%;
        position: absolute;
        right: 0;
    }
} 

@container outer-frame (width >= 800px)  {
    #menu{
        display: block;
        flex: 1 0 25%;
        div.menu-item a{
            font-size: 6cqw;
        }
    }
} 

body{
  div.modal {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: var(--overlay);
    div.modal-content {
      container-type: inline-size;
      container-name: modal-content;
      background-color:white;
      margin: 15cqh auto;
      padding: 1cqw;
      max-width: 750px;
      
      input[type="text"], textarea{
        padding: 2%;
        width: 96%;
      }
      div.modal-footer {
        display: flex;
        justify-content: flex-end;
        margin: 1cqw 0;
        .button{
          margin-left: 1cqw;
          &.cancel{
            background-color: gray;
          }
        }
      }     
    }
  }
  .inserat-new{
    .fields{
      display: flex;
      flex-direction: column;
      width: 100%;
      .field{
        width: 100%;
        margin: 2cqw 0;
      }
    }
  }
}
@container modal-content (width >= 600px) {
  div.modal div.modal-content{
    .fields{
      flex-direction: row;
      justify-content: space-between;
      .field{
        width: 49cqw;
      }
    }
  }
  .content {
    h2 {
      font-size: 4cqw;
    }
    p, a, li, label{
      font-size: 1.8cqw;
    }
    input, textarea, select, button{
      padding: 1cqw;
      font-size: 1.8cqw;
    }
    .section {
      padding: 2cqw;
    }
    .button, button{
      padding: 1cqw 1.5cqw;
    }
  }
}
/* Pannellum 2.5.6, https://github.com/mpetroff/pannellum */
.pnlm-container{margin:0;padding:0;overflow:hidden;position:relative;cursor:default;width:100%;height:100%;font-family:Helvetica,"Nimbus Sans L","Liberation Sans",Arial,sans-serif;background:#f4f4f4 url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2267%22%20height%3D%22100%22%20viewBox%3D%220%200%2067%20100%22%3E%0A%3Cpath%20stroke%3D%22%23ccc%22%20fill%3D%22none%22%20d%3D%22M33.5%2C50%2C0%2C63%2C33.5%2C75%2C67%2C63%2C33.5%2C50m-33.5-50%2C67%2C25m-0.5%2C0%2C0%2C75m-66.5-75%2C67-25m-33.5%2C75%2C0%2C25m0-100%2C0%2C50%22%2F%3E%0A%3C%2Fsvg%3E%0A') repeat;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;outline:0;line-height:1.4;contain:content}.pnlm-container *{box-sizing:content-box}.pnlm-ui{position:absolute;width:100%;height:100%;z-index:1}.pnlm-grab{cursor:grab;cursor:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2226%22%20width%3D%2226%22%3E%0A%3Cpath%20stroke%3D%22%23000%22%20stroke-width%3D%221px%22%20fill%3D%22%23fff%22%20d%3D%22m15.3%2020.5s6.38-6.73%204.64-8.24-3.47%201.01-3.47%201.01%203.61-5.72%201.41-6.49c-2.2-0.769-3.33%204.36-3.33%204.36s0.873-5.76-1.06-5.76-1.58%205.39-1.58%205.39-0.574-4.59-2.18-4.12c-1.61%200.468-0.572%205.51-0.572%205.51s-1.58-4.89-2.93-3.79c-1.35%201.11%200.258%205.25%200.572%206.62%200.836%202.43%202.03%202.94%202.17%205.55%22%2F%3E%0A%3C%2Fsvg%3E%0A') 12 8,default}.pnlm-grabbing{cursor:grabbing;cursor:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2226%22%20width%3D%2226%22%3E%0A%3Cpath%20stroke%3D%22%23000%22%20stroke-width%3D%221px%22%20fill%3D%22%23fff%22%20d%3D%22m15.3%2020.5s5.07-5.29%203.77-6.74c-1.31-1.45-2.53%200.14-2.53%200.14s2.74-3.29%200.535-4.06c-2.2-0.769-2.52%201.3-2.52%201.3s0.81-2.13-1.12-2.13-1.52%201.77-1.52%201.77-0.261-1.59-1.87-1.12c-1.61%200.468-0.874%202.17-0.874%202.17s-0.651-1.55-2-0.445c-1.35%201.11-0.68%202.25-0.365%203.62%200.836%202.43%202.03%202.94%202.17%205.55%22%2F%3E%0A%3C%2Fsvg%3E%0A') 12 8,default}.pnlm-sprite{background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%22208%22%3E%0A%3Ccircle%20fill-opacity%3D%22.78%22%20cy%3D%22117%22%20cx%3D%2213%22%20r%3D%2211%22%20fill%3D%22%23fff%22%2F%3E%0A%3Ccircle%20fill-opacity%3D%22.78%22%20cy%3D%22143%22%20cx%3D%2213%22%20r%3D%2211%22%20fill%3D%22%23fff%22%2F%3E%0A%3Ccircle%20cy%3D%22169%22%20cx%3D%2213%22%20r%3D%227%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%0A%3Ccircle%20cy%3D%22195%22%20cx%3D%2213%22%20r%3D%227%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%0A%3Ccircle%20cx%3D%2213%22%20cy%3D%22195%22%20r%3D%222.5%22%2F%3E%0A%3Cpath%20d%3D%22m5%2083v6h2v-4h4v-2zm10%200v2h4v4h2v-6zm-5%205v6h6v-6zm-5%205v6h6v-2h-4v-4zm14%200v4h-4v2h6v-6z%22%2F%3E%0A%3Cpath%20d%3D%22m13%20110a7%207%200%200%200%20-7%207%207%207%200%200%200%207%207%207%207%200%200%200%207%20-7%207%207%200%200%200%20-7%20-7zm-1%203h2v2h-2zm0%203h2v5h-2z%22%2F%3E%0A%3Cpath%20d%3D%22m5%2057v6h2v-4h4v-2zm10%200v2h4v4h2v-6zm-10%2010v6h6v-2h-4v-4zm14%200v4h-4v2h6v-6z%22%2F%3E%0A%3Cpath%20d%3D%22m17%2038v2h-8v-2z%22%2F%3E%0A%3Cpath%20d%3D%22m12%209v3h-3v2h3v3h2v-3h3v-2h-3v-3z%22%2F%3E%0A%3Cpath%20d%3D%22m13%20136-6.125%206.125h4.375v7.875h3.5v-7.875h4.375z%22%2F%3E%0A%3Cpath%20d%3D%22m10.428%20173.33v-5.77l5-2.89v5.77zm1-1.73%203-1.73-3.001-1.74z%22%2F%3E%0A%3C%2Fsvg%3E%0A')}.pnlm-container:-moz-full-screen{height:100%!important;width:100%!important;position:static!important}.pnlm-container:-webkit-full-screen{height:100%!important;width:100%!important;position:static!important}.pnlm-container:-ms-fullscreen{height:100%!important;width:100%!important;position:static!important}.pnlm-container:fullscreen{height:100%!important;width:100%!important;position:static!important}.pnlm-render-container{cursor:inherit;position:absolute;height:100%;width:100%}.pnlm-controls{margin-top:4px;background-color:#fff;border:1px solid #999;border-color:rgba(0,0,0,0.4);border-radius:3px;cursor:pointer;z-index:2;-webkit-transform:translateZ(9999px);transform:translateZ(9999px)}.pnlm-control:hover{background-color:#f8f8f8}.pnlm-controls-container{position:absolute;top:0;left:4px;z-index:1}.pnlm-zoom-controls{width:26px;height:52px}.pnlm-zoom-in{width:100%;height:50%;position:absolute;top:0;border-radius:3px 3px 0 0}.pnlm-zoom-out{width:100%;height:50%;position:absolute;bottom:0;background-position:0 -26px;border-top:1px solid #ddd;border-top-color:rgba(0,0,0,0.10);border-radius:0 0 3px 3px}.pnlm-fullscreen-toggle-button,.pnlm-orientation-button,.pnlm-hot-spot-debug-indicator{width:26px;height:26px}.pnlm-hot-spot-debug-indicator{position:absolute;top:50%;left:50%;width:26px;height:26px;margin:-13px 0 0 -13px;background-color:rgba(255,255,255,0.5);border-radius:13px;display:none}.pnlm-orientation-button-inactive{background-position:0 -156px}.pnlm-orientation-button-active{background-position:0 -182px}.pnlm-fullscreen-toggle-button-inactive{background-position:0 -52px}.pnlm-fullscreen-toggle-button-active{background-position:0 -78px}.pnlm-panorama-info{position:absolute;bottom:4px;background-color:rgba(0,0,0,0.7);border-radius:0 3px 3px 0;padding-right:10px;color:#fff;text-align:left;display:none;z-index:2;-webkit-transform:translateZ(9999px);transform:translateZ(9999px)}.pnlm-title-box{position:relative;font-size:20px;display:table;padding-left:5px;margin-bottom:3px}.pnlm-author-box{position:relative;font-size:12px;display:table;padding-left:5px}.pnlm-load-box{position:absolute;top:50%;left:50%;width:200px;height:150px;margin:-75px 0 0 -100px;background-color:rgba(0,0,0,0.7);border-radius:3px;text-align:center;font-size:20px;display:none;color:#fff}.pnlm-load-box p{margin:20px 0}.pnlm-lbox{position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;display:none}.pnlm-loading{animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-name:pnlm-mv;-webkit-animation-name:pnlm-mv;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;animation-timing-function:linear;-webkit-animation-timing-function:linear;height:10px;width:10px;background-color:#fff;position:relative}@keyframes pnlm-mv{from{left:0;top:0}25%{left:10px;top:0}50%{left:10px;top:10px}75%{left:0;top:10px}to{left:0;top:0}}@-webkit-keyframes pnlm-mv{from{left:0;top:0}25%{left:10px;top:0}50%{left:10px;top:10px}75%{left:0;top:10px}to{left:0;top:0}}.pnlm-load-button{position:absolute;top:50%;left:50%;width:200px;height:100px;margin:-50px 0 0 -100px;background-color:rgba(0,0,0,.7);border-radius:3px;text-align:center;font-size:20px;display:table;color:#fff;cursor:pointer}.pnlm-load-button:hover{background-color:rgba(0,0,0,.8)}.pnlm-load-button p{display:table-cell;vertical-align:middle}.pnlm-info-box{font-size:15px;position:absolute;top:50%;left:50%;width:200px;height:150px;margin:-75px 0 0 -100px;background-color:#000;border-radius:3px;display:table;text-align:center;color:#fff;table-layout:fixed}.pnlm-info-box a,.pnlm-author-box a{color:#fff;word-wrap:break-word;overflow-wrap:break-word}.pnlm-info-box p{display:table-cell;vertical-align:middle;padding:0 5px 0 5px}.pnlm-error-msg{display:none}.pnlm-about-msg{font-size:11px;line-height:11px;color:#fff;padding:5px 8px 5px 8px;background:rgba(0,0,0,0.7);border-radius:3px;position:absolute;top:50px;left:50px;display:none;opacity:0;-moz-transition:opacity .3s ease-in-out;-webkit-transition:opacity .3s ease-in-out;-o-transition:opacity .3s ease-in-out;-ms-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out;z-index:1}.pnlm-about-msg a:link,.pnlm-about-msg a:visited{color:#fff}.pnlm-about-msg a:hover,.pnlm-about-msg a:active{color:#eee}.pnlm-hotspot-base{position:absolute;visibility:hidden;cursor:default;vertical-align:middle;top:0;z-index:1}.pnlm-hotspot{height:26px;width:26px;border-radius:13px}.pnlm-hotspot:hover{background-color:rgba(255,255,255,0.2)}.pnlm-hotspot.pnlm-info{background-position:0 -104px}.pnlm-hotspot.pnlm-scene{background-position:0 -130px}div.pnlm-tooltip span{visibility:hidden;position:absolute;border-radius:3px;background-color:rgba(0,0,0,0.7);color:#fff;text-align:center;max-width:200px;padding:5px 10px;margin-left:-220px;cursor:default}div.pnlm-tooltip:hover span{visibility:visible}div.pnlm-tooltip:hover span:after{content:'';position:absolute;width:0;height:0;border-width:10px;border-style:solid;border-color:rgba(0,0,0,0.7) transparent transparent transparent;bottom:-20px;left:-10px;margin:0 50%}.pnlm-compass{position:absolute;width:50px;height:50px;right:4px;bottom:4px;border-radius:25px;background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2250%22%20width%3D%2250%22%3E%0A%3Cpath%20d%3D%22m24.5078%206-3.2578%2018h7.5l-3.25781-18h-0.984376zm-3.2578%2020%203.2578%2018h0.9844l3.2578-18h-7.5zm1.19531%200.9941h5.10938l-2.5547%2014.1075-2.5547-14.1075z%22%2F%3E%0A%3C%2Fsvg%3E%0A');cursor:default;display:none}.pnlm-world{position:absolute;left:50%;top:50%}.pnlm-face{position:absolute;-webkit-transform-origin:0 0;transform-origin:0 0}.pnlm-dragfix,.pnlm-preview-img{position:absolute;height:100%;width:100%}.pnlm-preview-img{background-size:cover;background-position:center}.pnlm-lbar{width:150px;margin:0 auto;border:#fff 1px solid;height:6px}.pnlm-lbar-fill{background:#fff;height:100%;width:0}.pnlm-lmsg{font-size:12px}.pnlm-fade-img{position:absolute;top:0;left:0}.pnlm-pointer{cursor:pointer}
#pharmareferenten.display-list{
    background-image: none;
    .pharmareferent{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 2cqw 0 0 0;
        border-bottom: 1px solid var(--light-gray);
        .person{
            margin-bottom: 2cqw;
        }
        .sideline p {            
            display: flex;
            justify-content: space-between;
        }
        .button{
            align-self: flex-start;
        }
    }  
    .pharmareferent:first-child{
        padding-top: 0;
    }
}

.pharmareferenten .sideline{
    .kam-dm-section{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      p{
        margin: 0;
      }
    }
    .actions{
      display: flex;
      height: fit-content;
      justify-content: space-between;

      .button{
        margin: 0;
        height: 100%;
      }
    }
  }

@container content (width >= 600px) {
    #pharmareferenten.display-list .pharmareferent{
        flex-direction: row;
    }

    .pharmareferenten .sideline .actions{
        .button{
            margin-left: 0.5cqw;
        }
        a.button:first-child{
            margin-left: 0;
        }
    }
}
.praxisservice.cart{
    position: relative;
    .cart-count{
        color: var(--primary);
        left: 25%;
        top: -15%;
        font-size: 0.8rem;
    }
    .cart-data.open{
        right: 0;
        left: unset;
        background-color: white;
        span{
            border: none;
            padding: 0.5rem 0.7rem;
            a{
                color: var(--primary);
                text-decoration: none;
                margin: 0;
                font-weight: normal;
                &:hover{
                    font-weight: bold;
                }
            }
        }
    }
    div.cart_image {
        width: fit-content;
        margin-right: 0;
        svg{
            fill: var(--dark-gray);
            width: 5cqw;
            max-width: 1.5rem;
        }
    }
    
}

div.praxisservice-engine{
    div.filters {
    margin: 1rem 0;
        .filter-btn{
            padding: 0.3rem 0.5rem;
            border-radius: 0.5cqh;
            border: none;
            background-color: var(--light-gray);
            &.active{
                background-color: var(--primary);
                color: white;
                border: none;
            }
        }
    }
    div.available-articles{
        ul.articles-list{
            tr{
              border: none;
              padding: 0 0.5rem;
            }
            li:hover{
                background-color: transparent;
            }
            li:nth-child(2n of .show){
                background-color: white;
            }
            li:nth-child(2n):hover{
                background-color: var(--light-gray);
            }
            li:hover{
                background-color: var(--light-gray);
            }
            li.article-data.show{
                display: block;
            }
            .article
            {
                a.img{
                    margin-right: 1rem;
                    margin-top: 0.4rem;
                }
                div.title {
                    padding: 0 2% 0 0 !important;
                    a{
                        color: var(--primary);    
                    }
                }
              
                div.order-form {
                    margin: 0;
                    .cart-and-quantity{
                        margin-top: 0.3rem;
                    }
                    form input[type="submit"]{
                        background-color: var(--primary);
                        color: white;
                        font-weight: 600;
                        border: none;
                        border-radius: 0.5cqh;
                        width: 5rem;
                    }
                    form fieldset{
                        gap: 0.2rem;
                    }
                }
            } 
          }
    }
    div.pop-over div.container{
        div.close-button {
            font-size: 2rem;
            span{
                font-size: 2.5cqw;
                color: var(--dark-gray);
            }
        }
        button.slider{
            color: var(--primary);
        }
        div.additional a{
            color: var(--primary);
        }
        div.additional a:hover{
            text-decoration: none;
        }
    }
}

#checkout-page {
    .articles-checkout{
        button{
            background-color: transparent;
        }
    }
    .praxisservice-engine input[type="submit"]{
        background-color: var(--primary);
        color: white;
        font-weight: 600;
        border: none;
        border-radius: 0.5cqh;
    }    
}
@container outer-frame (width >= 800px) {
    .praxisservice.cart div.cart_image svg{
        fill: var(--dark-gray);
        width: 2.5cqw;
    }
}
@container outer-frame (width >= 600px) {
    .praxisservice.cart .cart-count{
        left: 35%;
        top: -15%;
        font-size: 0.9rem;
    }
}

@container content (width >= 600px) {
    div.praxisservice-engine div.available-articles table td.article div.order-form form input[type="submit"]{
        width: 6rem;
    }

}
.public, .no-menu{
    h1{
        font-size: 6cqw;
    }
    h2{
        font-size: 5.5cqw;
    }
    h3{
        font-size: 5cqw;
    }
    p, label, input, p a{
        font-size: 3cqw;
    }
    .field{
        width: 88cqw;
        input{
            width: 100%;
        }
        a.passwort-reset{
            font-size: 2.5cqw;
            color: var(--dark-gray);
            cursor: pointer;
        }
    }
    input[type="submit"]{
        width: fit-content;
        margin-top: 1cqw;
    }
}



@container content (width >= 600px) {
    .public, .no-menu{
        h1{
            font-size: 3.5cqw;
        }
        h2{
            font-size: 3cqw;
        }
        h3{
            font-size: 2.5cqw;
        }
        label, p, input, p a{
            font-size: 1.4cqw;
        }
        .field{
            width: 40cqw;
            a.passwort-reset{
                font-size: 1cqw;
            }
            input{
                width: 40cqw !important;
            }
        }
    }   
}
.active {
    background-color: white;
    font-weight: 600;
}
.insert-before {
    border-top: 3px solid rgb(236, 32, 127);
}
.insert-after {
    border-bottom: 3px solid rgb(236, 32, 127);
}
.sortable{
    cursor: grab;
}
.static-info{
    display: flex;
    flex-direction: column;
}
body {
  container-name: body;
  container-type: inline-size;
  font-family: "Open Sans";
  margin: 0; 
}
body, input, textarea, button {
  font-family: "Open Sans";
}
#outer-frame {
  width: 100%;
  container-name: outer-frame;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  > * {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
  }
}

#main {
  flex-grow: 1;
  container-type: inline-size;
  container-name: main;
}

#menu {
  container-type: inline-size;
  container-name: menu;
}

#main-content {
  container-name: content;
  container-type: inline-size;
}

@container body (width >= 1000px) {
  /* content is horizontally centered on page */
  #outer-frame {
    width: 1000px;
    margin: 0 auto;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--dark-gray), transparent 70%);
  }
}

@container outer-frame (width >= 800px) {
  #outer-frame {
    display: flex;
    flex-direction: row;
  }
  #main {
    display: flex;
    flex-direction: row;
  }

  #main-content {
    flex: 1 0 75%;
  }
}

.uap-q{
    .with-image{
        display: flex;
        flex-direction: column;
        img{
            align-self: center;
            &.image-first{
                margin-right: 1cqw;
            }
        }
    }
}

@container content (width >= 600px) {
    .uap-q{
        .with-image{
            flex-direction: row;
        }
    }
}
.umfrage{

    label {
        display: block;
        text-align: left;
        font-weight: bold;
        color: blue;
        font-size: 3.6vw;
        margin: 2vw 0;
        padding: 1vw 1vw 1vw 0;
      }
      
      select,
      textarea,
      input[type="text"],
      input[type="email"],
      input[type="password"],
      input[type="submit"] {
        &.volle_breite {
          width: 90%;
          margin-top: 0;
        }
      }
      
      input[type="text"]:-webkit-autofill,
      input[type="email"]:-webkit-autofill,
      input[type="password"]:-webkit-autofill {
        background-color: var(--light-gray);
        color: var(--dark-gray);
        border: 1px solid var(--light-gray);
      }
      
      select {
        &.inline {
          width: inherit;
          display: inline-block;
        }
      }
      
      form > a {
        display: inline-block;
        font-size: 3.6vw;
        margin: 2vw 0;
        padding: 2vw 2vw 2vw 0;
        color: blue;
        text-decoration: none;
      
        &:hover {
          text-decoration: underline;
        }
      }
      
      h2.umfrage {
        padding-top: 2vw;
      }
      
      form {
        display: flex;
        flex-direction: column;
        .hidden{
          display: none;
        }
        p.umfrage {
          margin: 1cqw;
          &.sticky {
            position: sticky;
            background-color: white;
            padding-top: 6px;
            padding-bottom: 6px;
            top: 0;
            min-height: 30px;
          }
      
          padding-left: 2vw;
          position: relative;
          textarea {
            width: 80%;
          }
      
          label {
            font-weight: normal;
            color: var(--dark-gray);
            margin: 0;
            padding: 0;
      
            &.multiple,
            &.single {
              display: inline;
            }
          }
      
          &.cme {
            label {
              padding-left: 20px;
      
              input[type="radio"] {
                &.cme {
                  position: absolute;
                  left: 10px;
                }
              }
            }
          }
      
          span.schulnoten {
            float: right;
      
            & > * {
              display: inline-block;
              width: 3vw;
              height: 3vw;
              font-size: 3vw;
              line-height: 100%;
              border-radius: 3vw;
              padding: 0;
              margin: 0 0.25vw;
              border: 1px solid var(--light-gray);
              text-align: center;
              background-color: var(--light-gray);
            }
      
            input[type="radio"] {
              display: none;
            }
      
            input[type="radio"]:checked + label {
              border: 1px solid var(--primary);
              color: white;
              background-color: var(--primary);
            }
      
            label.ja_nein {
              width: 10vw;
            }
          }
        }
      
        p.va_zusatzoption {
          label {
            display: inline;
            font-weight: normal;
            color: #606062;
            font-size: 1.45vw;
          }
        }
        &.compact {
          fieldset {
            border: 0px;
            padding: 0 0 0 2rem;
            input[type="text"],
            select,
            label {
              margin-top: 0;
            }
          }
        }
      }
      
      p.ebm_webinar_themen {
        font-weight: bold;
        line-height: 2.5em;
      
        a.thema {
          border: 1px solid var(--primary);
          background-color: var(--primary);
          color: white !important;
          padding: 2px 4px;
          border-radius: 4px;
      
          &.inactive {
            background-color: color-mix(in srgb, var(--primary), transparent 90%);
            color: var(--primary) !important;
          }
        }
      }
      
      div.ebm_webinar {
        cursor: pointer;
        margin-bottom: 2em;
      
        &.invisible {
          display: none;
        }
      
        p.ebm_webinar_antwort {
          display: none;
          padding-left: 2em;
        }
      
        &.active {
          p.ebm_webinar_antwort {
            display: block;
          }
      
          p.ebm_webinar_frage {
            color: black;
          }
        }
      
        p.ebm_webinar_frage {
          color: var(--primary);
          font-weight: bold;
      
          &:hover {
            text-decoration: underline;
          }
        }
      }

      .regeler{
        width: fit-content;
        display: flex;
        flex-direction: column;
        align-items: center;
        label.single{
          display: flex !important;
          align-items: center;
          width: fit-content;
        }
      }
      
}


@media only screen and (min-width: 700px) {
    .umfrage{
        form > a {
            display: inline-block;
            font-size: 1.8vw;
            margin: 1vw 0;
            padding: 1vw 1vw 1vw 0;
          }
        
          label {
            font-size: 1.8vw;
            margin: 1vw 0;
          }
        
          select,
          textarea,
          input[type="text"],
          input[type="email"],
          input[type="password"] {
            font-size: 1.8vw;
            margin: 1vw 0;
            padding: 1vw 1vw;
            border-radius: 1vw;
          }
        
          input[type="submit"] {
            font-size: 1.8vw;
            margin: 1vw 0;
            padding: 1vw 1vw;
            border-radius: 1vw;
          }
        
          form {
            p.umfrage {
              padding-left: 1vw;
        
              span.schulnoten {
                & > * {
                  width: 1.5vw;
                  height: 1.5vw;
                  font-size: 1.5vw;
                  border-radius: 1.5vw;
                  margin: 0 0.125vw;
                }
        
                label.ja_nein {
                  width: 40px;
                }
              }
            }
          }
    }
  
}

@media only screen and (min-width: 1000px) {
    .umfrage{
        label {
            font-size: 14px;
            margin: 8px 0;
          }
        
          select,
          textarea,
          input[type="text"],
          input[type="email"],
          input[type="password"] {
            font-size: 14px;
            margin: 8px 0;
            padding: 8px 8px;
            border-radius: 7px;
          }
        
          input[type="submit"] {
            font-size: 14px;
            margin: 8px 0;
            padding: 8px 8px;
            border-radius: 7px;
          }
        
          form {
            p.umfrage {
              padding-left: 14px;
        
              span.schulnoten {
                & > * {
                  width: 14px;
                  height: 14px;
                  font-size: 14px;
                  border-radius: 14px;
                  margin: 0 3px;
                }
              }
            }
        
            p.va_zusatzoption {
              label {
                font-size: 11px;
              }
            }
          }
        }
        div.mfa_videos {
          display: block;
          video {
            width: 100%;
          }
    }
 
}
@media only screen and (min-width: 800px) {
    .umfrage{
        div.mfa_videos {
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: 1rem;
          }
    }
  
}

@media only screen and (max-width: 700px) {
    .umfrage{
        form {
            p.va_zusatzoption {
              label {
                font-size: 2.9vw;
              }
            }
          }
    }
}
:root {
    --primary: #E20072;
    --secondary: #F4B5CF;
    --dark-gray: #595959;
    --light-gray: #E8E8E9;
    --overlay: rgba(65, 65, 65, 0.275);
    --success: #4CAF50;
}
div.virtual_event {
  div.panorama {
    display: block;
    div.pano_content {
      position: absolute;
      background-color: #fff;
      width: 80%;
      margin: 20px auto;
      top: 20px;
      max-height: 800px;
      border-radius: 5px;
      min-height: 100px;
      z-index: 1000000;
      padding: 5px 10px !important;
      overflow: auto;
      div.close {
        cursor: pointer;
        position: absolute;
        right: 5px;
        background-color: var(--primary);
        color: white;
        border-radius: 10px;
        width: 20px;
        line-height: 20px;
        font-size: 2cqw;
        text-align: center;
        font-weight: bold;
      }
      h1 {
        color: var(--primary);
        font-size: 4.5cqw;
        padding: 0;
        margin-top: 1rem;
      }
      video.movie_preview {
        width: 100%;
        height: 30vh;
      }
    }
    #custom_controls {
      position: absolute;
      top: 1px;
      right: 1px;
      width: 32px;
      font-size: 0;
      border: 1px solid gray;
      a {
        position: relative;
        display: inline-block;
        box-sizing: border-box;
        width: 26px;
        height: 26px;
        background-color: #fff;
        background-size: 85%;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        z-index: 1000000;
      }
      a.exit {
        background-image: url(/assets/icons2-da9ef45985ff9670946f06ca358a40d9c2f009620ad552cffdbf5e38cbc2c697.svg#exit3);
        border-bottom: 1px solid gray;
      }
      a.contact {
        background-image: url(/assets/icons2-da9ef45985ff9670946f06ca358a40d9c2f009620ad552cffdbf5e38cbc2c697.svg#contact);
      }
    }
    div.hotspot-element {
      background-color: color-mix(in srgb, var(--primary), transparent 50%);
      background-size: 60%;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      border: 1.5px solid #fff;
      &:hover {
        background-color: color-mix(in srgb, var(--primary), transparent 20%);
        position: absolute;
        z-index: 10;
      }
     
    }
    div.pnlm-tooltip:hover span{
      display: block;
  }
    div.pnlm-hotspot.hotspot-scene {
      background-image: url(/assets/icons2-da9ef45985ff9670946f06ca358a40d9c2f009620ad552cffdbf5e38cbc2c697.svg#darrow);
    }
    div.hotspot-info {
      background-image: url(/assets/icons2-da9ef45985ff9670946f06ca358a40d9c2f009620ad552cffdbf5e38cbc2c697.svg#info);
    }
    div.hotspot-webinar,
    div.hotspot-zoom {
      background-image: url(/assets/icons2-da9ef45985ff9670946f06ca358a40d9c2f009620ad552cffdbf5e38cbc2c697.svg#lecture);
    }
    div.hotspot-url {
      background-image: url(/assets/icons2-da9ef45985ff9670946f06ca358a40d9c2f009620ad552cffdbf5e38cbc2c697.svg#url);
    }
    div.hotspot-podcast {
      background-image: url(/assets/icons2-da9ef45985ff9670946f06ca358a40d9c2f009620ad552cffdbf5e38cbc2c697.svg#podcast);
    }
    div.hotspot-movie {
      background-image: url(/assets/icons2-da9ef45985ff9670946f06ca358a40d9c2f009620ad552cffdbf5e38cbc2c697.svg#movie);
    }
    div.pnlm-load-box{
      background-color: transparent;
      width: 50px;
      height: 50px;
      transform: translate(-50%, -50%);
      margin: 0;
      p{
        display: none;
      }
      .pnlm-lbox{
        transform: translate(-50%, -50%);
        margin: 0;
        height: fit-content;
        width: fit-content;
        position: relative;
        .pnlm-loading{
          background-color: transparent;
          background-image: url(/assets/jenapharm-d0b21a2bb1ae33acd327afb813ed9adeaab7fc967026e09578aabcc6313bb768.png);
          background-size: contain;
          width: 50px;
          height: 50px;
          animation: rotate 1s linear infinite; 
        }
      }
 
    }
  }
  div.floor {
    display: none;
  }
  &.floor {
    div.floor {
      display: block;
      width: 100% !important;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    div.panorama {
      display: none;
    }
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/*
 * 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.
 *



 */