html {
    font-size: 0.052vw;
    height: calc(100vw * 9 / 16);
}

* {
    box-sizing: border-box;
}

body {
    font-size: 24rem;
    font-family: 'Roboto Condensed', sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    /*
    background: url('/neu/bilder/bg.jpg') no-repeat;
    background-size: contain;
    */
}

h2 {
    font-size: 2.5em;
    text-align: center;
}

p {
    line-height: 1.33;
}

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

div.oau_video_interaktiv {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    max-height: 100vh;
    margin: 0 auto;
    /*opacity: 0.6;*/
}

div.oau_video_interaktiv video {
    display: block;
    width: 100%;
    object-fit: cover;
    position: relative;
    height: 100%;
    z-index: -1;
}

.Valiant360_default canvas {
    position: absolute;
    top: 0;
    left: 0;
    touch-action: manipulation;
}

.oau_video_interaktiv:fullscreen, .oau_video_interaktiv:-ms-fullscreen,   .oau_video_interaktiv:-moz-full-screen, .oau_video_interaktiv:-webkit-full-screen {
    width: 100%;
    height: 100%;
}

a {
    cursor: pointer;
}

/*ANCHOR Vordefinierte Knöpfe*/
div#iv_knoepfe {
    position: absolute;
    top: 2em;
    left: 7%;
    z-index: 10;
}

div#iv_knoepfe > a,
a.iv_kn {
    display: flex;
    line-height: 1;
    background: #fff;
    border-radius: 0.5em;
    align-items: center;
    text-transform: uppercase;
    color: #222;
    text-decoration: none;
    position: relative;
    padding-right: 1em;
}

div#iv_knoepfe span.material-icons,
a.iv_kn span.material-icons {
    display: block;
    background: #F29E39;
    color: #fff;
    padding: 0.5em;
    border-radius: 0.25em;
    position: relative;
    font-size: 2em;
    margin-right: 0.5em;
}

/*ANCHOR Szenen */

span#szene {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    position: absolute;
    background: none;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; 
    visibility: hidden;
    background: #36AEBF;
    color: #fff;
}

span#szene.ohne {
    background: none;
}

span#szene2 {
    display: block;
    position: absolute;
    padding: 1em;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 0.1em;
    z-index: 10;
    bottom: 3em;
    right: 0;
    opacity: 0;
    visibility: hidden;
    color: #fff; 
}

span#szene.offen,
span#szene2.offen {
    opacity: 1;
    transition: none;
    visibility: visible;
}

span#szene.offen,
span#szene2.offen,
span#szene a,
div#iv_knoepfe > a,
.video-controls button,
span#szene div.fl_l,
span.abfrager.offen {
    box-shadow: 0 4rem 5rem -2rem rgba(0, 0, 0, .2), 0 8rem 13rem 1px rgba(0, 0, 0, .14), 0 3rem 16rem 2rem rgba(0, 0, 0, .12);
}

span#szene:empty,
span#szene2:empty {
    padding: 0;
}

span#szene.hotspot,
span#szene.popup {
    background: none;
    box-shadow: none;
    top: 0;
    left: 0;
    transform: none;
}

span#szene.hotspot {
    width: 1%;
    height: 1%;
}

span#szene.abfrage {
    left: 7%;
    top: 2em;
    width: auto;
    height: auto;
    background: none;
    box-shadow: none;
}


/*ANCHOR Szene a, form... */

span#szene div.b_mehr {
    width: 86%;
    position: relative;
}

span#szene a.normal {
    display: flex;
    align-items: center;
    text-align: center;
    background: #fff;
    color: #222;
    padding: 0 2em;
    line-height: 1;
    border-radius: 0.5em;
    text-transform: uppercase;
    height: 4em;
    width: 20em;
    justify-content: center;
    font-weight: 700;
}

span#szene div.wrap a.normal {
    margin: 1em;
}

form {
    background: #fff;
    padding: 1em;
    border-radius: 0.5em;
}

form input {
    display: block;
    padding: 0.5em;
    background: #eee;
    border: 0;
    border-radius: 0.15em;
    margin-bottom: 1em;
}

