/* TODO:
   - content-size-1
   - content-size-2
   - content-size-3
   - content-size-4

   - contrast-1
   - contrast-2
   - contrast-3
   - contrast-4

*/

/* Auszug Bootstrap-grid.css:

@media (min-width: 576px) {
  .container-sm, .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container-md, .container-sm, .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1320px;
  }
}
*/

:root {
    /*  --hf-bg-1: #fcefd2;*/
    /*  --hf-color-1: #493d2d; */
    /*  --hf-action-color-1: #dc1c1c; */
    /*  --hf-active-color-1: #dc1c1c; */
    /*  --hf-color-1-hover: #9d1919; */ /* TODO: action-hover etc */

    --hf-bg-alt-1: #ffc683;
    --hf-bg-contrast-alt-1: #dc1c1c;
    --hf-bg-contrast-alt-1-2: white;
    /*--accent-1: #dc1c27;*/
    /*--accent-2: #493d2d;*/
    --accent-font: white;
    --border-radius-flexible: 20px;
    --border-radius-big-flexible: 30px;
    --teaser-header-height: 5.5rem;
    --teaser-body-height-1: 16.1rem;
    --teaser-body-height-2: 34rem;
    --teaser-img-top-height: 18rem;
    --teaser-footer-height: 5rem;
    /* Color V2 */
    --hf-bg-1: #FFF5E1; /* Guide OK */ /* #fcefd2; */
    --hf-color-1: #CE3979;
    --hf-action-color-1: #CE3979;
    --hf-active-color-1: #CE3979;
    --hf-color-1-hover: #E3689D; /* TODO: action-hover etc */
    --hf-bg-contrast-alt-1: #6E508A; /* TODO: action-hover etc */
    --hf-fg-contrast-alt-1: white;
    --hf-bg-contrast-alt-2: #EDE7F1; /* helles Violett */
    --accent-1: #CE3979; /* Guide OK */ /*#CD3978;*/
    --accent-2: #6E508A; /* Guide OK */ /* 6E51C1 */
}
/*:root body.hf-contrast-1 */
/*
{
  --hf-bg-1: #fcefd2;
  --hf-color-1: #493d2d;
  --hf-action-color-1: #dc1c1c;
  --hf-active-color-1: #dc1c1c;
  --hf-color-1-hover: #9d1919; /* TODO: action-hover etc x*x/x
  --hf-bg-alt-1: #ffc683;
  --hf-bg-contrast-alt-1: #dc1c1c;
  --hf-fg-contrast-alt-1: white;
  --accent-1: #dc1c27;
  --accent-2: #493d2d;
  --accent-font: white;

  --border-radius-flexible: 20px;
  --border-radius-big-flexible: 30px;

  --teaser-header-height: 5.5rem;
  --teaser-body-height-1: 16.1rem;
  --teaser-body-height-2: 34rem;
  --teaser-img-top-height: 18rem;
  --teaser-footer-height: 5rem;
}
*/

:root body.color-v2 {
    --hf-bg-1: #fcefd2;
    --hf-color-1: #CD3978;
    --hf-action-color-1: #CD3978;
    --hf-active-color-1: #CD3978;
    --hf-color-1-hover: #E3689D; /* TODO: action-hover etc */
    --accent-1: #CD3978;
    --accent-2: #6E51C1;
}

:root body.hf-contrast-2 {
    --hf-bg-1: #f9f2e3; /*#fcefd2;*/
    --hf-color-1: green; /*#493d2d;*/
    --hf-action-color-1: #dc1c1c;
    --hf-active-color-1: #dc1c1c;
    --hf-color-1-hover: ##9d1919;
    --hf-bg-alt-1: #feb865; /*#ffc683;*/
    --hf-bg-contrast-alt-1: #dc1c1c;
    --hf-fg-contrast-alt-1: white;
    --accent-1: #dc1c27;
    --accent-2: #493d2d;
    --accent-font: white;
}

:root body.hf-contrast-3 {
    --hf-bg-1: #fffaef; /*#fcefd2;*/
    --hf-color-1: green; /*#493d2d;*/
    --hf-action-color-1: #dc1c1c;
    --hf-active-color-1: #dc1c1c;
    --hf-color-1-hover: #9d1919;
    --hf-bg-alt-1: #ffa73e; /*#ffc683;*/
    --hf-bg-contrast-alt-1: #dc1c1c;
    --hf-fg-contrast-alt-1: white;
    --accent-1: #dc1c27;
    --accent-2: #493d2d;
    --accent-font: white;
}

:root body.hf-contrast-4 {
    --hf-bg-1: white; /*#fcefd2;*/
    --hf-color-1: black; /*#493d2d;*/
    --hf-action-color-1: red;
    --hf-active-color-1: red;
    --hf-color-1-hover: #9d1919;
    --hf-bg-alt-1: #fe8a00;
    --hf-bg-contrast-alt-1: white;
    --hf-fg-contrast-alt-1: black;
    --accent-1: lightgray;
    --accent-2: lightgray;
    --accent-font: white;
}

body.layout-large .col-lg-4 {
    width: 33.3333333%;
}

body.layout-larger .col-lg-4 {
    width: 33.3333333%;
}

body.layout-large .col-lg-5 {
    width: 25%;
}

body.layout-larger.col-lg-5 {
    width: 25%;
}

/*
:root {
  --main-background: #fcefd2;
  --main-color: #493d2d;
  --main-background-alt: #ffc683;

  --accent-1: #dc1c27;
  --accent-2: #493d2d;
  --accent-font: white;
}
*/

