/* GRÖSSEN */

html {
    font-size: 15px;
}
@media screen and (min-width: 800px) {
    html {
        font-size: 16px;
    }
}
:root {
    --xxs: 0.375rem;
    --xs: 0.75rem;
    --s: 1rem;
    --m: 2rem;
    --l: 4rem;
    --xl: 8rem;
    --xxl: 16rem;
    --profile-img: clamp(5rem, 10vw, 7rem);
}



/* SPACES */

.st-xxs { margin-top: var(--xxs) !important }
.st-xs { margin-top: var(--xs) !important }
.st-s { margin-top: var(--s) !important }
.st-m { margin-top: var(--m) !important }
.st-l { margin-top: var(--l) !important }
.st-xl { margin-top: var(--xl) !important }
.st-xxl { margin-top: var(--xxl) !important }
.sb-xxs { margin-bottom: var(--xxs) !important }
.sb-xs { margin-bottom: var(--xs) !important }
.sb-s { margin-bottom: var(--s) !important }
.sb-m { margin-bottom: var(--m) !important }
.sb-l { margin-bottom: var(--l) !important }
.sb-xl { margin-bottom: var(--xl) !important }
.sb-xxl { margin-bottom: var(--xxl) !important }
@media screen and (min-width: 800px) {
    .st-s { margin-top: calc(1.25 * var(--s)) !important }
    .st-m { margin-top: calc(1.25 * var(--m)) !important }
    .st-l { margin-top: calc(1.25 * var(--l)) !important }
    .st-xl { margin-top: calc(1.25 * var(--xl)) !important }
    .st-xxl { margin-top: calc(1.25 * var(--xxl)) !important }
    .sb-s { margin-bottom: calc(1.25 * var(--s)) !important }
    .sb-m { margin-bottom: calc(1.25 * var(--m)) !important }
    .sb-l { margin-bottom: calc(1.25 * var(--l)) !important }
    .sb-xl { margin-bottom: calc(1.25 * var(--xl)) !important }
    .sb-xxl { margin-bottom: calc(1.25 * var(--xxl)) !important }
}
@media screen and (min-width: 1200px) {
    .st-s { margin-top: calc(1.5 * var(--s)) !important }
    .st-m { margin-top: calc(1.5 * var(--m)) !important }
    .st-l { margin-top: calc(1.5 * var(--l)) !important }
    .st-xl { margin-top: calc(1.5 * var(--xl)) !important }
    .st-xxl { margin-top: calc(1.5 * var(--xxl)) !important }
    .sb-s { margin-bottom: calc(1.5 * var(--s)) !important }
    .sb-m { margin-bottom: calc(1.5 * var(--m)) !important }
    .sb-l { margin-bottom: calc(1.5 * var(--l)) !important }
    .sb-xl { margin-bottom: calc(1.5 * var(--xl)) !important }
    .sb-xxl { margin-bottom: calc(1.5 * var(--xxl)) !important }
}



/* FARBEN */

:root {
    --c99: hsl(0,0%,99.5%);
    --c98: hsl(0,0%,98%);
    --c96: hsl(0,0%,96%);
    --c93: hsl(0,0%,93%);
    --c90: hsl(0,0%,90%);
    --c80: hsl(0,0%,80%);
    --c60: hsl(0,0%,60%);
    --c41: hsl(0,0%,41%);
    --c30: hsl(0,0%,30%);
    --green: hsl(120,100%,50%);
}


/* Basisfarben */

body {
    color: var(--c41);;
    background: linear-gradient(to bottom, var(--c96) 40%, var(--c93) 100%);
    background-size: cover;
    background-attachment: fixed;
}


/* Backgroundfarben */

input.text,
input.password,
input.date,
select,
textarea {
    background-color: var(--c98);
}
.ce_accordion.active {
    background-color: var(--c98);
}
.youtube_playlist,
.gallery,
.box,
.avatar {
    background-color: hsl(0,0%,60%,0.2);
}
button,
.button,
.button-wrapper a,
.card-btn.active,
.navmenu a:hover {
    background-color: var(--c41);
}
.card:hover h2 {
    background-color: yellow;
}


/* Schriftfarben */


button:hover,
.button:hover,
.button-wrapper a:hover {
    color: var(--c99);
}

button,
.button,
.button-wrapper a {
    color: var(--c98);
}
a,
.toggler button,
.widget-select:before {
    color: var(--c60);
}
a:hover,
label,
legend,
.toggler:hover button,
.toggler.active button,
.box-title,
.hasContent,
.card *,
.bar-btn,
.bar-btn:hover,
.bar,
.bar:hover {
    color: var(--c41);
}
span.mandatory {
    color: red;
}
input,
select,
textarea,
.handwritten,
.verse-box,
.dailyVerses.bibleVerse a {
    color: var(--c41);
}
.card:hover * {
    color: var(--c30);
}


/* Rahmen */

input.text,
input.password,
input.date,
select,
textarea {
    border: none;
}
input.text,
input.password,
input.date,
select,
textarea {
    border: 0.12rem solid var(--c60);
    transition: 0.5s ease-in-out;
}
input.text:focus,
input.password:focus,
textarea:focus,
select:focus {
    border: 0.12rem solid var(--c41);
}



/* SCHRIFT */