form button {
    display: inline-block;
    padding: 0.5em;
    background: green;
    color: #fff;
    text-transform: uppercase;
    border-radius: 0.25em;
}

form button::before {
    display: none;
}

span#szene div.info,
span#szene2 div.info {
    position: absolute;
    left: 120%;
    padding: 3em;
    background: #666;
    color: #fff;
    top: 50%;
    transform: translateY(-50%);
    width: 150%;
}

span#szene img,
span#szene2 img {
    display: block;
    width: 100%;
    height: auto;
}

div.hotspot {
    position: absolute;
}

span#szene div.hotspot > a {
    display: block;
    position: relative;
    width: 2em;
    height: 2em;
    border-radius: 100%;
    border: 0.25em solid #f29f3944;
    background: #F29E39;
    background-clip: content-box;
}

span#szene div.hotspot > a::before,
span#szene a.nur_mobil::before {
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    position:absolute;
    background: rgba(255,255,255,0.75);
    content: '';
    border-radius: 100%;
    display: block;
    animation: pulsejg2 2.8s linear infinite;
}

/*ANCHOR Animationen */
@keyframes pulsejg2 {
    0% {
        transform: scale(.6);
        opacity: 0
    }

    40% {
        transform: scale(.8);
        opacity: .05
    }

    50% {
        transform: scale(1);
        opacity: .1
    }

    60% {
        transform: scale(1.1);
        opacity: .3
    }

    80% {
        transform: scale(1.2);
        opacity: .1
    }

    100% {
        transform: scale(1.3);
        opacity: 0
    }
}

@keyframes rotateInDownLeft {
    from {
      transform-origin: left bottom;
      transform: rotate3d(0, 0, 1, -45deg);
      opacity: 0;
    }
  
    to {
      transform-origin: left bottom;
      transform: none;
      opacity: 1;
    }
  }

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    position: absolute;
    left: calc(50% - 40px);
    top: calc(50% - 40px);
  }
  .lds-ellipsis div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
  }
  .lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
  }
  @keyframes lds-ellipsis1 {
    0% {
      transform: scale(0);
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes lds-ellipsis3 {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(0);
    }
  }
  @keyframes lds-ellipsis2 {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(24px, 0);
    }
  }

span#alle_kapitel {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 15;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    opacity: 0;
}

span#alle_kapitel a {
    display: inline-block;
    padding: 0.15em;
    margin: 0.15em;
}

a.slick-arrow {
    position: absolute;
    background: #999;
    color: #fff;
    padding: 0.5em;
    line-height: 1;
    top: calc(50% - 1em);
    left: 0.5em;
    border-radius: 100%;
    z-index: 1; 
}

a.slick-arrow.slick-next {
    left:auto;
    right: 0.5em;
}

.Valiant360_default .controlsWrapper {
    display: none;
}

div.flexer {
    display: flex;
    justify-content: space-evenly;
}

div.wrap > div.flexer {
    flex-wrap: wrap;
    width: 44em;
    margin: 0 auto;
    max-width: 90%;
}

div.flexer > div {
    margin-left: 3em;
}

span.abfrager {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 7%;
    top: 2em;
    z-index: 12;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s;
    height: 4em;
    width: 4em;
    border-radius: 0.5em;
    background: #F29E39;
}

span.abfrager.offen {
    opacity: 1;
    visibility: visible; 
}

span.abfrager > a > span {
    display: block;
    position: relative;
    padding: 0.5em;
    line-height: 1;
    font-size: 2em;
    color: #fff;
}

span.abfrager > div {
    display: none;
}

span#szene div.vorschau,
span#szene2 div.vorschau {
    overflow: hidden;
    width: 38.2%;
    position: absolute;
    right: 0;
    top: 0;
}

div.vorschau div.zeit {
    padding: 1em;
    background: #333;
    color: #fff;
    font-size: 85%;
}

div.oau_video_interaktiv div.vorschau video {
    width: 100%;
    height: auto;
    transform: none;
    position: static;
}

div.galerie {
    display: flex;
    flex-wrap: wrap;
}

div.galerie a {
    display: block;
    margin: 0.5em;
}