:root,
:root body.hf-font-size-1 {
    /* Size setting "1" */
    --font-size-smallest-1: 1rem;
    --font-size-smaller-1: 1.2rem;
    --font-size-small-1: 1.4rem;
    --font-size-basis-1: 1.8rem;
    --font-size-big-1: 2.3rem;
    --font-size-bigger-1: 2.6rem;
    --font-size-biggest-1: 4.0rem;
    --font-size-display-1: 5rem;
}

:root body.hf-font-size-2 {
    /* Size setting "2" */
    --font-size-smallest-1: 1rem;
    --font-size-smaller-1: 1rem;
    --font-size-small-1: 1rem;
    --font-size-display-1: 5.5rem;
    --font-size-basis-1: 2.6rem;
    --font-size-big-1: 3.2rem;
    --font-size-bigger-1: 3.6rem;
    --font-size-biggest-1: 3.0rem;
}

:root body.hf-font-size-3 {
    /* Size setting "3" */
    --font-size-smallest-1: 1rem;
    --font-size-smaller-1: 1rem;
    --font-size-small-1: 1rem;
    --font-size-display-1: 6rem;
    --font-size-basis-1: 4.6rem;
    --font-size-big-1: 4.2rem;
    --font-size-bigger-1: 4.6rem;
    --font-size-biggest-1: 4.0rem;
}

:root body.hf-font-size-4 {
    /* Size setting "4" */
    --font-size-smallest-1: 1rem;
    --font-size-smaller-1: 1rem;
    --font-size-small-1: 1rem;
    --font-size-display-1: 7rem;
    --font-size-basis-1: 5.6rem;
    --font-size-big-1: 6.2rem;
    --font-size-bigger-1: 6.6rem;
    --font-size-biggest-1: 7.0rem;
}

:root body {
    --transition-duration: 1s;
    --hf-common-line-height: 1.3;
}
/* Mini-boilerplate */
/*
html {
    font-size: 62.5%;
}

body {
    font-size: var(--font-size-basis-1);
    line-height: var(--hf-common-line-height);
}
    */
/* Font sizes */
.hf-display {
    font-size: var(--font-size-display);
    font-weight: bold;
}

.hf-base {
    font-size: var(--font-size-base-1);
}

.hf-big {
    font-size: var(--font-size-big-1);
}

.hf-bigger {
    font-size: var(--font-size-bigger-1);
}

.hf-small {
    font-size: var(--font-size-small-1);
}

/* Fonts */