@font-face {
    font-family: 'rokkitt';
    src: url('../../files/system/fonts/rokkitt.woff') format('woff'), url('../../files/system/fonts/rokkitt.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ss-regular';
    src: url('../../files/system/fonts/ss-regular.woff') format('woff'), url('../../files/system/fonts/ss-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ss-semibold';
    src: url('../../files/system/fonts/ss-semibold.woff') format('woff'), url('../../files/system/fonts/ss-semibold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ss-italic';
    src: url('../../files/system/fonts/ss-italic.woff') format('woff'), url('../../files/system/fonts/ss-italic.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'graffiti';
    src: url('../../files/system/fonts/graffiti.woff') format('woff'), url('../../files/system/fonts/graffiti.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'typewriter';
    src: url('../../files/system/fonts/typewriter.woff') format('woff'), url('../../files/system/fonts/typewriter.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* Basisschrift */

body {
    font-family: 'typewriter', sans-serif;
    font-size: 1rem;
    line-height: 1.15;
}
body::after,
.card h2 {
    font-family: 'graffiti';
}


/* Schriftarten */

.icon,
.grid-header:before,
.widget-select:before,
button::before {
    font-family: 'icon'!important;
    font-weight: normal!important;
}
h1, h2 {
    font-family: 'graffiti', serif;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 0.5rem;	
}
h3, h4, h5, h6,
button,
.button {
    font-family: 'typewriter', sans-serif;
    font-weight: 700;
    margin-top: 0;
}
p {
    line-height: 1.5;
}
p a {
    font-family: inherit;
    font-size: inherit;
    font-weight: bolder;
}


/* Schriftgrößen */

h1 {
    font-size: 2.6rem;
}
h2 {
    font-size: 1.5rem;
}
h3 {
    text-transform: uppercase;
    font-size: 1.25rem;
}
p {
    font-size: 1.1rem;
}
button,
.button {
    font-size: 1rem;
}


/* Auszeichnungen */

a {
    text-decoration: none;
    cursor: pointer;
}
.radio_container label,
.checkbox_container label {
    text-transform: none;
}
button,
.button {
    text-wrap: balance;
}
.button,
.button-wrapper a,
button {
    text-transform: uppercase;
}






/* ECKENRUNDUNGEN */

/* Abgerundete Ecken */

input[type='checkbox']+label:before {
    border-radius: 0.25rem;
}
.round,
.box,
.hero,
.card,
button,
.button,
.button-wrapper a,
.bar-btn,
.card-btn.active,
.box>*,
.bar_end-filled,
.formbody,
input,
textarea,
select,
.profilbox li,
.navmenu a,
.navmenu strong,
.ce_accordion {
    border-radius: 0.5rem;
}
.bar_pre,
.profilbox li:before {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
} 


/* Rund */

#loader .spinner,
#loader2 .spinner,
.loader .spinner,
.bar_img,
#nav_fixed .active img,
#nav_fixed a.abutton.active:before,
input[type='radio']+label:before {
    border-radius: 50%;
    overflow: hidden;
}





/* SCHATTEN */

button:hover,
.button:hover,
.button-wrapper a:hover,
.bar-btn:hover,
.card-btn:hover,
.ce_accordion:hover {
    filter: drop-shadow(0 0.1rem 0.5rem rgba(51, 51, 51, 0.2));
}
button,
.button,
.button-wrapper a,
.bar-btn,
.card-btn,
button:active,
.button:active,
.button-wrapper a:active,
.bar-btn:active,
.card-btn:active,
.navmenu a:active,
.ce_accordion  {
    filter: drop-shadow(0 0.1rem 0.125rem rgba(51, 51, 51, 0.2));
}
.navmenu a:hover,
.modal-content {
    filter: drop-shadow(0 0.1rem 0.5rem rgba(51, 51, 51, 0.2));
}
#right1,
#right2,
#warenkorb {
    filter: drop-shadow(0.5rem 0 0.5rem rgba(51, 51, 51, 0.5));
}
.navmenu a,
.navmenu strong,
.ce_accordion.active,
.ce_accordion button {
    filter: drop-shadow(0 0 0 transparent);
}
.new-media {
    border: 0.2rem solid var(--PT);
    border-radius: 0.6rem;
}





/* ANIMATIONEN */

/* Übergänge */

.slick-slide,
.ce_accordion{
    transition: 0.5s ease-in-out;
}
.navmenu a,
.navmenu strong {
    transition: 0.15s ease-in-out;
}
body:before,
#right1,
#right2,
#warenkorb,
button,
.button,
.button-wrapper a,
.card *,
#nav_footer .channels a,
.slick-slide:hover {
    transition: 0.2s ease-in-out;
}
*:active {
    transition: 0.05s ease-in-out;
}

/* Spin */

#loader .spinner,
#loader2 .spinner,
.loader .spinner,
.nachrichtenbox .loader .spinner,
button #loader2 .spinner {
  animation: spin 2s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* Inhaltladeanimation */

.animate-bottom {
    position: relative;
    animation-name: animatebottom;
    animation-duration: 0.9s;
    animation-timing-function: ease-in-out;
}
@keyframes animatebottom {
    from { bottom:-1rem; transform: scale(98%); opacity:0 }
    to { bottom:0px; transform: scale(100%); opacity:1 }
}
.hidden {
    opacity: 0;
    transform: translateY(100px); /* Verschiebe die Elemente nach unten */
    transition: all 0.5s ease-in-out;
}
.visible {
    opacity: 1;
    transform: translateY(0);
}
/* RESET */

*, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.invisible {
    display: none;
}

/* LAYOUT */

body {
    display: flex;
    flex-direction: column;
    position: relative;
}
body::after {
    content: '';
    position: absolute;
    top: 0;
    left: 5vw;
    font-size: 10vw;
}
@media (min-width: 600px) {
    body::after {
        font-size: 4rem;
    }
}
@media (min-width: 1500px) {
    body::after {
        content: '...an meine Liebsten';
        position: fixed;
        top: 16rem;
        left: -8vw;
        font-size: calc(2vw + 2vh + 1vmin);
        transform: rotate(-90deg);
    }
}
.block {
    overflow: visible;
}



/* BUTTON */

.button_wrapper {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
button,
.button,
.button-wrapper a,
.bar-btn,
.card-btn.active {
    display: flex;
    align-items: center;
    cursor: pointer!important;
    overflow: hidden;
    transform: scale(99%);
}
button,
.button, 
.button-wrapper a,
.card-btn {
    justify-content: center;
}
button,
.button,
.button-wrapper a {
    height: 2.25rem;
    min-width: 12rem;
    border: none;
    padding: 0 0.75rem;
    display: inline-flex;
}
button,
.button,
.button-wrapper a,
.bar-btn {
    transform: scale(100%);
}
.card-btn {
    transform: scale(100%);
}
button:hover,
.button:hover,
.button-wrapper a:hover,
.bar-btn:hover,
.card-btn:hover {
    transform: scale(100.5%);
}
button:active,
.button:active,
.button-wrapper a:active,
.bar-btn:active,
.card-btn:active {
    transform: scale(99.5%);
}
.bar-btn,
.bar-btn:hover {
    color: var(--black);
}
.buttonicon {
    margin-right: 0.25rem;
}
.smallbutton {
    height: 1.9rem;
    min-width: 1.9rem;
    padding: 0 0.5rem;
}
.button-wrapper a {
    display: inline-flex;
}
.card-btn:hover {
    z-index: 99;
}
.button.disabled {
    cursor: default!important;
    opacity: 0.5;
    filter: none!important;
    transform: none!important;
}
.button.disabled:hover {
    transform: none!important;
}
.ce_accordion {
    transform: scale(99.5%);
}
.ce_accordion:hover {
    transform: scale(100%);
}
.ce_accordion.active:hover {
    transform: scale(99.5%);
}
.toggler button {
    box-shadow: none!important;
    background-color: transparent!important;
    padding: 0 var(--xxs)!important;
    transform: none!important;
    display: flex;
    font-size: 1.2rem;
    flex-direction: row-reverse;
    justify-content: space-between;
    width: 100%;
    height: auto;
    min-height: calc(2.25rem - (2 * var(--xxs)));
    text-align: left;
}
.toggler button:before {
    font-family: 'icon';
    content: '\e92b';
}
.toggler.active button:before {
    content: '\e925';
}
.accordion {
    padding: var(--xxs);
}



/* FORMULARE */

*:focus {
    outline: none;
}
.formbody {
    min-width: 300px;
}
.widget {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: wrap;
}
.widget div {
    display: flex;
    flex-direction: column-reverse;
}
.widget-submit {
    align-items: center;
    box-shadow: none;
    margin-bottom: 0;
    flex-wrap: wrap;
}
.widget-select {
  position: relative;
}
.widget-select:before {
  position: absolute;
  right: 0.3125rem;
  top: 0;
  bottom: 0;
  width: 1rem;
  content: "\e92a";
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  margin: auto;
  pointer-events: none;
}
select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  -moz-padding-start: calc(10px - 3px);
  padding-right: 1.5rem!important;
}
input.text,
input.password,
input.date,
select {
    width: 100%;
    height: 2rem;
    padding: 0 var(--xxs);
    padding-right: 0;
}
textarea {
    width: 100%;
    min-width: calc(100% - 13rem);
    resize: vertical;
    min-height: 6rem;
    padding: var(--xxs);
}
label,
legend {
    margin-top: 0.2rem;
    margin-bottom: 0;
    padding-left: 0.2rem;
}
fieldset {
    margin-top: var(--xxs);
    margin-bottom: var(--s);
}
.radio_container {
    margin-bottom: 0;
}
.radio_container .options_wrapper {
    margin-top: var(--xxs);
    display: flex;
    flex-direction: column;
}
.fieldset_wrapper {
    display: flex;
    min-height: 1.5rem;
    margin-bottom: var(--s);
}
.fieldset_wrapper>div {
    display: flex;
    width: 50%;
    max-width: 12rem;
    align-items: center;
}
fieldset {
    border: none;
}
fieldset input[type="radio"]+label,
fieldset input[type="checkbox"]+label,
.radio_container .options_wrapper label {
    font-size: inherit;
    text-transform: none;
    margin: 0;
}
.radio_container .options_wrapper span {
    margin-bottom: var(--s);
}
fieldset span {
    margin-right: var(--s);
}
.checkbox_container {
    margin-top: 0;
    margin-bottom: var(--xs);
}
.checkbox_container:first-of-type {
    margin-top: var(--s);
}
.checkbox_container:last-of-type {
    margin-bottom: var(--s);
}
.radio_container span,
.checkbox_container span {
    display: flex;
    align-items: center;
}
.radio_container label,
.checkbox_container label {
    margin: 0;
    width: auto;
    text-align: left;
}
.widget-submit {
    margin-top: 1rem;
}
input:disabled,
input:disabled+label {
    opacity: 0.5;
}
input[type='radio'],
input[type='checkbox'] {
    display: none;
}

input[type='radio']+label,
input[type='checkbox']+label {
    position: relative;
    padding-left: calc(1.2rem + var(--xs));
    cursor: pointer;
    min-height: 1.2rem;
    display: flex;
    align-items: center;
}
input[type='radio']+label:before,
input[type='checkbox']+label:before,
input[type='radio']+label:after,
input[type='checkbox']+label:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    bottom: 0;
    width: 1.2rem;
    height: 1.2rem;
}
input[type='radio']+label:before,
input[type='checkbox']+label:before {
    background-color: var(--basic-light);
}
input[type='radio']+label:after,
input[type='checkbox']+label:after {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'icon';
    color: var(--IL);
}
input[type='radio']:checked+label:after {
    content: '\e938';
    font-size: 85%;
}
input[type='checkbox']:checked+label:after {
    content: '\e90e';
}



/* CARD */

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    border-radius: 0.5rem;
    text-decoration: none;
    color: var(--c41);
    transition: 0.3s ease-in-out;
}
.card h2 {
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 0;
    display: inline-flex;
    margin-right: auto;
    line-height: 1;
}
.card p {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 0.95rem;
}
.info {
    display: flex;
    grid-gap: 0.75rem;
}
.info div {
    display: flex;
    align-items: center;
    grid-gap: 0.25rem;
    width: -moz-fit-content;
    width: fit-content;
}
.info span {
    font-size: 1.2rem;
}



/* STARTSEITE */

.rubric {
    text-transform: uppercase;
    color: var(--c60);
    margin-bottom: 1.15rem!important;
}
.rubric h1 {
    font-family: 'typewriter', serif;
    margin-top: 0;
    margin-bottom: 0;
    text-transform: uppercase;
    font-size: 1.4rem;
    color: var(--c60);
}
.rubric p {
    font-size: 1rem;
}



/* LOGIN */

.mod_login {
    display: flex;
    flex-direction: column;
    min-width: 100vw;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
}
.mod_login form {
    max-width: 20rem;
    margin-bottom: 10rem;
}

/* DETAILSEITE */

.gallery {
    width: calc(100vw - 2rem);
    max-width: 27rem;
    aspect-ratio: 1 / 1;
    border-radius: 0.5rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}
.gallery img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}
.youtube_playlist {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0.5rem;
}
#video-list {
    list-style-type: none;
    padding: 0;
}
#video-list li {
    margin-bottom: 5px;
}
.play-video {
    cursor: pointer;
    flex-direction: row;
    align-items: center;
}
.play-video span {
    display: none;
    margin-right: 0.25rem;
    font-size: 1.2rem;
    line-height: 100%;
}
.play-video.active .active_span {
    display: block;
}
.paused .play-video.active .active_span {
    display: none;
}
.paused .play-video.active .paused_span {
    display: block;
}
h3 {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 0.5rem;
}

.ce_comments {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.ce_comments .widget-text,
.ce_comments .widget-checkbox,
.ce_comments label {
    display: none;
}
.ce_comments textarea {
    padding: 0.75rem;
}
.comment_default {
    padding: 0.75rem;
    position: relative;
    margin-left: 1rem;
}
.ce_comments .widget-textarea {
    position: relative;
    margin-left: 1rem;
}
.comment_default::before,
.ce_comments .widget-textarea::before {
    position: absolute;
    content: '';
    top: 0.75rem;
    left: -0.75rem;
    width: 0px;
    height: 0px;
    border-style: solid; 
    border-width: 0.75rem 0.75rem 0.75rem 0;
    border-color: transparent hsl(0,0%,60%,0.2) transparent transparent;
}
.ce_comments .widget-textarea::before {
    border-color: transparent var(--c60) transparent transparent;
}
.ce_comments .widget-textarea::after {
    position: absolute;
    content: '';
    top: 0.75rem;
    left: -0.6rem;
    width: 0px;
    height: 0px;
    border-style: solid; 
    border-width: 0.75rem 0.75rem 0.75rem 0;
    border-color: transparent var(--c98) transparent transparent;
}
.ce_comments .widget-textarea:focus::after {
    border-color: transparent var(--c41) transparent transparent;
}
.reply {
    position: relative;
}
.comment_wrapper {
    display: grid;
    grid-template-columns: 3rem auto;
    gap: 0.125rem;
}
.avatar {
    width: 3rem;
    height: 3rem;
    border: 0.125rem solid var(--c60);
    border-radius: 50%;
    overflow: hidden;
}
.form-wrapper {
    display: grid;
    grid-template-columns: auto 2.25rem;
    gap: 0.5rem;
}
.form-submit {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.form-wrapper button {
    min-width: 2.25rem;
    padding: 0;
}
.grid-span {
    margin-bottom: 0;
    grid-column: span 1; 
}
.grid-4x1,
.grid-3x1,
.grid-2_1,
.grid-1_1,
.grid-1_2,
.grid-3x1-inline,
.grid-2_1-inline,
.grid-1_1-inline,
.grid-1_2-inline,
.grid-3_1-inline,
.grid-1 {
    display: grid;
    gap: var(--m);
    height: max-content;
    width: 100%;
}
.grid-smallgap {
    gap: var(--xs);
}
.grid-4x1,
.grid-3x1,
.grid-2_1,
.grid-1_1,
.grid-1_2,
.grid-1 {
    grid-template-columns: 1fr;
    margin: 0 auto;
    max-width: calc(100vw - 1.6rem);
    min-width: calc(380px - 1.6rem);
}
.grid-3x1-inline {
    grid-template-columns: 1fr 1fr 1fr;
}
.grid-2_1-inline {
    grid-template-columns: 2fr 1fr;
}
.grid-4x1,
.grid-1_1-inline {
    grid-template-columns: 1fr 1fr;
}
.grid-1_2-inline {
    grid-template-columns: 1fr 2fr;
}
.grid-3_1-inline {
    grid-template-columns: 3fr 1fr;
}
.grid-3x1 .grid-span { 
    grid-column: span 1; 
}
.grid-4x1 .grid-span { 
    grid-column: span 2; 
    margin-bottom: 0;
}
.grid-container {
    container-type: inline-size;
    height: max-content;
}
.grid-flex {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--xxs);
}
.limited {
    width: 100%;
    max-width: 37rem;
    margin: 0 auto;
}
.grid-span.limited {
    max-width: 60rem;
}
@container (min-width: 660px) {
    .grid-flex {
        grid-template-columns: 1fr 1fr;
    }
    .box-header {
        grid-column: span 2;
    }
}
@container (min-width: 1200px) {
    .grid-flex {
        grid-template-columns: repeat(3, 1fr);
    }
    .box-header {
        grid-column: span 3;
    }
}
.biggap,
.smallgap {
    display: flex;
    flex-direction: column;
}
.biggap {
    gap: var(--xs);
}
.smallgap {
    gap: var(--xxs);
}

.offset-1 { grid-column-start: 2; }
.offset-2 { grid-column-start: 3; }
.offset-3 { grid-column-start: 4; }
.offset-4 { grid-column-start: 5; }
.offset-5 { grid-column-start: 6; }
.offset-6 { grid-column-start: 7; }
.offset-7 { grid-column-start: 8; }
.offset-8 { grid-column-start: 9; }
.offset-9 { grid-column-start: 10; }
.offset-10 { grid-column-start: 1_1; }
.offset-1_1 { grid-column-start: 12; }

.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-1_1 { grid-column: span 1_1; }
.col-12 { grid-column: span 12; }

.formbody {
    display: grid;
    gap: var(--xxs);
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: auto;
}
.widget,
.w100,
.w50,
.w25 { 
    grid-column: span 8; 
}
.w12 { 
    grid-column: span 4; 
}

.feedItem {
    width: 100%;
}
@media (min-width: 480px) {
    .grid-3x1 {
        grid-template-columns: 1fr 1fr;
    }
    .grid-3x1 .grid-span { 
        grid-column: span 2; 
    }
    .widget,
    .w100,
    .w50 { 
        grid-column: span 8; 
    }
    .w25 { 
        grid-column: span 4; 
    }
    .w12 { 
        grid-column: span 2; 
    }
}

@media (max-width: 714px) {
    .feedItem {
        margin-bottom: var(--xs);
    }
}

@media (min-width: 715px) {
    .feedItem {
        width: calc(50% - 6px);
    }
}
  
@media (min-width: 800px) {
    .grid-4x1 {
        grid-template-columns: repeat(4, 1fr);
    }
    .grid-4x1 .grid-span { 
        grid-column: span 4; 
    }
    .grid-3x1 {
        grid-template-columns: repeat(3, 1fr);
    }
    .grid-3x1 .grid-span { 
        grid-column: span 3; 
    }
    .grid-1_1 {
        grid-template-columns: 1fr 1fr;
    }
    .grid-1_2 {
        grid-template-columns: 1fr 2fr;
    }
    .limited {
        width: 100%;
        max-width: inherit;
        margin: 0 auto;
    }

    .widget,
    .w100 {
        grid-column: span 8;
    }
    .w50 { 
        grid-column: span 4; 
    }
    .w25 { 
        grid-column: span 2; 
    }
    .w12 { 
        grid-column: span 1; 
    }
}
@media (min-width: 58rem) {
    .grid-2_1 {
        grid-template-columns: auto 27rem;
    }
}
  
@media (min-width: 1200px) {
    .grid-4x1,
    .grid-3x1,
    .grid-2_1,
    .grid-1_1,
    .grid-1 {
        max-width: 1332px;
    }
    .feedItem {
        width: calc((100% / 3) - 8px);
    }
}
.grid-1 {
    gap: 0;
}
@font-face {
    font-family: 'icomoon';
    src: url('../../files/system/fonts/icomoon.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  
  [class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
  
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-allSelect:before {
    content: "\e91b";
    color: #808080;
  }
  .icon-copy:before {
    content: "\e91c";
    color: #808080;
  }
  .icon-date_plus:before {
    content: "\e923";
    color: #808080;
  }
  .icon-event_plus:before {
    content: "\e92e";
    color: #808080;
  }
  .icon-expand:before {
    content: "\e947";
    color: #808080;
  }
  .icon-media_borrow:before {
    content: "\e94b";
    color: #808080;
  }
  .icon-media_new:before {
    content: "\e94d";
    color: #808080;
  }
  .icon-media_return:before {
    content: "\e94e";
    color: #808080;
  }
  .icon-multiSelect:before {
    content: "\e94f";
    color: #808080;
  }
  .icon-nicht-sichtbar:before {
    content: "\e950";
    color: #808080;
  }
  .icon-paste:before {
    content: "\e951";
    color: #808080;
  }
  .icon-print:before {
    content: "\e952";
    color: #808080;
  }
  .icon-reduced:before {
    content: "\e953";
    color: #808080;
  }
  .icon-Schriftstck .path1:before {
    content: "\e954";
    color: rgb(128, 128, 128);
  }
  .icon-Schriftstck .path2:before {
    content: "\e955";
    margin-left: -1em;
    color: rgb(255, 255, 255);
  }
  .icon-Schriftstck .path3:before {
    content: "\e956";
    margin-left: -1em;
    color: rgb(255, 255, 255);
  }
  .icon-Schriftstck .path4:before {
    content: "\e957";
    margin-left: -1em;
    color: rgb(255, 255, 255);
  }
  .icon-Schriftstck .path5:before {
    content: "\e958";
    margin-left: -1em;
    color: rgb(255, 255, 255);
  }
  .icon-Schriftstck .path6:before {
    content: "\e959";
    margin-left: -1em;
    color: rgb(255, 255, 255);
  }
  .icon-sichtbar:before {
    content: "\e95a";
    color: #808080;
  }
  .icon-sleep:before {
    content: "\e95b";
    color: #808080;
  }
  .icon-labellist:before {
    content: "\e909";
    color: #808080;
  }
  .icon-labellist_add:before {
    content: "\e95c";
    color: #808080;
  }
  .icon-labellist_remove:before {
    content: "\e95d";
    color: #808080;
  }
  .icon-BMO_Icons_Account:before {
    content: "\e900";
    color: #808080;
  }
  .icon-BMO_Icons_Accountmen:before {
    content: "\e901";
    color: #808080;
  }
  .icon-BMO_Icons_Achtung:before {
    content: "\e903";
    color: #808080;
  }
  .icon-BMO_Icons_Adressbuch:before {
    content: "\e904";
    color: #808080;
  }
  .icon-BMO_Icons_Adresse-hinzufgen:before {
    content: "\e905";
    color: #808080;
  }
  .icon-BMO_Icons_allen-antworten:before {
    content: "\f122";
    color: #808080;
  }
  .icon-BMO_Icons_antworten:before {
    content: "\f112";
    color: #808080;
  }
  .icon-BMO_Icons_Audiaufzeichnung-vorhanden:before {
    content: "\e94a";
    color: #808080;
  }
  .icon-BMO_Icons_Aufgabenliste:before {
    content: "\e90e";
    color: #808080;
  }
  .icon-BMO_Icons_Ausbildungsbegleiter:before {
    content: "\e935";
    color: #808080;
  }
  .icon-BMO_Icons_austragen:before {
    content: "\a90a";
    color: #808080;
  }
  .icon-BMO_Icons_bearbeiten:before {
    content: "\e906";
    color: #808080;
  }
  .icon-BMO_Icons_Beitrge:before {
    content: "\e907";
    color: #808080;
  }
  .icon-BMO_Icons_bestaetigen:before {
    content: "\e942";
    color: #808080;
  }
  .icon-BMO_Icons_Bestellverlauf:before {
    content: "\e908";
    color: #808080;
  }
  .icon-BMO_Icons_Bewertung:before {
    content: "\e99e";
    color: #808080;
  }
  .icon-BMO_Icons_Bibelschule:before {
    content: "\e90a";
    color: #808080;
  }
  .icon-BMO_Icons_Bibliothek:before {
    content: "\e90b";
    color: #808080;
  }
  .icon-BMO_Icons_Contao:before {
    content: "\a912";
    color: #808080;
  }
  .icon-BMO_Icons_Dashboard:before {
    content: "\e902";
    color: #808080;
  }
  .icon-BMO_Icons_Dateianhang:before {
    content: "\e94c";
    color: #808080;
  }
  .icon-BMO_Icons_Dateien:before {
    content: "\e90f";
    color: #808080;
  }
  .icon-BMO_Icons_Davidsstern:before {
    content: "\a916";
    color: #808080;
  }
  .icon-BMO_Icons_Die-BMO:before {
    content: "\e90c";
    color: #808080;
  }
  .icon-BMO_Icons_Doppelpfeil-links:before {
    content: "\e910";
    color: #808080;
  }
  .icon-BMO_Icons_Doppelpfeil-rechts:before {
    content: "\e911";
    color: #808080;
  }
  .icon-BMO_Icons_Download:before {
    content: "\e9c7";
    color: #808080;
  }
  .icon-BMO_Icons_durchgestrichener-Kreis:before {
    content: "\e912";
    color: #808080;
  }
  .icon-BMO_Icons_Einstellungen:before {
    content: "\e93a";
    color: #808080;
  }
  .icon-BMO_Icons_eintragen:before {
    content: "\e940";
    color: #808080;
  }
  .icon-BMO_Icons_Essen:before {
    content: "\e9a3";
    color: #808080;
  }
  .icon-BMO_Icons_Externer-Link:before {
    content: "\e913";
    color: #808080;
  }
  .icon-BMO_Icons_faceboook:before {
    content: "\e914";
    color: #808080;
  }
  .icon-BMO_Icons_Favoriten:before {
    content: "\f004";
    color: #808080;
  }
  .icon-BMO_Icons_Fotos-vorhanden:before {
    content: "\e949";
    color: #808080;
  }
  .icon-BMO_Icons_Freunde-werden:before {
    content: "\e915";
    color: #808080;
  }
  .icon-BMO_Icons_Gstehaus:before {
    content: "\f0f2";
    color: #808080;
  }
  .icon-BMO_Icons_gesperrt:before {
    content: "\f023";
    color: #808080;
  }
  .icon-BMO_Icons_gestrichelter-Kreis:before {
    content: "\e916";
    color: #808080;
  }
  .icon-BMO_Icons_Halbvoller-Kreis:before {
    content: "\e917";
    color: #808080;
  }
  .icon-BMO_Icons_Hamburgermen:before {
    content: "\e918";
    color: #808080;
  }
  .icon-BMO_Icons_Hilfe:before {
    content: "\a929";
    color: #808080;
  }
  .icon-BMO_Icons_Info:before {
    content: "\e919";
    color: #808080;
  }
  .icon-BMO_Icons_Instagram:before {
    content: "\ea92";
    color: #808080;
  }
  .icon-BMO_Icons_Israelreisen:before {
    content: "\e91a";
    color: #808080;
  }
  .icon-BMO_Icons_Kartei:before {
    content: "\a922";
    color: #808080;
  }
  .icon-BMO_Icons_Kinderbetreuung:before {
    content: "\e9df";
    color: #808080;
  }
  .icon-BMO_Icons_Kosten:before {
    content: "\e944";
    color: #808080;
  }
  .icon-BMO_Icons_Kreuz:before {
    content: "\a930";
    color: #808080;
  }
  .icon-BMO_Icons_Kursbeschreibung:before {
    content: "\e941";
    color: #808080;
  }
  .icon-BMO_Icons_Kursbuch:before {
    content: "\a932";
    color: #808080;
  }
  .icon-BMO_Icons_Kurse:before {
    content: "\a933";
    color: #808080;
  }
  .icon-BMO_Icons_Kursleiter:before {
    content: "\e976";
    color: #808080;
  }
  .icon-BMO_Icons_Leerer-Kreis:before {
    content: "\e91d";
    color: #808080;
  }
  .icon-BMO_Icons_Link:before {
    content: "\a936";
    color: #808080;
  }
  .icon-BMO_Icons_Listenansicht:before {
    content: "\e93b";
    color: #808080;
  }
  .icon-BMO_Icons_Livestream:before {
    content: "\f03d";
    color: #808080;
  }
  .icon-BMO_Icons_Logout:before {
    content: "\e91e";
    color: #808080;
  }
  .icon-BMO_Icons_lschen:before {
    content: "\e91f";
    color: #808080;
  }
  .icon-BMO_Icons_Lupe:before {
    content: "\e920";
    color: #808080;
  }
  .icon-BMO_Icons_Mediathek:before {
    content: "\e921";
    color: #808080;
  }
  .icon-BMO_Icons_Minus:before {
    content: "\e925";
    color: #808080;
  }
  .icon-BMO_Icons_Multiplikatoren:before {
    content: "\f20e";
    color: #808080;
  }
  .icon-BMO_Icons_nicht-anwesend:before {
    content: "\e93d";
    color: #808080;
  }
  .icon-BMO_Icons_nicht-sichtbar:before {
    content: "\e943";
    color: #808080;
  }
  .icon-BMO_Icons_online:before {
    content: "\f0ac";
    color: #808080;
  }
  .icon-BMO_Icons_Pfeil-hoch:before {
    content: "\e927";
    color: #808080;
  }
  .icon-BMO_Icons_Pfeil-links:before {
    content: "\e928";
    color: #808080;
  }
  .icon-BMO_Icons_Pfeil-rechts:before {
    content: "\e929";
    color: #808080;
  }
  .icon-BMO_Icons_Pfeil-runter:before {
    content: "\e92a";
    color: #808080;
  }
  .icon-BMO_Icons_Plus:before {
    content: "\e92b";
    color: #808080;
  }
  .icon-BMO_Icons_Postfach:before {
    content: "\e90d";
    color: #808080;
  }
  .icon-BMO_Icons_Praktika:before {
    content: "\f0b1";
    color: #808080;
  }
  .icon-BMO_Icons_Praktikumsstellen:before {
    content: "\f0b0";
    color: #808080;
  }
  .icon-BMO_Icons_Profil-anlegen:before {
    content: "\e973";
    color: #808080;
  }
  .icon-BMO_Icons_Profil:before {
    content: "\e92c";
    color: #808080;
  }
  .icon-BMO_Icons_Profileverzeichnis:before {
    content: "\e926";
    color: #808080;
  }
  .icon-BMO_Icons_Rasteransicht:before {
    content: "\e93c";
    color: #808080;
  }
  .icon-BMO_Icons_Schlieen:before {
    content: "\e92d";
    color: #808080;
  }
  .icon-BMO_Icons_Schriftstck .path1:before {
    content: "\a94f";
    color: rgb(128, 128, 128);
  }
  .icon-BMO_Icons_Schriftstck .path2:before {
    content: "\a950";
    margin-left: -1em;
    color: rgb(255, 255, 255);
  }
  .icon-BMO_Icons_Schriftstck .path3:before {
    content: "\a951";
    margin-left: -1em;
    color: rgb(255, 255, 255);
  }
  .icon-BMO_Icons_Schriftstck .path4:before {
    content: "\a952";
    margin-left: -1em;
    color: rgb(255, 255, 255);
  }
  .icon-BMO_Icons_Schriftstck .path5:before {
    content: "\a953";
    margin-left: -1em;
    color: rgb(255, 255, 255);
  }
  .icon-BMO_Icons_Schriftstck .path6:before {
    content: "\a954";
    margin-left: -1em;
    color: rgb(255, 255, 255);
  }
  .icon-BMO_Icons_Sekreteriat:before {
    content: "\e922";
    color: #808080;
  }
  .icon-BMO_Icons_Shop:before {
    content: "\e92f";
    color: #808080;
  }
  .icon-BMO_Icons_sichtbar:before {
    content: "\e930";
    color: #808080;
  }
  .icon-BMO_Icons_Smartphone:before {
    content: "\a958";
    color: #808080;
  }
  .icon-BMO_Icons_Sortierung-nach-oben:before {
    content: "\e931";
    color: #808080;
  }
  .icon-BMO_Icons_Sortierung-nach-unten:before {
    content: "\e932";
    color: #808080;
  }
  .icon-BMO_Icons_Sprechblase:before {
    content: "\e933";
    color: #808080;
  }
  .icon-BMO_Icons_Sprechblasen:before {
    content: "\e934";
    color: #808080;
  }
  .icon-BMO_Icons_Statisken:before {
    content: "\a95d";
    color: #808080;
  }
  .icon-BMO_Icons_Stern-halbvoll:before {
    content: "\a95e";
    color: #808080;
  }
  .icon-BMO_Icons_Stern-leer:before {
    content: "\a95f";
    color: #808080;
  }
  .icon-BMO_Icons_Stern-voll:before {
    content: "\a960";
    color: #808080;
  }
  .icon-BMO_Icons_Stundenplan:before {
    content: "\e924";
    color: #808080;
  }
  .icon-BMO_Icons_Telefon:before {
    content: "\a962";
    color: #808080;
  }
  .icon-BMO_Icons_Theme:before {
    content: "\a963";
    color: #808080;
  }
  .icon-BMO_Icons_Timeline:before {
    content: "\e945";
    color: #808080;
  }
  .icon-BMO_Icons_Tipp:before {
    content: "\a965";
    color: #808080;
  }
  .icon-BMO_Icons_Upload:before {
    content: "\e9c8";
    color: #808080;
  }
  .icon-BMO_Icons_Veranstaltungsort:before {
    content: "\e948";
    color: #808080;
  }
  .icon-BMO_Icons_Verantaltungen:before {
    content: "\e936";
    color: #808080;
  }
  .icon-BMO_Icons_Verfassen:before {
    content: "\e937";
    color: #808080;
  }
  .icon-BMO_Icons_Voller-Kreis:before {
    content: "\e938";
    color: #808080;
  }
  .icon-BMO_Icons_Warenkorb:before {
    content: "\e939";
    color: #808080;
  }
  .icon-BMO_Icons_warten:before {
    content: "\a96c";
    color: #808080;
  }
  .icon-BMO_Icons_wegwerfen:before {
    content: "\f014";
    color: #808080;
  }
  .icon-BMO_Icons_weiterleiten:before {
    content: "\f064";
    color: #808080;
  }
  .icon-BMO_Icons_WhatsApp:before {
    content: "\ea93";
    color: #808080;
  }
  .icon-BMO_Icons_YouTube:before {
    content: "\e93f";
    color: #808080;
  }
  .icon-BMO_Icons_Zeitabzug:before {
    content: "\e93e";
    color: #808080;
  }
  .icon-BMO_Icons_Zeugnis-erstellen:before {
    content: "\e946";
    color: #808080;
  }
  .icon-pause:before {
    content: "\e95e";
  }
  .icon-play:before {
    content: "\e95f";
  }
  .icon-send:before {
    content: "\e960";
  }
  
  
/* Slider */
.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    -moz-tap-highlight-color: transparent;
}
.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0!important;
    height: 100%;
}
.slick-list:focus {
    outline: none;
}
.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
    transform: translate3d(0, 0, 0);
}
.slick-track {
    overflow: hidden;
    height: 100%;
}
.slick-track:before,
.slick-track:after {
    display: table;
    content: '';
}
.slick-track:after {
    clear: both;
}
.slick-loading .slick-track {
    visibility: hidden;
}
.slick-slide {
    display: none;
    float: left;
    height: 100%;
    aspect-ratio: 1 / 1;
}
[dir='rtl'] .slick-slide {
    float: right;
}
.slick-slide img {
    display: block;
}
.slick-slide.slick-loading img {
    display: none;
}
.slick-slide.dragging img {
    pointer-events: none;
}
.slick-initialized .slick-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}
.slick-loading .slick-slide {
    visibility: hidden;
}
.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list
{
    background: #fff url('../../files/system/css/./ajax-loader.gif') center center no-repeat;
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('../../files/system/fonts/slick.eot');
    src: url('../../files/system/fonts/slick.eot?#iefix') format('embedded-opentype'), url('../../files/system/fonts/slick.woff') format('woff'), url('../../files/system/fonts/slick.ttf') format('truetype'), url('../../files/system/fonts/slick.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -25px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: var(--s);
}

.slick-dots
{
    position: absolute;
    bottom: var(--s);

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 1rem;
    height: 1.5rem;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 1rem;
    height: 1rem;
    padding: 0.2rem;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 1.5rem;
    line-height: 100%;

    position: absolute;
    top: 0;
    left: 0;

    width: 1rem;
    height: 1rem;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}