/* ANCHOR div.fl_l   Abfrager*/
span#szene div.fl_l {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: absolute;
    padding: 2em;
    right: 0;
    top: 0;
    background: #fff;
    border-radius: 0.5em;
    color: #333;
}

span.abfrager.offen,
span#szene div.fl_l,
div#iv_knoepfe > a,
span#szene div.b_mehr,
div.hotspot {
    animation: fadeIn .85s ease-in-out;
}

.fadeOut {
    animation: fadeOut .85s ease-in-out;
}

.featherlight div.fl_l {
    display: flex;
    position: static;
    transform: none;
    align-items: center;
}

div.fl_l > div {
    margin-left: 3em;
    min-width: 25em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; 
}

div.fl_l img,
div.f_content img {
    display: block;
    max-width: 38.2%;
}

span#szene a.x_er {
    display: block;
    position: absolute;
    right: 0.5em;
    top: 0.5em;
    width: 1em;
    height: 1em;
    box-shadow: none;
    font-weight: 700;
    font-size: 1.5em;
}

.featherlight a.x_er {
    display: none;
}

span#szene a.nur_mobil {
    display: none;
    background: #F29E39;
    color: #fff;
    padding: 0.5em;
    border-radius: 0.25em;
    font-size: 2em;
    right: 5%;
    top: 0.5em;
}

.featherlight a.nur_mobil {
    display: none;
}

/*ANCHOR IV VIDEOPLAYER */

.video-controls {
    right: 0;
    left: 0;
    padding: 0.5em;
    position: absolute;
    bottom: 1em;
    z-index: 100;
    width: 86%;
    left: 7%;
}

.video-progress {
    position: relative;
    height: 0.25em;
    margin-bottom: 0.5em;
    display: none;
}

progress {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 2rem;
    width: 100%;
    height: 3rem;
    pointer-events: none;
    position: absolute;
    top: 0;
}

progress::-webkit-progress-bar {
    background-color: #474545;
    border-radius: 2rem;
}

progress::-webkit-progress-value {
    background: orange;
    border-radius: 2rem;
}

progress::-moz-progress-bar {
    border: 1px solid orange;
    background: orange;
}

.seek {
    position: absolute;
    top: 0;
    width: 100%;
    cursor: pointer;
    margin: 0;
}

.seek:hover+.seek-tooltip {
    display: block;
}

.seek-tooltip {
    display: none;
    position: absolute;
    top: -2.5em;
    margin-left: 0;
    font-size: 100%;
    padding: 0.25em;
    content: attr(data-title);
    font-weight: bold;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6);
}

.bottom-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.left-controls {
    display: flex;
    align-items: center;
    color: #fff;
}

.volume-controls {
    display: flex;
    align-items: center;
}

.volume-controls input {
    width: 100px;
    opacity: 1;
    transition: all 0.4s ease;
}

.volume-controls:hover input,
.volume-controls input:focus {
    width: 100px;
    opacity: 1;
}

.video-controls button {
    cursor: pointer;
    position: relative;
    margin-right: 0.5em;
    font-size: 2em;
    padding: 0.5em;
    border: none;
    outline: none;
    background-color: #f29e39;
    border-radius: 0.25em;
    display: flex;
    color: #fff;
}

.video-controls div.right-controls button {
    margin: 0;
}

.video-controls button.pip-button {
    display: none;
}

.video-controls button .material-icons {
    font-size: 1em;
}

.video-controls button * {
    pointer-events: none;
}

.video-controls button::before {
    content: attr(data-title);
    position: absolute;
    display: block;
    left: 0;
    top: -3em;
    background-color: #aaa;
    font-weight: 400;
    font-size: 50%;
    color: #fff;
    padding: 0.5em;
    word-break: keep-all;
    white-space: pre;
    transition: all 0.4s;
    opacity: 0;
    visibility: hidden;
    border-radius: 0.25em;
}

.video-controls button:hover::before {
    opacity: 1;
    visibility: visible;
}

.video-controls div.right-controls button:hover::before {
    left: auto;
    right: 0;
}

.fullscreen-button {
    margin-right: 0;
}

.video-controls div.time {
    margin-right: 1em;
    display: none;
}

.playback-animation {
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -40px;
    margin-top: -40px;
    width: 80px;
    height: 80px;
    border-radius: 80px;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
}