@font-face-OFF {
    font-family: "Lexia W01 Bold";
    src: url("../Fonts/Lexia W01 Bold/Lexia W01 Bold.eot"); /* IE9*/
    src: url("../Fonts/Lexia W01 Bold/Lexia W01 Bold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../Fonts/Lexia W01 Bold/Lexia W01 Bold.woff2") format("woff2"), /* chrome、firefox */
    url("../Fonts/Lexia W01 Bold/Lexia W01 Bold.woff") format("woff"), /* chrome、firefox */
    url("../Fonts/Lexia W01 Bold/Lexia W01 Bold.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url("../Fonts/Lexia W01 Bold/Lexia W01 Bold.svg#Lexia W01 Bold") format("svg"); /* iOS 4.1- */
}

@font-face-OFF {
    font-family: "Aptifer Sans LT W01";
    src: url("../Fonts/Aptifer Sans LT W01/Aptifer Sans LT W01.eot"); /* IE9*/
    src: url("../Fonts/Aptifer Sans LT W01/Aptifer Sans LT W01.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../Fonts/Aptifer Sans LT W01/Aptifer Sans LT W01.woff2") format("woff2"), /* chrome、firefox */
    url("../Fonts/Aptifer Sans LT W01/Aptifer Sans LT W01.woff") format("woff"), /* chrome、firefox */
    url("../Fonts/Aptifer Sans LT W01/Aptifer Sans LT W01.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url("../Fonts/Aptifer Sans LT W01/Aptifer Sans LT W01.svg#Aptifer Sans LT W01") format("svg"); /* iOS 4.1- */
}

@font-face-OFF {
    font-family: "Aptifer Sans LT W04 Semibold";
    src: url("../Fonts/Aptifer Sans LT W04 Semibold/Aptifer Sans LT W04 Semibold.eot"); /* IE9*/
    src: url("../Fonts/Aptifer Sans LT W04 Semibold/Aptifer Sans LT W04 Semibold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../Fonts/Aptifer Sans LT W04 Semibold/Aptifer Sans LT W04 Semibold.woff2") format("woff2"), /* chrome、firefox */
    url("../Fonts/Aptifer Sans LT W04 Semibold/Aptifer Sans LT W04 Semibold.woff") format("woff"), /* chrome、firefox */
    url("../Fonts/Aptifer Sans LT W04 Semibold/Aptifer Sans LT W04 Semibold.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url("../Fonts/Aptifer Sans LT W04 Semibold/Aptifer Sans LT W04 Semibold.svg#Aptifer Sans LT W04 Semibold") format("svg"); /* iOS 4.1- */
}

#main-content h1,
#home-welcome-text h1 {
    font-family: Verdana, sans-serif;
    /*font-family: "Lexia W01 Bold";*/
    font-style: normal;
}

body {
    /*font-family: "Aptifer Sans LT W01";*/
    font-family: Garamond, serif;
    font-style: normal;
}

h2 {
    /*font-family: "Aptifer Sans LT W04 Semibold";*/
    font-family: Verdana, sans-serif;
    font-style: normal;
}

/* Colors */
body {
    background-color: var(--hf-bg-1);
    /*  padding-top: 80px;*/
}

body.navbar-sticky {
    padding-top: 100px;
}

.hf-bg-1 {
    background-color: var(--hf-bg-1);
}

/* DEPRECATED -> ist in scss _main
#wrapper {
    margin-top: 50px;
    overflow-x: hidden;
}
*/

summary {
    display: inline;
}

main header summary {
    width: 100%;
}
/* No longer used -> rccWorld 
*:focus {
    background-color: initial !important; x/x*xyellow;x*x/x
    box-shadow: unset !important;
    border: unset;
}
    */


/* No longer used -> rccWorld 
form input[type="text"],
form input[type="password"] {
    font-size: var(--font-size-basis-1);
    background-color: white;
    border: 0;
}

form input[type="text"]:focus,
form input[type="text"]:active,
form input[type="password"]:focus,
form input[type="password"]:active {
    background-color: white !important;
    border: 0 !important;
}

    */

:not(.vertical-free) main.hf-main-content > .container:first-child {
    padding-top: 80px;
}

@media (min-width: 576px) {
    :not(.vertical-free) main.hf-main-content > .container:first-child {
        padding-top: 360px;
    }
}

@media (min-width: 768px) {
    :not(.vertical-free) main.hf-main-content > .container:first-child {
        padding-top: 240px;
    }
}

@media (min-width: 991px) {
    :not(.vertical-free) main.hf-main-content > .container:first-child {
        padding-top: 180px;
    }
}

/* -> This is in rccWorld 

.hf-navbar-1.navbar-sticky {
    position: fixed;
    z-index: 1000;
    top: 0;
}

.hf-navbar-1 .navbar-brand {
    color: var(--hf-color-1);
}

.hf-navbar-1 .navbar-brand:hover,
.hf-navbar-1 .navbar-brand:focus {
    color: var(--hf-color-1-hover);
    transition: none;
}

.hf-navbar-1 .navbar-nav {
    padding-bottom: 3px;
}

.hf-navbar-1 .navbar-nav .nav-link {
    color: var(--hf-action-color-1);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

.hf-navbar-1 .navbar-nav .nav-link:hover,
.hf-navbar-1 .navbar-nav .nav-link:focus {
    color: var(--hf-color-1-hover);
    border-bottom: 3px solid var(--hf-color-1-hover);
}

.hf-navbar-1 .show > .nav-link,
.hf-navbar-1 .nav-link.active {
    color: var(--hf-active-color-1);
    border-bottom: 2px solid var(--hf-active-color-1);
}

.hf-navbar-1 .level-1 .navbar-toggler {
    color: var(--hf-action-color-1);
    opacity: 0;
}

.hf-navbar-1 .navbar-toggler-icon {
    x/x* background-image: escape-svg($navbar-dark-toggler-icon-bg); x*x/
}

.hf-navbar-1 .navbar-toggler.navbar-toggler-level-1 {
    font-size: var(--font-size-big-1) !important;
    color: var(--hf-action-color-1);
    border-bottom: 3px solid transparent;
}

.hf-navbar-1 .navbar-toggler.navbar-toggler-level-1:hover {
    color: var(--hf-color-1-hover);
    border-bottom: 3px solid var(--hf-color-1-hover);
}

.nav-item.active a {
    border-bottom: 2px solid var(--hf-active-color-1);
}

.nav-item.level-1 {
    border-radius: 20px;
    position: relative;
    overflow: visible;
    max-width: unset !important;
    width: unset !important;
    flex: 1 0 0;
    x/x*x    border: 1px solid blue; x*x/x
}

@media(min-width: 576px) {
    .nav-item.level-1 {
        min-width: 40%;
    }

    .nav-item.level-1 a {
        width: 90%;
    }
}

@media(min-width: 768px) {
    .nav-item.level-1 {
        min-width: 30%;
    }

    .nav-item.level-1 a {
        width: 95%;
    }
}

@media(min-width: 991px) {
    .nav-item.level-1 {
        min-width: unset;
    }

    .nav-item.level-1 a {
        width: unset;
    }
}

.nav-item.level-1 > nav:hover > a + button {
    opacity: 1;
}

.nav-item.level-1.active nav a {
    border-bottom: 4px solid var(--hf-active-color-1);
}
x/x*x
.nav-item.level-1:hover {
  color: white !important;
}
x*x/x
.nav-item.level-1.open {
    background-color: var(--hf-bg-alt-1);
}

.nav-item.level-1.open > nav {
    border-bottom: 1px solid var(--hf-bg-1);
}

.nav-item.level-1 nav {
    position: relative;
}

.nav-item.level-1 .navbar-toggler {
    position: absolute;
    right: -6px;
    top: 5px;
}

.nav-item.level-1 .navbar-toggler > div {
    display: inline-block;
}

.nav-item.level-1 .navbar-toggler:hover > div {
    color: var(--hf-color-1-hover);
    border-bottom: 2px solid var(--hf-color-1-hover);
}


.nav-item.level-1 .navbar-toggler[aria-expanded="true"] > div > i {
    transform: rotate(180deg);
}

.hf-navbar-1 .nav-item.level-2 {
    /*  padding: 0;
  font-size: var(--fontsize-base);
  text-align: right; x*x/x
    /*  border: 1px solid green; x*x/x
}

.hf-navbar-1 .nav-item.level-2 a {
    /*  font-size: inherit; x*x/x
}

    */


ul.collapse.level-2.show {
    /*  border-left: 1px solid var(--hf-action-color-1); */
}

ul.collapse.level-2:not(.show) {
    display: none !important;
}

.navbar {
    color: var(--navbar-dark-color);
}

.navbar a,
.navbar a:hover,
.navbar a:focus {
    color: var(--hf-action-color-1);
}

/* DEPRECATED, ist in scss _typesetting
a {
    text-decoration: none;
    color: var(--hf-action-color-1);
    cursor: pointer;
}

a:hover {
    color: var(--hf-color-1-hover);
}
    */

.logo-container {
    height: 55px;
}

a.logo {
    position: relative;
}

a.logo:after {
    content: ' ';
    display: none;
    border: 5px solid var(--hf-action-color-1);
    width: 7px;
    height: 7px;
    border-radius: 5px;
    position: absolute;
    left: 41%;
    bottom: -1.7em;
}

a.logo.active:after {
    display: block;
}

a.logo:not(.active):hover {
    filter: brightness(80%);
}

a.logo:not(.active):hover:after {
    display: inline-block;
    border: 5px solid var(--hf-color-1-hover);
}

.webgl-content {
    position: relative !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: unset !important;
    top: unset !important;
    left: unset !important;
}

.webgl-content #unityContainer {
    width: 100% !important;
    height: 43vw !important;
}

.main-placeholder-image {
    width: 70%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* DEPRECATED ist in rccWorld scss 
@media (min-width: 576px) {
    header nav li {
        max-width: 170px;
        text-align: center;
        overflow: hidden;
    }
}

@media (min-width: 576px) and (max-width: 991px) {

    header nav ul {
        flex-wrap: wrap;
    }

    header nav li {
        max-width: unset;
        min-width: unset;
        width: 30%;
        text-align: center;
        overflow: hidden;
    }
}
    */
.hf-navbar-1 .navbar-nav img {
    width: 3rem;
    height: auto;
}

.hf-navbar-1 nav ul li {
    margin-top: 0.5em !important;
}

/* Sizes */

/*
#c178.frame.frame-default.frame-layout-0 h1 {
  color: var(--accent-1);
  font-size: var(--font-size-display-1);
  font-weight: bold;
  text-align: center;
  margin-bottom: 50px;
  margin-top: 50px;
}
*/



.widget {
    font-size: var(--font-size-basis-1);
}

.hf-main-container h1,
.hf-journal-section h1 {
    color: var(--accent-1);
    /* color: var(--accent-2); */
    font-size: var(--font-size-display-1);
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

.hf-main-container h2,
.hf-journal-section h2 {
    /* color: var(--accent-1); */
    color: var(--accent-2);
    font-size: var(--font-size-biggest-1);
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

.hf-main-container h5,
.hf-journal-section h5 {
    color: var(--hf-color-1);
    font-size: var(--font-size-base-1);
    font-weight: bold;
}

.hf-main-container h3,
.hf-journal-section h3 {
    /* color: var(--accent-1); */
    color: var(--accent-2);
    font-size: var(--font-size-bigger-1);
    font-weight: bold;
    text-align: center;
    margin-top: 3rem;
    margin-bottom: 2rem;
}


/* Bootstrap */
fieldset,
fieldset div {
    font-size: var(--font-size-basis-1);
}

fieldset legend {
    font-size: var(--font-size-big-1);
}

/* TODO: consider RTL */
.start-unset {
    left: unset !important;
}

.bottom-unset {
    bottom: unset !important;
}
/* --> rccWorld 
.offcanvas {
    transition-duration: var(--transition-duration);
    background-color: var(--hf-bg-alt-1);
}

.offcanvas-absolute-positioner {
    position: absolute;
    width: 400px;
    height: 400px;
    overflow: hidden;
}

.offcanvas-absolute-positioner .offcanvas {
    max-width: unset;
}
    */

.widget-close-box {
    position: absolute;
    right: 15px;
    top: 6px;
    font-size: var(--font-size-bigger-1);
    cursor: pointer;
}

.widget-close-box > i:hover {
    filter: brightness(2);
}



.widget-fixed-top {
    transition: transform ease var(--transition-duration);
    z-index: 1030;
    right: 0;
    transform: translateY(-110%); /* 120 because of readspeaker buttons and wrapper margin top */
    top: 0; /* Like this, the box is fix at the top indepenedent of parent paddings and elements. */
}

.widget-fixed-top.active {
    transform: translatey(0);
}

@media (max-width: 576px) {
    .widget.widget-fixed-top {
        width: 100%;
    }
}

.widget.widget-fixed-top {
    padding: 20px;
    background-color: var(--hf-bg-alt-1);
    color: var(--main-color);
    border: 2px solid var(--hf-bg-1);
}


.barrier-settings .slider-handle {
    left: 50%;
    background-color: var(--accent-1);
    background-image: var(--accent-1);
}

.barrier-settings .slider.slider-horizontal .slider-track {
    background-color: var(--main-color);
    background-image: var(--main-color);
    height: 5px;
    margin-top: -2px;
}
/*
.barrier-settings .slider-selection {
	left: 50%;
	background-color: var(--main-color);
	background-image: var(--main-color);
}

.barrier-settings #slider-volume .slider-selection {
	background-color: var(--accent-1);
	background-image: var(--accent-1);
}
*/

/* --> rccWorld OK
.rcc-main-footer {
    background-color: var(--rcc-color-bg-alt-1);
    color: var(--rcc-color-fg-alt-1);
}

.rcc-main-footer .rcc-second-navigation {
    color: var(--rcc-color-bg-alt-1);
}

.rcc-main-footer .frame-type-menu_subpages ul,
.rcc-main-footer .frame-type-menu_subpages li {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

.rcc-main-footer .frame-type-menu_subpages a {
    color: white;
}


.rcc-main-footer .hf-second-navigation {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: var(--hf-bg-1);
    border-top: 1px solid var(--hf-bg-alt-1);
    transform: translateY(110%);
    transition: transform ease var(--transition-duration);
    z-index: 1080;
}

body.vertical-free .rcc-main-footer .hf-second-navigation {
    transform: translateY(0);
}*/

.hf-journal-download {
    min-height: 50px !important;
}

.hf-journal-download .row div,
.hf-journal-download .row p {
    display: inline-block;
}


.hf-journal-download .contact-hint,
.hf-journal-download .download-hint {
    position: relative;
}

.hf-journal-download .contact-hint a,
.hf-journal-download .download-hint a {
    color: var(--hf-action-color-1);
    cursor: pointer;
}

.hf-journal-download .contact-hint a:hover,
.hf-journal-download .download-hint a:hover {
    color: var(--hf-color-1-hover);
}

.hf-journal-download .download-hint a:after {
    position: absolute;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: "\f1c1";
    /*right: -30px; */
    margin-left: 7px;
    /*top: -10px; */
    margin-top: -7px;
    font-size: 25px;
}

.hf-journal-download .contact-hint a:after {
    position: absolute;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: "\f518";
    /*right: -40px;*/
    margin-left: 5px;
    /*top: -10px;*/
    margin-top: -7px;
    font-size: 25px;
}

.hf-journal-section.hf-journal-header {
    text-align: center;
    background-color: unset;
}

.hf-content-title h1 > .header-part-1 {
    font-size: 75%;
}

.hf-journal-section h2 > .header-part-1 {
    font-size: 75%;
}

.journal-publishing-info {
    min-height: 50px !important;
}

h5 > .header-part-2 {
    font-size: var(--font-size-smaller-1);
}


.hf-journal-section {
    position: relative;
    padding-top: 80px;
    padding-bottom: 40px;
    padding-left: 5px;
    padding-right: 5px;
    margin-top: 20px;
    margin-bottom: 20px;
    /*background-color: var(--hf-bg-alt-1); */
    background-color: var(--hf-bg-contrast-alt-1-2);
}

.hf-journal-section:before {
    position: absolute;
    right: 0;
    top: -20px;
    content: "[Layout und Farbdesign nicht entschieden]";
    font-size: 14px;
    color: var(--hf-color-1);
}

.hf-journal-section.hf-journal-download {
    text-align: center;
    background-color: unset;
}

header.hf-journal-section > h1 {
    color: var(--accent-1);
    font-size: var(--font-size-biggest-1);
}

header.hf-journal-section > img {
    margin-top: 2em;
    margin-bottom: 2em;
}

.hf-journal-section header {
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.hf-journal-section > .hf-journal-introduction {
    text-align: center;
    font-size: var(--font-size-big-1);
}

a[data-content-level="2"],
a[data-content-level="3"] + h2,
header.journal-subpart > h1 {
    color: var(--accent-2);
}

.hf-journal-summary {
    text-align: center;
}

.summary {
    display: initial;
    cursor: initial;
    width: 100%;
}

.journal-title-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}
/*
.frame.frame-default.frame-type-list.frame-layout-0 > h2 {
  display: none;
  visibility: hidden:
}
*/
.slider-2-labels span {
    font-size: var(--font-size-3);
}

.scale-smaller {
    display: inline-block;
    transform: scale(0.8, 0.8);
}

.scale-bigger {
    display: inline-block;
    transform: scale(1.5, 1.5);
}

.input-group-text-transparent {
    background-color: transparent;
    border: none;
}
/*
.barrier-settings .input-group {
  margin-bottom: 2em;
}

.slider.slider-horizontal.col-10 {
  width: 83.333% !important;
}
*/
#c170 img {
    width: 100% !important;
    height: auto !important;
}

.position-welcome {
    float: none;
    position: relative;
    display: inline-block;
    margin-left: 66%;
    margin-top: 40px;
    margin-bottom: 10px;
    /*
  position: absolute;
  margin-right: 25%;
  */
}

.toggleLoginMenu {
    text-align: center;
    white-space: normal;
}

.toggleLoginMenu.loggedin {
    transform: scale(0.8);
    margin-top: -1rem;
}

.toggleLoginMenu .name-loggedin {
    display: inline-block;
    font-size: var(--font-size-small-1);
    max-width: 200px;
    white-space: nowrap;
}

.hf-button {
    background-color: var(--accent-1);
    border-radius: var(--border-radius-flexible);
    font-size: var(--font-size-base-1);
    color: var(--accent-font);
    border: none;
    shadow: initial;
    padding: 5px 20px;
    cursor: pointer;
    text-decoration: none;
    overflow: hidden;
    /*
  line-height: 1.1em;
  height: calc(1.1em + 0.4em);
  */
}

.hf-button:focus {
    background-color: var(--accent-1) !important;
}

.hf-button-big-2 {
    border-radius: var(--border-radius-big-flexible);
    font-size: var(--font-size-bigger-1);
    padding: 5px 20px;
}

button.hf-button.hf-button-small {
    font-size: var(--font-size-smallest-1);
    padding: 0.8rem 1rem;
}

.hf-button:hover {
    background-color: var(--hf-color-1-hover);
    color: var(--accent-font);
}

.hf-journal .teaser-section h1 {
    display: none;
    visibility: hidden;
}

.hf-offcanvas.offcanvas-end {
    position: absolute;
    top: initial;
    bottom: initial;
    background: var(--hf-bg-alt-1);
}
/*
.breadcrumb-row {
		margin-top: 40px;
		margin-bottom: 30px;
    white-space: nowrap;
}

.breadcrumb-row > div > div {
		display: inline-block;
		margin-left: 40px;
}
*/
/* DEPRECATED, is in rccWorld scss 
.menu_breadcrumb ul {
    list-style: none;
}

.menu_breadcrumb li {
    list-style: none;
    display: inline-block;
    margin: 0 0.3rem 0 0.3rem;
}

header .breadcrumb-label {
    margin-left: 30px;
    display: inline-block;
}

header .menu_breadcrumb {
    display: inline-block;
}

header .menu_breadcrumb ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

header .menu_breadcrumb ul li {
    list-style: none;
    display: inline-block;
    margin-right: 10px;
}

header .menu_breadcrumb ul li a {
    color: var(--accent-2);
    display: inline-block;
}
    */
.sidetab {
    background-color: var(--hf-bg-alt-1);
    right: 0;
    margin-top: -40px;
    border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;
}

header.hf-journal-header img {
    width: 75%;
    height: auto;
}

:target::before {
    content: "";
    display: block;
    height: 200px; /* fixed header height*/
    margin: -200px 0 0; /* negative fixed header height */
}

.hf-journal-summary ol {
    width: 105px;
    display: inline-block;
}

.hf-journal-section {
    min-height: 120vh;
}

#c180 .hf-journal-spiel,
#c182 .hf-journal-spiel {
    height: 970px;
}

/***********************************************
HomeTeaserProvisional
************************************************/

.hf-card,
.herzfroh-teaser {
    padding: 15px;
}


.hf-card,
.color-alt .herzfroh-teaser-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: wrap;
    background-color: var(--main-background);
    border-radius: 20px;
    padding: 5px;
}


.hf-card.hf-card-aligned-height .card-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: var(--teaser-body-height-1);
}