input[type=range] {
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 8.4rem;
    background: transparent;
    cursor: pointer;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    cursor: pointer;
    border-radius: 2rem;
    -webkit-appearance: none;
    transition: all 0.4s ease;
}

input[type=range]::-webkit-slider-thumb {
    height: 1.2em;
    width: 1.2em;
    border-radius: 100%;
    background: var(--youtube-red);
    cursor: pointer;
    -webkit-appearance: none;
    margin-left: -1px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: transparent;
}

input[type=range].volume {
    height: 5rem;
    background-color: #fff;
    display: none;
}

input[type=range].volume::-webkit-slider-runnable-track {
    background-color: transparent;
}

input[type=range].volume::-webkit-slider-thumb {
    margin-left: 0;
    height: 1em;
    width: 1em;
    background: #fff;
}

input[type=range]::-moz-range-track {
    width: 100%;
    height: 8.4rem;
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 2rem;
}

input[type=range]::-moz-range-thumb {
    height: 1em;
    width: 1em;
    border-radius: 100%;
    border: 1px solid red;
    background: red;
    cursor: pointer;
    margin-top: 5rem;
}

input[type=range]:focus::-moz-range-track {
    outline: none;
}

input[type=range].volume::-moz-range-thumb {
    border: 1px solid #fff;
    background: #fff;
}

.hidden {
    display: none;
}

button#play span.play,
button#play.pausiert span.pause,
button#volume-button span.laut,
button#volume-button.leise span.leise {
    display: none; 
}

button#play.pausiert span.play,
button#volume-button.leise span.laut {
    display: block;
}

svg {
    width: 1em;
    height: 1em;
    fill: #fff;
    stroke: #fff;
    cursor: pointer;
}

div.right-controls {
    display: flex;
    align-items: center;
}

div.logo {
    margin-left: 2em;
    display: none;
}

div.logo img {
    display: block;
    height: 1em;
    width: auto;
}

span#szene iframe {
    width: 100%;
    display: block;
}

div.oau_video_interaktiv span.warnhinweis {
    display: none;
}

/*ANCHOR Galerie */
body.hidden-scroll{overflow:hidden}.sl-overlay{position:fixed;left:0;right:0;top:0;bottom:0;background:#fff;opacity:.7;display:none;z-index:1035}.sl-wrapper{z-index:1040}.sl-wrapper *{box-sizing:border-box}.sl-wrapper button{border:0 none;background:0 0;font-size:28px;padding:0;cursor:pointer}.sl-wrapper button:hover{opacity:.7}.sl-wrapper .sl-close{display:none;position:fixed;right:2em;top:2em;z-index:10060;margin-top:-1em;margin-right:-1em;background:#fff;height:1em;width:1em;line-height:1em;color:#000}.sl-wrapper .sl-close:focus{outline:0}.sl-wrapper .sl-counter{display:none;position:fixed;top:2em;left:2em;z-index:1060;color:#000;font-size:1em}.sl-wrapper .sl-navigation{width:100%;display:none}.sl-wrapper .sl-navigation button{position:fixed;top:50%;margin-top:-1em;height:2em;width:2em;line-height:2em;text-align:center;display:block;z-index:10060;color:#000;font-size:4em}.sl-wrapper .sl-navigation button.sl-next{right:.5em}.sl-wrapper .sl-navigation button.sl-prev{left:.5em}.sl-wrapper .sl-navigation button:focus{outline:0}.sl-wrapper .sl-image{position:fixed;-ms-touch-action:none;touch-action:none;z-index:10000}.sl-wrapper .sl-image img{margin:0;padding:0;display:block;border:0 none;width:100%;height:auto}@media (min-width:35.5em){.sl-wrapper .sl-image img{border:0 none}}@media (min-width:50em){.sl-wrapper .sl-image img{border:0 none}}.sl-wrapper .sl-image iframe{background:#000;border:0 none}@media (min-width:35.5em){.sl-wrapper .sl-image iframe{border:0 none}}@media (min-width:50em){.sl-wrapper .sl-image iframe{border:0 none}}.sl-wrapper .sl-image .sl-caption{display:none;padding:10px;color:#fff;background:rgba(0,0,0,.8);font-size:1rem;position:absolute;bottom:0;left:0;right:0}.sl-wrapper .sl-image .sl-caption.pos-top{bottom:auto;top:0}.sl-wrapper .sl-image .sl-caption.pos-outside{bottom:auto}.sl-wrapper .sl-image .sl-download{display:none;position:absolute;bottom:5px;right:5px;color:#000;z-index:1060}.sl-spinner{display:none;border:5px solid #333;border-radius:40px;height:40px;left:50%;margin:-20px 0 0 -20px;opacity:0;position:fixed;top:50%;width:40px;z-index:1007;-webkit-animation:pulsate 1s ease-out infinite;-moz-animation:pulsate 1s ease-out infinite;-ms-animation:pulsate 1s ease-out infinite;-o-animation:pulsate 1s ease-out infinite;animation:pulsate 1s ease-out infinite}.sl-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}.sl-transition{transition:-moz-transform ease .2s;transition:-ms-transform ease .2s;transition:-o-transform ease .2s;transition:-webkit-transform ease .2s;transition:transform ease .2s}@-webkit-keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@-moz-keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@-o-keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@-ms-keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}


/*ANCHOR 360 */
div.valiantPhoto {
    position: relative;
    width: 100%;
    height: calc(100vw * 9 / 16);
    cursor: grab;
    touch-action: pan-x;
}

.Valiant360_default .loading {
    top: 0;
    display: block;
}

.Valiant360_default .loading .error-icon {
    display: none;
}

div._3d {
    display: none;
}

div._3d a {
    display: block;
    color: #fff;
    text-align: center;
    margin: 0.5em;
    padding: 0.5em;
}

.ismobile div._3d {
    display: block;
    position: absolute;
    top: 50%;
    left: 1em;
    transform: translateY(-50%);
    z-index: 15;
}

/*ANCHOR Auflösung */ 
div.aufloesung {
    margin-right: 1em;
    position: relative;
}

div.aufloesung span.aufl,
button span.menu_text {
    font-size: 0.5em;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
}

div.aufloesung span.material-icons,
span.material-icons.ohne {
    opacity: 0;
    visibility: hidden;
}

div.aufloesung_popup {
    background: #F29E39;
    position: absolute;
    bottom: calc(100% + 1em);
    border-radius: 0.5em;
    padding: 0.5em;
    display: flex;
    opacity: 0;
    right: 0;
    visibility: hidden;
    transition: all 0.6s;
}

div.aufloesung:hover div.aufloesung_popup {
    opacity: 1;
    visibility: visible;
}

div.aufloesung a {
    display: none;
    padding: 0.5em;
    background: #fff;
    color: #333;
    border: 1px solid #ccc;
    margin: 0.25em;
    white-space: nowrap;
}

/*ANCHOR Featherlight */
@media all{.featherlight{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483647;text-align:center;white-space:nowrap;cursor:pointer;background:#333;background:rgba(0,0,0,0)}.featherlight:last-of-type{background:rgba(0,0,0,.8)}.featherlight:before{content:'';display:inline-block;height:100%;vertical-align:middle}.featherlight .featherlight-content{position:relative;text-align:left;vertical-align:middle;display:inline-block;overflow:auto;padding:1.5em;margin-left:5%;margin-right:5%;max-height:95%;background:#fff;cursor:auto;white-space:normal}.featherlight .featherlight-inner{display:block}.featherlight .featherlight-close-icon{position:absolute;z-index:9999;top:0;right:0;line-height:1;cursor:pointer;text-align:center;color:#000;border:0;padding:1em}.featherlight .featherlight-close-icon::-moz-focus-inner{border:0}.featherlight .featherlight-image{width:100%}.featherlight-iframe .featherlight-content{border-bottom:0;padding:0;-webkit-overflow-scrolling:touch;overflow-y:scroll}.featherlight iframe{border:0}.featherlight *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}}@media only screen and (max-width:1024px){.featherlight .featherlight-content{margin-left:2.5%;margin-right:2.5%;max-height:98%;padding:1em;}}

div.featherl {
    display: none;
}

.featherlight div.featherl {
    display: block;
}

div.f_content a {
    display: inline-block;
    padding: 0.5em;
    font-size: 1.25em;
    border-radius: 0.25em;
    text-decoration: none;
    background: #F8BB3D;
    color: #fff;
    text-transform: uppercase;
}

.featherlight .featherlight-close-icon {
    font-weight: 700;
    font-family: 'Source Sans Pro', sans-serif;
}

div.f_content h2,
div.fl_l h2 {
    text-align: left;
    margin:0;
}



/*ANCHOR 1024 */
@media (max-width: 1024px) {

    html { 
        font-size: 0.1vw;
    } 

    body, html {
        padding: 0;
        margin: 0;
    }

    div.oau_video_interaktiv {
        height: auto;
    }

    div.oau_video_interaktiv video {
        width: 100%;
        height: auto;
        transform: none;
    }

    span#szene.popup div.vorschau {
        position: relative;
    }

    span#szene2 {
        top: 100%;
        bottom: auto;
        width: 100%;
    }

    span#szene2 div.info {
        position: static;
        width: 100%;
        transform: none;
    }

    div.mobil_flex {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        width: 100%;
    }

    div.mobil_flex.zweier {
        flex-wrap: wrap;
    }

    div.mobil_flex > * {
        margin: 0.5em;
    }

    div.mobil_flex.zweier > * {
        width: 40%;
    }

    span#szene div.mobil_flex img {
        max-width: 8em;
        margin-right: 0.5em;
    }

    span#szene.interaktion h3 {
        top: 0;
        padding: 0.25em;
        left: auto;
        right: 0;
        width: auto;
        transform: none;
        margin: 0;
    }

    h2 {
        margin: 0;
        margin-bottom: 0.5em;
        font-size: 125%;
    }

    div.aufloesung:hover div.aufloesung_popup {
        opacity: 0;
        visibility: hidden;
    }

    div.aufloesung.hover div.aufloesung_popup {
        opacity: 1;
        visibility: visible;
        z-index: 100;  
    }

    span#szene div.wrap.fuenfer a.normal {
        margin-bottom: 0.25%; 
    }

    span#szene div.wrap.fuenfer {
        margin-top: -4em; 
    }

}