.hf-card.hf-card-aligned-height .card-footer {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: var(--teaser-footer-height);
}

.hf-card.hf-card-aligned-height .card-body .card-text {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    flex: auto;
    overflow: hidden;
}

.hf-card .card-img-top {
    overflow: hidden;
    border-radius: 20px;
    height: var(--teaser-img-top-height);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hf-card.card-without-image .card-img-top {
    display: none;
    visibility: hidden;
}


.hf-card.hf-card-aligned-height.card-without-image .card-body {
    height: var(--teaser-body-height-2);
}

.hf-card.hf-card-aligned-height.card-without-image .card-body .card-text {
    height: 100%;
    display: inline-flex;
    justify-content: space-around;
    flex-direction: column;
    text-align: center;
}

.hf-card .card-header {
    background-color: initial;
    /* Titles must be equal hight, even if they have 2 or 3 lines. */
    height: var(--teaser-header-height);
    display: inline-flex;
    flex-direction: column;
    justify-content: space-around;
}

.hf-card .card-footer {
    background-color: initial;
}

/*
#wrapper > div > .container:nth-child(odd) .color-alt .herzfroh-teaser-container {
	background-color: var(--main-background);
}

#wrapper > div > .container:nth-child(even) .color-alt .herzfroh-teaser-container {
	background-color: var(--main-background-alt);
}

#wrapper > div > .container:nth-child(odd) .question-answer-container {
	background-color: var(--main-background);
}

#wrapper > div > .container:nth-child(even) .question-answer-container {
	background-color: var(--main-background-alt);
}
*/

.hf-card,
.color-alt .herzfroh-teaser-container {
    background-color: var(--hf-bg-alt-1)
}

/*
.hf-card .card-img-top,
.herzfroh-teaser-container .teaser-image {
	flex: 0 0 220px;
	text-align: center;
}
*/
.hf-card .card-img-top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hf-card .card-img-container {
    width: 100%;
    height: 172px;
    border-radius: 20px;
    overflow: hidden;
}

/*
.hf-card .card-img-top img {
  width: 100%;
  height: auto;
  border-radius: 20px;
}
*/

.hf-card .hf-button {
    flex: 0 0 auto;
}

/*

@media (max-width: 991px) and (min-width: 768px)  {
	.herzfroh-teaser-container .teaser-image {
		flex: 0 0 120px;
	}
}
.herzfroh-teaser-container .teaser-image > .teaser-image-wrap  {
	display: inline-block;
	width: 200px;
	height: 200px;
	overflow: hidden;
	border-radius: 50%;
	border: 4px solid var(--accent-1);
}

.herzfroh-teaser-container .teaser-image > .teaser-image-wrap > img {
	width: 130%;
	margin-left: -15%;
	margin-top: -10%;
	height: auto;
}

.herzfroh-teaser:nth-child(1) .herzfroh-teaser-container .teaser-image > .teaser-image-wrap > img,
.herzfroh-teaser:nth-child(2) .herzfroh-teaser-container .teaser-image > .teaser-image-wrap > img {
		width: 140%;
		margin-top: -8px;
		margin-left: -55px;
}

.herzfroh-teaser:nth-child(3) .herzfroh-teaser-container .teaser-image > .teaser-image-wrap,
.herzfroh-teaser:nth-child(4) .herzfroh-teaser-container .teaser-image > .teaser-image-wrap {
	background-color: white;
}

.herzfroh-teaser:nth-child(3) .herzfroh-teaser-container .teaser-image > .teaser-image-wrap > img,
.herzfroh-teaser:nth-child(4) .herzfroh-teaser-container .teaser-image > .teaser-image-wrap > img {
	width: 77%;
	margin-left: -10px;
	margin-top: 10px;
}

.herzfroh-teaser:nth-child(5) .herzfroh-teaser-container .teaser-image > .teaser-image-wrap {
	background-color: white;
}

.herzfroh-teaser:nth-child(5) .herzfroh-teaser-container .teaser-image > .teaser-image-wrap > img {
	margin-top: 17px;
	margin-left: -3px;
	width: 105%;
}

.herzfroh-teaser:nth-child(7) .herzfroh-teaser-container .teaser-image > .teaser-image-wrap > img {
	margin-top: 45px;
  margin-left: -55px;
  width: 140%;
}

.herzfroh-teaser:nth-child(11) .herzfroh-teaser-container .teaser-image > .teaser-image-wrap > img,
.herzfroh-teaser:nth-child(12) .herzfroh-teaser-container .teaser-image > .teaser-image-wrap > img {
	padding-top: 100px;
	padding-left: 30px;
}


.herzfroh-teaser-container .teaser-image > .teaser-image-wrap > .teaser-video {
	width: 300px;
	height: 300px;
	background-color: var(--accent-2);
	margin-left: -50px;
	margin-top: -50px;
	position: relative;
}

@media (max-width: 991px) and (min-width: 768px) {

	.herzfroh-teaser-container .teaser-image > .teaser-image-wrap  {
		width: 100px;
		height: 100px;
	}

	.herzfroh-teaser-container .teaser-image > .teaser-image-wrap > .teaser-video {
		margin-left: -100px;
		margin-top: -105px;
	}
}

.herzfroh-teaser-container .teaser-image > .teaser-image-wrap > .teaser-video:after {
	font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: "\f0da";
  position: absolute;
  top: calc(50% - 12px);
  left: calc(50% - 7px);
  color: var(--accent-1);
  font-size: 50px;
  transform: scaleX(1.5);
  line-height: 25px;
}

.herzfroh-teaser .teaser-journal-name {
	flex: 0 0 10%;
	text-align: center;
	font-size: var(--font-size-4);
	position: relative;
}
.herzfroh-teaser .teaser-journal-name:before {
	position: absolute;
	content: ' ';
	width: 50px;
	height: 50px;
	background: url('/typo3conf/ext/herzfroh/Resources/Public/Images/TeaserProv/bild_heft.png');
	background-size: 100%;
	top: -5px;
	left: 5px;
}

.herzfroh-teaser .teaser-journal-title {
	flex: 1 0 5%;
	text-align: center;
	font-size: var(--font-size-3);
}

.herzfroh-teaser .teaser-text {
	flex: 1 0 1%;
	text-align: center;
	font-size: var(--font-size-4);
}

.herzfroh-teaser .teaser-button {
	flex: 1 1 10%;
	position: relative;
	text-align: center;
}

.herzfroh-teaser .teaser-button > a,
.herzfroh-teaser .teaser-button > button {
	position: absolute;
	text-align: center;
	bottom: 0;
	width: 140px;
	margin-left: -70px;
}

*/

.hf-toc-entry {
    border-radius: 20px;
    padding: 20px;
    background-color: var(--hf-bg-1);
    margin-bottom: 1em;
}

.hf-toc-entry h4 {
    font-size: var(--font-size-base);
    font-weight: bold;
}

main > div > header > h2 {
    color: var(--accent-1);
    font-size: var(--font-size-biggest-1);
    font-weight: bold;
    text-align: center;
    margin-bottom: 50px;
    margin-top: 50px;
}



.herzfroh-quiz {
    width: 100%;
    height: 700px;
    margin-bottom: 50px;
}

.herzfroh-quiz > iframe {
    border: unset;
    width: 100%;
    height: 760px;
}


.comic-wrapper {
    position: relative;
    width: calc(100% + 30px);
    text-align: center;
    margin-left: -15px;
}


.comic-wrapper.heft-3 {
    height: 2200px;
}

.comic-wrapper.heft-3 > div {
    font-weight: bold;
}

.comic-wrapper.heft-3 > img {
    position: absolute;
    width: 60%;
    margin-bottom: 30px;
    left: 20%;
    height: auto;
}

.comic-wrapper.heft-3:not(.wrapper-2) > img:nth-child(1) {
    top: 20px;
}

.comic-wrapper.heft-3:not(.wrapper-2) > img:nth-child(2) {
    top: 460px;
}

.comic-wrapper.heft-3:not(.wrapper-2) > img:nth-child(3) {
    top: 900px;
}

.comic-wrapper.heft-3:not(.wrapper-2) > img:nth-child(4) {
    top: 1340px;
}

.comic-wrapper.heft-3:not(.wrapper-2) > img:nth-child(5) {
    top: 1780px;
}


.comic-wrapper.wrapper-2.heft-3 > img.ci1 {
    top: 50px;
}

.comic-wrapper.wrapper-2.heft-3 > img.ci2 {
    top: 490px;
}

.comic-wrapper.wrapper-2.heft-3 > img.ci3 {
    top: 930px;
}

.comic-wrapper.wrapper-2.heft-3 > img.ci4 {
    top: 1370px;
}

.comic-wrapper.wrapper-2.heft-3 > img.ci5 {
    top: 1800px;
}

.speakbox {
    position: absolute;
    cursor: pointer;
    border-radius: 10px;
}

.speakbox:hover {
    background-color: var(--hf-bg-contrast-alt-2);
    background-color-opacity: 0.5;
}

.hf-main-content > .hf-content-title {
    padding-top: 30px;
}

@media (min-width: 576px) {
    .hf-main-content > .hf-content-title {
        padding-top: 200px;
    }
}

@media (min-width: 768px) {
    .hf-main-content > .hf-content-title {
        padding-top: 130px;
    }
}
/*
@media (min-width: 768px) {
  main > .container {
    padding-top: 80px;
  }
}
*/

.hf-discover {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding-top: 2em;
    padding-bottom: 2em;
}

.hf-discover-right {
    flex: overflow: visible;
    padding-top: 3em;
    flex: 0 0 auto;
    /* col-2 */
    width: 16.66666667%;
    font-size: var(--font-size-base-1);
}


/* vertical organisation */

@media(min-width: 576px) {

    body.vertical-free .vertical-free-visible {
        display: block !important;
    }

    body.vertical-free .vertical-free-hidden {
        display: none !important;
    }
    /*
  body.vertical-free :not(.collapsed) .vertical-free-toggle {
    height: 0;
  }
*/
    body.vertical-free .vertical-free-toggle {
        overflow: hidden;
        padding: 0;
        margin: 0;
    }

    body.vertical-free .vertical-free-toggle .collapse:not(.show) {
        height: 0 !important;
    }

    body.vertical-free .vertical-free-toggle {
        transform: initial;
        opacity: initial;
    }

    .hf-main-header {
        background-color: var(--hf-bg-1);
    }

    body:not(.vertical-free) .hf-main-header nav {
        /*transition: opacity, transform 0.25s ease; */
    }

    body.vertical-40 .hf-main-header nav,
    body.vertical-50 .hf-main-header nav {
        transform: translateX(-10%) translateY(-10px) scale(0.9);
    }

    body.vertical-60 .hf-main-header nav,
    body.vertical-70 .hf-main-header nav {
        transform: translateX(-15%) translateY(-22px) scale(0.8);
    }

    body.vertical-80 .hf-main-header nav,
    body.vertical-90 .hf-main-header nav {
        transform: translateX(-20%) translateY(-34px) scale(0.7);
    }

    body.vertical-100 .hf-main-header nav,
    body.vertical-110 .hf-main-header nav {
        transform: translateX(-25%) translateY(-46px) scale(0.6);
        opacity: 0.7;
    }

    body.vertical-120 .hf-main-header nav,
    body.vertical-130 .hf-main-header nav {
        transform: translateX(-30%) translateY(-58px) scale(0.5);
        opacity: 0.6;
    }

    body.vertical-140 .hf-main-header nav,
    body.vertical-150 .hf-main-header nav {
        transform: translateX(-35%) translateY(-70px) scale(0.4);
        opacity: 0.5;
    }

    body.vertical-free .hf-main-header nav,
    body.vertical-free .hf-main-header nav {
        /*
    transform:  translateX(-35%) translateY(-70px) scale(0.5);
    opacity: 0.2;
    */
    }

    body.vertical-40 .hf-main-header > div,
    body.vertical-50 .hf-main-header > div {
        height: 110px;
    }

    body.vertical-60 .hf-main-header > div,
    body.vertical-70 .hf-main-header > div {
        height: 100px;
    }

    body.vertical-80 .hf-main-header > div,
    body.vertical-90 .hf-main-header > div {
        height: 90px;
    }

    body.vertical-100 .hf-main-header > div,
    body.vertical-110 .hf-main-header > div {
        height: 80px;
    }

    body.vertical-120 .hf-main-header > div,
    body.vertical-130 .hf-main-header > div {
        height: 70px;
    }

    body.vertical-140 .hf-main-header > div,
    body.vertical-150 .hf-main-header > div {
        height: 60px;
    }
}

.qa-person {
    font-size: var(--font-size-big-1);
    color: var(--accent-2);
}

.qa-text {
    position: relative;
    padding: 40px;
    border-radius: 50px;
    background-color: var(--hf-bg-contrast-alt-2);
    font-size: var(--font-size-big-1);
    color: var(--accent-2);
    margin-top: 4rem;
}

.qa-row {
    margin-bottom: 3rem;
}

.qa-icon {
    position: absolute;
    width: 7rem;
    height: auto;
    top: -7rem;
    right: 0;
}

section.journal-qa {
    margin-bottom: 8rem;
    padding-bottom: 4rem;
    border-bottom: 4px solid var(--accent-1);
}

section.journal-qa:last-child {
    border-bottom: unset;
}

.hf-swipe {
    transition: opacity 1.3s ease, margin 1.3s ease, transform 1.3s ease;
    overflow: hidden;
}

.hf-swipe.hf-swipe-rl {
    /*left: 100%;*/
    /*margin-left: 100%; */
    transform: translateX(100%);
    width: 0;
    /*border: 5px solid red;*/
    opacity: 0;
}

.hf-swipe.hf-swipe-rl.hf-swipe-rl-come {
    transform: translateX(0);
    /*left: 0; */
    /*margin-left: 0;*/
    /*border: 5px solid green;*/
    opacity: 1;
    width: 100%;
}

.hf-swipe.hf-swipe-rl.hf-swipe-rl-go {
    transform: translateX(-100%);
    /*left: -100%;*/
    /*margin-left: -100%; */
    /*border: 5px solid yellow;*/
    opacity: 0;
    width: 100%;
}

#c180 {
    overflow-x: hidden;
}