/*ANCHOR 1024 Landscapre */
@media (max-width: 1024px) and (orientation: landscape) {
    div.oau_video_interaktiv video {
        height: 100%;
    }

    div.oau_video_interaktiv {
        height: 100vh;
    }

    header {
        font-size: 85%;
    }

    .video-controls button::before,
    .video-controls button:hover::before {
        display: none;
    }

    span#szene a.nur_mobil {
        display: flex;
        position: absolute;
        right: 7%;
        top: 1em;
        padding: 0;
        align-items: center;
        justify-content: center;
        width: 2em;
        height: 2em;
    }

    span#szene div.fl_l {
        display: none;
    }

    .featherlight span#szene div.fl_l {
        display: block;
    }

    .apple .video-controls button.fullscreen-button {
        display: none;
    }

    span#szene a.normal {
        font-size: 0.8em;
        max-width: 32%;
    }

    .featherlight .featherlight-content {
        width: 80%;
    }

    div.f_content a,
    div.fl_l > div {
        width: 100%;
        min-width: inherit;
    }
}

/*ANCHOR 767 */
@media (max-width: 450px) {  

    html { 
        font-size: 0.22vw;
        height: auto;
        overflow: hidden;
        width: 100%;
    } 

    div.oau_video_interaktiv {
        height: auto;
    }

    .video-controls {
        font-size: 100%;
    }

    div.logo {
        position: absolute;
        right: 0;
        top: -1em;
    }

    span#szene.interaktion {
        bottom: 5.5em;
        font-size: 100%;
        padding: .5em;
        text-align: center;
        align-content: stretch;
        align-items: stretch;
    }

    span#szene.popup,
    span#szene.abfrage,
    span#szene.werbung,
    span#szene.hotspot {
        background: none;
    }

    div.oau_video_interaktiv.fs {
        transform-origin: top left;
        transform: rotate(90deg)!important;
    }

    .video-controls {
        width: 100%;
        left: 0; 
        top: 100%;
    }

    .video-progress {
        display: none;
    }

    /*
    .warnhinweis div.oau_video_interaktiv span.warnhinweis {
        display: block;
        position: absolute;
        width: 50%;
        top: 50%;
        transform: translateY(-50%);
        left: 25%;
        margin: 0 auto;
        padding: 1em;
        font-size: 80%;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 0.5em;
        color: #fff;
        text-align: center;
    }

    div.oau_video_interaktiv span.warnhinweis span.material-icons {
        animation: rotateInDownLeft .8s ease-in-out 3; 
        display: block;
        font-size: 3em;
        margin-bottom: 0.5em; 
        opacity: 0.6;
    }
    */

    div#iv_knoepfe > a {
        background: none; 
        padding: 0;
    }

    div#iv_knoepfe > a span:not(.material-icons) {
        display: none;
    }

    div#iv_knoepfe span.material-icons, a.iv_kn span.material-icons {
        font-size: 1.5em;
        margin: 0;
    }

    div#iv_knoepfe > a, a.iv_kn,
    span.abfrager.offen {
        display: none;
    }

    .video-controls button {
        font-size: 1.5em;
    }

    .video-controls button::before,
    .video-controls button:hover::before {
        display: none;
    }

    .apple .video-controls button.fullscreen-button {
        display: none;
    }

    div.logo {
        position: static;
    }

    div#iv_knoepfe,
    span.abfrager {
        top: 0.5em;
    }

    span.abfrager {
        width: 3em;
        height: 3em;
        right: 5%;
    }

    span.abfrager > a > span {
        padding: 0;
        font-size: 1.5em;
    }

    span#szene div.b_mehr {
        width: 100%;
        align-items: flex-start;
    }

    span#szene div.b_mehr.wrap {
        flex-wrap: wrap;
    }

    span#szene div.b_mehr.wrap.fuenfer {
        padding-top: 0;
    }

    span#szene div.b_mehr.wrap h2 {
        width: 90%;
        text-align: center;
    }

    span#szene div.b_mehr.wrap.fuenfer h2 {
        width: 100%;
        font-size: 1em;
    }

    span#szene a.normal {
        height: 3em;
        font-size: 0.7em;
        width: 16em;
        max-width: 16em;
    }

    span#szene.abfrage {
        right: 0; 
        top: 0;
    }

    div.b_mehr {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        padding-top: 1em;
        padding-bottom: 1em;
    }

    div.b_mehr div.flexer,
    div.flexer {
        flex-direction: column;
        height: 100%;
    }

    div.b_mehr.wrap div.flexer {
        flex-direction: row;
        height: auto;
    }

    span#szene div.wrap a.normal {
        width: 48%;
        margin: 1%;
    }

    span#szene div.b_mehr h2 {
        font-size: 1em;
        width: 40%;
        text-align: left;
    }

    div.oau_video_interaktiv {
        margin-bottom: 3em;
        overflow: visible;
    }

    div.flexer > div {
        margin: 0;
    }

    div.f_content a {
        font-size: 115%;
    }

    .v360 div.oau_video_interaktiv {
        min-height: calc(100vw * 9 / 16 + 3em);
    }

    div.fl_l img, div.f_content img {
        max-width: 100%;
        margin: 0 auto;
        margin-bottom: 2em;
    }

    span#szene a.nur_mobil {
        display: flex;
        position: absolute;
        font-size: 1.4em;
        right: 5%;
    }

    span#szene div.fl_l {
        display: none;
    }

    .featherlight span#szene div.fl_l {
        display: block;
    }

    span.abfrager > a > span {
        font-size: 1.5em;
    }

    .featherlight .featherlight-content {
        width: 90%;
    }

    .featherlight div.fl_l {
        flex-direction: column;
        padding-top: 2em;
    }

    div.fl_l > div {
        width: 100%;
        margin: 0;
        min-width: inherit;
    }

    div.f_content a {
        height: 3em;
        width: 100%;
    }

    .featherlight:last-of-type {
        background: rgba(0,0,0,.8);
    }

    div.aufloesung {
        display: none;
    }

    .video-controls button {
        box-shadow: none;
    }

    span#szene div.wrap.fuenfer {
        margin-top: 0;
    }

}