#c176 form {
    width: 80%;
    margin: 4rem 0 4rem 0;
}

#c176 > form > h2 {
    margin: 2rem 0 2rem 0;
    color: var(--accent-2);
}

#c176 form .form-group {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: row;
}

#c176 form .form-group label {
    flex: 0 0 300px;
}

#c176 form .form-group div.input {
    flex: 1 1 100%;
}

#c176 form .form-group input,
#c176 form .form-group textarea {
    width: 100%;
    font-size: 2rem;
}

#c176 h1 {
    color: var(--accent-1);
    font-size: var(--font-size-display-1);
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

#c176 .btn-toolbar {
    justify-content: center;
}

#c194 {
    padding-top: 10rem;
}

#c194 h2 {
    color: var(--accent-1);
    font-size: var(--font-size-bigger-1);
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

#c190 h1 {
    text-align: center;
}

#c190 {
    margin-bottom: 10rem;
}

#c171 > h2 {
    margin-bottom: 9rem;
}

.teaser-wrapper {
    /* Readspeaker Buttons */
    margin-bottom: 10rem !important;
}
/*

.teaser-wrapper:nth-child(1) .teaser-icon,
.teaser-wrapper:nth-child(6) .teaser-icon { 
	display: block;
	visibility: visible;
}
*/

.teaser-wrapper .teaser-icon {
    display: block;
    visibility: visible;
    /*
	display: none;
	visibility: hidden;
	*/
    position: absolute;
    z-index: 1;
    width: 3rem;
    height: auto;
    right: 0.5rem;
    top: 0.8rem;
}