/*
0. normalize
1. framework
    1.1 containers
        1.1.1 resp regeln containers
    1.2 grids
        1.2.1 resp regeln grids
    1.3 fonts und headings 
	    1.3.1 responsive rules for fonts und headings 
    1.4 icons
    1.5 accordion
	    1.5.1 responsive rules accordion		
    1.6 slideshow
	    1.6.1 responsive rules slideshow
    1.7 imagewrap
    1.8 links
	    1.8.1 responsive rules links
    1.9 navigation
        1.9.1 responsive rules navigation
	    1.9.2 animationen responsive burger menu
        1.9.3 breadcrumb
    1.10 footer
        1.10.1 resp regeln
    1.11 custom controls
        1.11.1 ctaBox
            1.11.1.1 resp regeln ctaBox
        1.11.2 InfotileForUsers
            1.11.2.1 resp regeln InfotileForUsers
        1.11.3 ContactAreaBox
        1.11.4 ctaBoxForUsers
        1.11.5 Floating Elements
        1.11.6 InfotilesForCustomers
        1.11.7 Videoslideshow
        1.11.8 VideoGrid
        1.11.9 SubMenu
        1.11.10 LoginLightbox
        1.11.11 passwordResetAdditionalInformation
        1.11.12 anzeigenFormateGrid 

2. pages
    2.1 homepage
        2.1.1 paralaxeffects
        2.1.2 backgroundpatern
        2.2.1 responsive regeln

    2.2 Unternehmensbereich
        2.2.1 Übersicht
        2.2.2 Ads
        2.2.3 Engine
        2.2.4 Shows
        2.2.5 PrintUndDigital
        2.2.6 Jobcards
        2.2.7 scoolioForCompanies

    2.3 Schuelerbereich
        2.3.1 Übersicht / schüler app
        2.3.2 schulplaner
            2.3.2.1 resp regeln schulplaner
        2.3.3 scoolio pro
        2.3.4 gewinnspiele 
        2.3.5 Stundenplan App
        2.3.6 Hausaufgaben App
        2.3.7 Hausaufgaben KI

    2.4 Hilfe
        2.4.1 resp regeln Hilfe

    2.5 Team
        2.5.1 resp regeln Team

    2.6 Karriere
        2.6.1 Übersicht
            2.6.1.1 resp regeln Karriereübersicht
        2.6.2 Jobpage
            2.6.2.1 resp regeln jobpage

    2.8 Formpages
        2.8.1 resp Regeln Formpages
        2.8.2 FairdiscountForm       

    2.9 Blogs
        2.9.1 resp regeln Blogs 

    2.10 PromotionalOverviewPage
	2.10.1 resp regeln PromotionalOverviewPage   

    2.11 Datenschutz und Nutzungsbedinungen
    2.11.1 resp regeln Datenschutz und Nutzungsbedinungen

    2.12 Systemseiten
    2.12.1 resp regeln für systemseiten

    2.13. Berufswahltest
    2.13.1 resp regeln berufswahltet

/* 0. normalize */

html {
    position: relative;
    min-height: 100%;
}

body {
    margin: 0;
    position: relative;
    font-family: Titillium Web;
    background-color: #F5F4F7;
    color: #525252;
}

img {
    max-width: 100%;
}

.clearer {
    clear: both;
}

/* !normalize */
/* 1. framework */
/* 1.1 containers */

.contentElement {
    padding-bottom: 80px;
}

.centeredContent {
    text-align: center;
}

.colorfullBackground {
    background: transparent linear-gradient(330deg, #6A5AFF 0%, #FF5F5F 100%) 0% 0% no-repeat padding-box;
    color: #fff;
}

img.centeredImage {
    margin: 0 auto;
}

img.bigRoundedCorners {
    border-radius: 30px;
}

.contentwrap {
    padding: 0 5px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    max-width: 1390px;
}

.content {
    width: 100%;
    margin: 100px auto;
}

    .content.maxSize {
        max-width: 1390px;
    }

    .content.extraLarge {
        max-width: 980px;
    }

    .content.large {
        max-width: 920px;
    }

    .content.medium {
        max-width: 830px;
    }

    .content.small {
        max-width: 780px;
    }

    .content.tiny {
        max-width: 660px;
    }

    .content.smallMarginTop {
        margin-top: 50px;
    }

    .content.smallMarginBottom {
        margin-bottom: 50px;
    }

.mediumMargin {
    margin: 50px 0;
}

.contentContainer {
    width: 100%;
    max-width: 740px;
    margin: 25px auto;
    background-color: #fff;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border-radius: 30px;
    padding: 30px 40px;
    opacity: 1;
    box-sizing: border-box;
}

.contentContainerBlankBackground {
    width: 100%;
    max-width: 740px;
    margin: 25px auto;
    background-color: #fff;
    background: transparent;
    border-radius: 30px;
    padding: 30px 40px;
    opacity: 1;
    box-sizing: border-box;
}

.downloadLinks {
    max-width: 200px;
    margin: 0 auto;
}


/* 1.1.1 responsive rules containers */
@media screen and (max-width: 1270px) {
    .contentwrap {
        padding: 0 20px;
    }

    .content {
        margin: 0px auto 50px;
    }
}

/* !responsive rules containers */
/* !containers */
/* 1.2 grid */

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    padding-bottom: 25px;
    grid-auto-rows: minmax(100px, auto);
}

    .grid-container > div {
        background-color: #fff;
        padding: 40px;
        box-sizing: border-box;
        font-size: 30px;
        border-radius: 30px;
    }

        .grid-container > div > p {
            max-width: 660px;
        }

        .grid-container > div > a.buttonShaped.wideButton {
            margin: 0;
        }

.headGrid {
    display: flex; /* establish flex container */
    flex-direction: row; /* make main axis horizontal (default value) */
    justify-content: center; /* center items horizontally, in this case */
    align-items: center; /* center items vertically, in this case */

    margin-top: -70px;
    margin-bottom: -110px;
}

    .headGrid a.buttonShaped {
        margin: 0 0 20px;
    }

.headGridPanelOne {
    width: 260px;
}

.headGridPanelTwo {
    width: 620px;
}

.headGrid .headGridPanelTwo img {
    margin-right: -20px;
}

.dividingGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    padding-bottom: 25px;
    grid-auto-rows: minmax(10px, auto);
}

.threeImagesGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* 1.2.1 resp regeln grids */
@media screen and (max-width: 1270px) {
    .headGrid {
        margin-top: 0px;
        margin-bottom: -50px;
        margin-left: 60px;
    }
}

@media screen and (max-width: 640px) {
    .headGrid {
        display: block;
        margin-left: 0px;
    }

    .headGridPanelOne,
    .headGridPanelTwo {
        width: 100%;
    }

    .headGrid .headGridPanelTwo img {
        margin-top: 20px;
    }
}

/* !responsive rules grids */
/* !grids */
/* 1.3 fonts und headings  */

/* titillium-600 - latin */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/titillium-web-v15-latin-600.eot'); /* IE9 Compat Modes */
    src: local(''), url('../fonts/titillium-web-v15-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/titillium-web-v15-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/titillium-web-v15-latin-600.woff') format('woff'), /* Modern Browsers */
    url('../fonts/titillium-web-v15-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/titillium-web-v15-latin-600.svg#Titillium') format('svg'); /* Legacy iOS */
}

/* titillium-700 - latin */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/titillium-web-v15-latin-700.eot'); /* IE9 Compat Modes */
    src: local(''), url('../fonts/titillium-web-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/titillium-web-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/titillium-web-v15-latin-700.woff') format('woff'), /* Modern Browsers */
    url('../fonts/titillium-web-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/titillium-web-v15-latin-700.svg#Titillium') format('svg'); /* Legacy iOS */
}


@font-face {
    font-family: 'scoolioIcons';
    src: url('../fonts/scoolioicons.eot?47128223');
    src: url('../fonts/scoolioicons.eot?47128223#iefix') format('embedded-opentype'), url('../fonts/scoolioicons.woff2?47128223') format('woff2'), url('../fonts/scoolioicons.woff?47128223') format('woff'), url('../fonts/scoolioicons.ttf?47128223') format('truetype'), url('../fonts/scoolioicons.svg?47128223#scoolioicons') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'scoolioicons';
    src: url('../font/scoolioicons.svg?47128223#scoolioicons') format('svg');
  }
}
*/
[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "scoolioicons";
    font-style: normal;
    font-weight: normal;
    speak: never;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    /* opacity: .8; */
    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;
    /* fix buttons height, for twitter bootstrap */
    line-height: 1em;
    /* Animation center compensation - margins should be symmetric */
    /* remove if not needed */
    margin-left: .2em;
    /* you can be more comfortable with increased icons size */
    /* font-size: 120%; */
    /* Font smoothing. That was taken from TWBS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Uncomment for 3D effect */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-backarrow_down:before {
    content: '\e800';
}

.icon-backarrow_left:before {
    content: '\e801';
}

.icon-backarrow_right:before {
    content: '\e802';
}

.icon-average:before {
    content: '\e803';
}

.icon-average_color:before {
    content: '\e804';
}

.icon-checkmark:before {
    content: '\e805';
}

.icon-checkmark_round:before {
    content: '\e806';
}

.icon-community_on:before {
    content: '\e807';
}

.icon-backarrow_up:before {
    content: '\e808';
}

.icon-chat_plus:before {
    content: '\e809';
}

.icon-dashboard_on:before {
    content: '\e80a';
}

.icon-delete:before {
    content: '\e80b';
}

.icon-copy:before {
    content: '\e80e';
}

.icon-hausaufgabenhilfe_on:before {
    content: '\e80f';
}

.icon-heart:before {
    content: '\e810';
}

.icon-impressum:before {
    content: '\e811';
}

.icon-insta:before {
    content: '\e812';
}

.icon-facebook:before {
    content: '\e813';
}

.icon-pen:before {
    content: '\e814';
}

.icon-phone:before {
    content: '\e815';
}

.icon-phone-solid:before {
    content: '\e817';
}

.icon-new_discover_on:before {
    content: '\e818';
}

.icon-new_organisation_on:before {
    content: '\e819';
}

.icon-star_full:before {
    content: '\e81a';
}

.icon-submenu:before {
    content: '\e81b';
}

.icon-tiktok:before {
    content: '\e81c';
}

.icon-plus:before {
    content: '\e81d';
}

.icon-settings:before {
    content: '\e81e';
}

.icon-star:before {
    content: '\e81f';
}

/* !iconfont ends */


p.titilliumSemiBold {
    font: normal normal 400 19px/27px Titillium;
}

p.titilliumBold {
    font: normal normal bold 19px/27px Titillium;
}

h1.bigHeading {
    text-align: center;
    font: normal normal 600 55px/76px Titillium Web;
    letter-spacing: 0.55px;
    color: #525252;
    letter-spacing: 0.69px;
    margin: 30px 0 10px;
}

h1.fatheading {
    font: normal normal 600 69px/76px Titillium Web;
    letter-spacing: 0.69px;
}

h1.bigHeading.leftHeading {
    text-align: left;
}

h2.mediumHeading {
    text-align: center;
    font: normal normal 600 55px/76px Titillium Web;
    letter-spacing: 0.55px;
    margin: 0 0 30px;
    margin: 0 0 30px;
}

h2.normalHeading,
h3.normalHeading {
    font: normal normal 600 54px/60px Titillium Web;
    letter-spacing: 0.54px;
    margin: 0 0 30px;
}

h1.smallerHeading,
h2.smallerHeading,
h3.smallerHeading {
    font: normal normal 600 39px/43px Titillium Web;
    letter-spacing: 0.39px;
    margin: 0 0 10px;
}

h1.breadcrumb {
    font: normal normal 700 39px/43px Titillium Web;
    letter-spacing: 0.39px;
}

h3.normalHeading {
    font: normal normal 600 54px/60px Titillium Web;
    letter-spacing: 0.54px;
}

h2.smallHeading,
h3.smallHeading {
    font: normal normal 600 21px/24px Titillium Web;
    letter-spacing: 0.21px;
    margin: 0 0 10px;
}

.contentElement.headingOutOfGrid {
    margin: 100px auto 70px;
    padding: 0px;
}

h2.mediumHeading.headingOutOfGrid {
    margin: 80px auto 80px;
    padding: 0px;
}

strong.date {
    font: normal normal 600 45px/24px Titillium Web;
    letter-spacing: 0.45px;
    color: #525252;
    margin: 25px 0;
    display: inline-block;
}

.smallText {
    font: normal normal 600 12px/27px Titillium Web;
    letter-spacing: 0.12px;
    color: #525252;
}

.whiteFont {
    color: #fff;
}

.greenFont {
    color: #62D569;
}

.redFont {
    color: #FE5F60;
}

.colorMixFont {
    background: -webkit-linear-gradient(135deg, #6A5AFF 0%, #FB5F64 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: -1px;
}

.centeredtext {
    text-align: center;
}

a,
p a {
    text-decoration: none;
    color: #FE5F61;
}

    a.dontSeperate {
        display: inline-block;
    }

    a.underlined {
        text-decoration: underline;
    }

p {
    font: normal normal 600 19px/27px Titillium Web;
    margin: 0 0 24px;
}

    p.smallMarginBottom {
        margin: 0 0 8px;
    }


.contentElement > p {
    max-width: 770px;
    margin: 0 auto;
    display: inline-block;
}

ul.standardList {
    padding: 20px 0 0 40px;
    font-size: 19px;
}

    ul.standardList li {
        margin: 0 0 30px;
        font: normal normal 600 19px/27px Titillium Web;
        position: relative;
        list-style-type: none;
    }

        ul.standardList li:before {
            content: ' ';
            height: 15px;
            width: 22px;
            display: block;
            left: -38px;
            top: 4px;
            position: absolute;
            font-family: "scoolioicons";
            content: '\e805';
        }

a.markedBlue {
    text-decoration: underline;
    color: #2197D2;
}

input::placeholder {
    color: #A6A6A6;
}

span.extendedDistance {
    margin: 0 20px 40px;
    display: inline-block;
}

a.phoneNumber {
    color: #525252;
}

/* 1.3.1 responsive rules for fonts und headings  */
@media screen and (max-width: 1280px) {
    h1.bigHeading {
        margin: 0 0 40px;
    }
}

@media screen and (max-width: 640px) {
    h1.bigHeading {
        font: normal normal 600 55px/76px Titillium Web;
        letter-spacing: 0.55px;
    }

    h2.normalHeading,
    h3.normalHeading {
        letter-spacing: 0.39px;
        margin: 0 0 30px;
    }

    h1.fatheading,
    h2.normalHeading,
    h3.normalHeading,
    h2.mediumHeading {
        font: normal normal 600 32px/45px Titillium Web;
        letter-spacing: 0.39px;
    }

    span.extendedDistance {
        margin: 0 20px 20px;
        display: block;
        width: 60vw;
    }
}

@media screen and (max-width: 480px) {
    h1.bigHeading {
        font: normal normal 600 32px/45px Titillium Web;
        letter-spacing: 0.39px;
        font-size: 32px;
        line-height: 45px;
    }

    h2.normalHeading,
    h3.normalHeading {
        letter-spacing: 0.21px;
    }

    h1.smallerHeading,
    h2.smallerHeading,
    h3.smallerHeading {
        letter-spacing: 0.21px;
    }
}

/* !responsive rules for fonts */
/* !fonts */
/* 1.4 icons */

.bllWrap {
    width: 78px;
    display: inline-block;
    text-align: center;
    margin: 0 10px 0 5px;
}

.bll {
    height: 45px;
    width: auto;
}

/* !icons */
/* 1.5 accordion */

.acc-kontainer {
    width: 100%;
    margin: auto;
}

    .acc-kontainer > div {
        margin-bottom: 27px;
    }

    .acc-kontainer .acc-body {
        margin: 0 auto;
        height: 0;
        color: rgba(0, 0, 0, 0);
        background: #FFFFFF 0% 0% no-repeat padding-box;
        line-height: 28px;
        padding: 0 40px;
        box-sizing: border-box;
        transition: 0.5s;
        opacity: 0;
    }

    .acc-kontainer label {
        cursor: pointer;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 15px;
        font: normal normal 600 19px/27px Titillium Web;
        letter-spacing: 0.19px;
        display: block;
        padding: 10px 40px 5px 10px;
        margin-top: -15px;
        width: 100%;
        color: #525252;
        box-sizing: border-box;
        z-index: 100;
        display: flex;
        align-items: center;
        position: relative;
    }

    .acc-kontainer > div > input {
        display: none;
    }

    .acc-kontainer label:before {
        float: right;
        position: absolute;
        right: 20px;
        top: 30px;
        content: ' ';
        display: block;
        height: 13px;
        width: 23.6px;
        background-image: url('/imgs/icons/arrow_black.svg');
        background-size: cover;
    }

    .acc-kontainer input:checked + label {
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

        .acc-kontainer input:checked + label:before {
            transition: 0.5s;
            -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);
        }

    .acc-kontainer input:checked ~ .acc-body {
        height: auto;
        color: #525252;
        font-size: 16px;
        padding: 20px 40px;
        transition: 0.5s;
        position: relative;
        opacity: 1;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
    }

    .acc-kontainer .acc-body .accButton {
        position: absolute;
        right: 30px;
        bottom: 15px;
        width: 300px;
    }

    .acc-kontainer.blankAccordeon label {
        padding: 22px 40px;
    }

    .acc-kontainer.acc-kontainer input:checked ~ .acc-body {
        padding: 0 40px 20px;
    }

.schoolTypeText {
    cursor: pointer;
}

/* 1.5.1 responsive rules accordion */
@media screen and (max-width: 900px) {
    .acc-kontainer input:checked ~ .acc-body {
        padding-bottom: 100px;
    }

    .acc-kontainer .acc-body .accButton {
        position: absolute;
        left: 30px;
        bottom: 15px;
        width: calc(100% - 80px);
        max-width: 300px;
    }
}

@media screen and (max-width: 480px) {
    .bllWrap {
        position: absolute;
        left: -45px;
        top: 5px;
        display: none;
    }

    .acc-kontainer label {
        padding: 15px 60px 15px 40px;
        overflow: hidden;
    }
}

/* !responsive rules accordion */
/* !accordion */
/* 1.6 slideshow */

.contentElementSlider {
    padding-bottom: 0px;
}

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    margin-top: 60px;
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

    .slick-list:focus {
        outline: none;
    }

    .slick-list.dragging {
        cursor: pointer;
        cursor: hand;
    }

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

    .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%;
    min-height: 1px;
}

[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: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
    display: none;
}

.singleSlide {
    padding: 7px;
    box-sizing: border-box;
    background-color: #F5F4F7;
    margin: 0 30px;
    border-radius: 37px;
    width: 400px;
    transition: all 2s;
}

    .singleSlide > div {
        background-color: #fff;
        padding: 30px 30px 30px 50px;
        border-radius: 30px;
    }

    .singleSlide.slick-current {
        background: transparent linear-gradient(140deg, #9C8EFE 0%, #ECBAE3 35%, #AAA9FE 69%, #EFB9E1 100%) 0% 0% no-repeat padding-box;
        transition: all 2s;
    }

    .singleSlide > div img {
        margin-bottom: 20px;
    }

.slick-prev,
.slick-next {
    position: absolute;
    top: 140px;
    height: 100px;
    width: 50px;
    display: block;
    color: #525252;
    z-index: 100;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 64px;
    text-shadow: 0px 0px 10px white;
}

.slick-prev {
    left: -20px;
}

.slick-next {
    right: 5px;
}

.slick-prev:before {
    font-family: "scoolioicons";
    content: '\e801';
}

.slick-next:before {
    font-family: "scoolioicons";
    content: '\e802';
}


/* 1.6.1 responsive rules slideshow */
@media screen and (max-width: 1270px) {
    .contentElementSlider {
        padding-bottom: 60px;
    }
}

@media screen and (max-width: 480px) {
    .singleSlide {
        width: 280px;
    }

        .singleSlide > div {
            padding: 20px;
        }
}

/* !slideshow responsive rules */
/* !slideshow */
/* 1.7 imagewrap */

.imageWrap {
    display: flex;
    justify-content: center;
}

/* !imagewrap */
/* 1.8 links */

button.buttonShaped,
a.buttonShaped {
    background: transparent linear-gradient(90deg, #6A5AFF 0%, #FF5F5F 100%) 0% 0% no-repeat padding-box;
    border-radius: 15px;
    color: #fff;
    margin: 12px;
    width: 200px;
    height: 58px;
    font: normal normal bold 19px/58px Titillium Web;
    letter-spacing: 0.19px;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    border: none;
    transition: all 1s;
}

    button.buttonShaped:hover,
    a.buttonShaped:hover {
        background: transparent linear-gradient(270deg, #5D36EE 0%, #5D36EE 100%) 0% 0% no-repeat padding-box;
        transition: all 1s;
    }

    button.buttonShaped.wideButton,
    a.buttonShaped.wideButton {
        width: 300px;
    }


a.greenButton {
    background: #62D569 0% 0% no-repeat padding-box;
    border-radius: 15px;
    color: #fff;
    text-decoration: none;
    letter-spacing: 0.19px;
    height: 58px;
    text-align: center;
    display: inline-block;
    width: 260px;
}

a.whiterainbowbutton {
    background: #fff 0% 0% no-repeat padding-box;
    border-radius: 15px;
    color: #000;
    margin: 30px 0;
}

    a.whiterainbowbutton p {
        background-image: linear-gradient(150deg, #6A5AFF 0%, #FF5F5F 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font: normal normal bold 19px/58px Titillium Web;
    }


    a.whiterainbowbutton:hover {
        background: transparent linear-gradient(150deg, #6A5AFF 0%, #FF5F5F 100%) 0% 0% no-repeat padding-box;
    }

        a.whiterainbowbutton:hover p {
            color: #fff;
            -webkit-text-fill-color: #fff;
        }

a.normalBlueLink {
    color: #2197D2;
    text-decoration: none;
    letter-spacing: 0.19px;
}

/* 1.8.1 responsive rules links */

@media screen and (max-width: 640px) {
    a.buttonShaped.wideButton {
        width: 100%;
        max-width: 300px;
        line-height: 36px;
        padding: 12px 12px;
        margin: 10px auto;
        height: auto;
        display: inline-block;
        box-sizing: border-box;
    }
}
/* !responsive rules links */
/* !links */
/* 1.9 navigation */

.navigationContentWrap {
    width: 100%;
    max-width: 1390px;
    padding: 0 5px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.menu {
    position: relative;
    font: normal normal bold 16px/27px Titillium Web;
    letter-spacing: 0.16px;
    z-index: 200;
}

    .menu ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .menu,
    .menu a {
        color: #525252;
        text-decoration: none;
    }

        .menu a.instaIcon {
            padding-bottom: 0;
        }

        .menu .instaIcon img {
            width: 18px;
            height: auto;
            margin: 0 0 -2px;
        }

        .menu img.whiteIcon {
            display: none;
        }

        .menu img.darkIcon {
            display: block;
        }

        .menu a.instaIcon {
            padding: 15px 0 15px 25px;
        }

.loginButton {
    width: 160px;
    height: 38px;
    display: block;
    line-height: 38px;
    text-align: center;
    background: transparent linear-gradient(90deg, #6A5AFF 0%, #FF5F5F 100%) 0% 0% no-repeat padding-box;
    border-radius: 15px;
    color: #fff;
    margin-top: 24px;
    position: absolute;
    top: 0px;
    right: 0px;
    color: #525252;
}


.menu button.loginButton,
.menu a.loginButton {
    padding: 0;
    color: #fff;
    border: none;
    cursor: pointer;
    font-family: "Titillium Web";
    font-size: 16px;
}

#transparentNavigation .menu a {
    color: #fff;
    text-align: center;
}

#transparentNavigation .menu-hasdropdown > ul > li > a {
    color: #525252;
}

.menu a {
    display: block;
    white-space: nowrap;
    text-align: center;
}

.menu-dropdown,
.menu input[type=checkbox] {
    display: none;
}

.menu label:hover {
    cursor: pointer;
}

#transparentNavigation .menu img.darkIcon {
    display: none;
}

#transparentNavigation .menu img.whiteIcon {
    display: block;
}

/* 1.9.1 responsive rules navigation */
@media screen and (max-width: 1270px) {
    .menu > ul, .menu-righticon {
        display: none;
    }

    input[type=checkbox] ~ ul {
        transition: all .3s;
    }

    input[type=checkbox] ~ a label i {
        transition: all .3s;
    }

    input[type=checkbox]:checked ~ ul {
        display: block;
        -webkit-animation: grow 0.5s ease-in-out;
        animation: grow 0.5s ease-in-out;
    }

    input[type=checkbox]:checked ~ a label i {
        transform: rotate(90deg);
        transition: transform .3s;
    }


    #transparentNavigation #mainNavigationLinks {
        background-color: #fff;
    }

    #transparentNavigation div#navigationLogo > a {
        background-image: url('../imgs/websiteFramework/scoolio-Logo.svg');
    }

    #transparentNavigation input[type=checkbox]:checked ~ div#navigationLogo > a {
        background-image: url('../imgs/websiteFramework/scoolio-Logo.svg');
    }

    ul#mainNavigationLinks {
        padding-top: 100px;
    }

    li#furtherMobileNavigation {
        background-color: #100F4E;
        color: #fff;
        padding: 25px 20px;
        box-sizing: border-box;
    }

    #transparentNavigation .menu a,
    .menu a {
        color: #525252;
    }

    li#furtherMobileNavigation strong {
        text-align: left;
        letter-spacing: 0.2px;
        color: #2197D2;
    }

    .menu li#furtherMobileNavigation a {
        padding: 15px 0px;
        color: #fff;
    }

    #content {
        padding-top: 100px;
        overflow: hidden;
    }

    #navigationLogo > a {
        width: 135px;
        height: 30px;
        margin: 15px auto;
        padding: 0;
        display: block;
        background-image: url('../imgs/websiteFramework/scoolio Logo 2026.svg');
        background-size: cover;
    }
}

@media screen and (min-width: 1271px) {
    .menu > label,
    input[type=checkbox] {
        display: none;
    }

    li#furtherMobileNavigation {
        display: none;
    }

    .menu a {
        padding: 15px 18px;
    }

    .menu > ul > li {
        display: inline-block;
    }

    .menu-hasdropdown {
        position: relative;
    }

        .menu-hasdropdown:hover > ul {
            display: block;
            -webkit-animation: grow 0.5s ease-in-out;
            animation: grow 0.5s ease-in-out;
            padding-top: 10px;
        }

        .menu-hasdropdown > ul {
            position: absolute;
            top: 100%;
            left: 0;
            background-image: url('../imgs/icons/dreieck.png');
            background-size: 30px 10px;
            background-position: center top;
            background-repeat: no-repeat;
            z-index: 100;
        }

            .menu-hasdropdown > ul > li {
                background-color: #fff;
            }

    li.menu-hasdropdown:nth-child(1) > ul:nth-child(3) {
        margin-left: -33px;
    }

    li.menu-hasdropdown:nth-child(2) > ul:nth-child(3) {
        margin-left: -2px;
    }

    li.menu-hasdropdown:nth-child(3) > ul:nth-child(3) {
        margin-left: -47px;
    }

    li.menu-hasdropdown:nth-child(4) > ul:nth-child(3) {
        margin-left: -10px;
    }

    li.menu-hasdropdown:nth-child(2) > ul > li:hover > ul {
        display: block;
        position: absolute;
        left: 149px;
        top: 10px;
        background-color: #fff;
    }

    .menu-hasflyout > ul {
        left: 100%;
        top: 0;
    }

    .menu-hasflyout .menu-downicon {
        display: none;
    }

    #navigationLogo > a {
        width: 135px;
        margin-top: 28px;
        height: 30px;
        padding: 0;
        display: block;
        background-image: url('../imgs/websiteFramework/scoolio Logo 2026.svg');
        background-size: cover;
    }

    #transparentNavigation #navigationLogo > a {
        background-image: url('../imgs/websiteFramework/scoolio Logo 2026.svg');
    }
}

/*  1.9.1.1 animationen responsive burger menu */

@-webkit-keyframes grow {
    0% {
        display: none;
        opacity: 0;
    }

    50% {
        display: block;
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

@keyframes grow {
    0% {
        display: none;
        opacity: 0;
    }

    50% {
        display: block;
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

.menu-dropdown a {
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/*  !animationen responsive burger menu */

@media screen and (max-width: 1270px) {

    .navigationContentWrap {
        padding: 0;
    }

    .menu > label {
        display: block;
        padding: 15px 20px;
        box-sizing: border-box;
        text-align: left;
        width: 70px;
        height: 70px;
        float: left;
        position: absolute;
        left: 0px;
        top: 0px;
    }

    .burgerIcon {
        background-image: url('/imgs/icons/burger_black.svg');
        content: ' ';
        width: 30px;
        height: 30px;
        display: block;
    }

    #transparentNavigation .burgerIcon {
        background-image: url('/imgs/icons/burger_white.svg');
    }

    input[type=checkbox]#menu:checked ~ label .burgerIcon {
        background-image: url('/imgs/icons/close_black.svg');
        background-size: cover;
    }

    .loginButton {
        color: #525252;
        background: none;
        top: -12px;
    }

    .menu button.loginButton {
        color: #525252;
    }

    #transparentNavigation .menu a.loginButton {
        color: #fff;
    }

    input[type=checkbox]#menu:checked ~ #navigationLogin .loginButton {
        color: #525252;
    }

    .loginButton {
        text-align: right;
        right: 20px;
    }

    .menu > #navigationLogo {
        position: absolute;
        left: 90px;
        right: 90px;
        top: 0;
        height: 70px;
        width: calc(100% - 180px);
    }

    #transparentNavigation .menu a.loginButton,
    .menu a.loginButton {
        text-align: right;
    }

    #transparentNavigation .menu a,
    .menu a {
        text-align: left;
    }

    .menu > #navigationLogin {
        position: absolute;
        right: 0px;
        top: 0;
        height: 70px;
        width: 90px;
    }

    .menu a {
        padding: 15px 20px;
    }

    .menu > ul i {
        float: right;
        padding: 5px 10px;
    }

    .fa-caret-down {
        background-image: url('/imgs/icons/arrow_black.svg');
        background-size: cover;
        content: ' ';
        display: block;
        margin-top: -2px;
        height: 6px;
        width: 10px;
    }

    .menu-dropdown a {
        padding-left: 50px;
    }

    .menu-dropdown .menu-dropdown a {
        padding-left: 80px;
    }

    .menu-hasflyout > ul a {
        background: #023d5b;
    }

    .instLink {
        display: none;
    }
}

@media screen and (min-width: 1271px) {
    .menu {
        margin: 0 auto;
    }

    #mainNavigationLinks {
        width: 865px;
        margin: 0 auto;
        padding-top: 15px;
    }

    .menu > #navigationLogo {
        position: absolute;
        left: 0;
        top: 0;
        height: 60px;
        width: 225px;
    }

    .menu > #navigationLogin {
        position: absolute;
        right: 0px;
        top: 0;
        height: 70px;
        width: 120px;
    }
}

/* !responsive rules navigation */
/* 1.9.3 breadcrumb */

.breadcrumb,
.breadcrumb a {
    font: normal normal 600 19px/27px Titillium Web;
    color: #B5B5B5;
    text-decoration: none;
    letter-spacing: 0.19px;
    margin: 0;
}

    .breadcrumb a.breadcrumbLastItem {
        text-transform: capitalize;
    }

/* !breadcrumb */
/* !navigation */
/* 1.10 footer */

#footerNavigationLinks .flex-container {
    display: flex;
    margin: 0 -15px;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
}

#footerNavigationLinks .flex-item {
    padding: 0 15px;
    box-sizing: border-box;
}

    #footerNavigationLinks .flex-item ul {
        margin: 0 0 35px;
        list-style: none;
        padding-left: 0;
    }

        #footerNavigationLinks .flex-item ul li:first-child {
            font-weight: 900;
            margin-left: 0;
            padding-left: 0;
        }

        #footerNavigationLinks .flex-item ul li,
        #footerNavigationLinks .flex-item ul li a {
            color: #525252;
            text-decoration: none;
            line-height: 35px;
        }

#footerNavigationLinks #footerLogo {
    width: 35px;
    height: 35px;
    margin-top: 10px;
    margin-bottom: 20px;
    background-position: -61px -42px;
    background-size: 200px 100px;
    background-image: url('../imgs/websiteFramework/scoolio-Logo.svg');
}

.withLoveTag {
    margin-top: 75px;
    margin-bottom: -25px;
}

.footerLastLine {
    margin-bottom: 25px;
}

.transparentFooterNavigation .footerLastLine {
    color: #fff;
}

/* 1.10.1 resp regeln footer */

@media screen and (max-width: 1450px) {
    #footerNavigationLinks {
        padding: 0 0px 0 25px;
    }
}

@media screen and (max-width: 1220px) {
    #footerNavigationLinks .flex-item {
        flex: 33.33%;
    }

    #footerNavigationLinks > div.flex-container > div:nth-child(2) {
        order: 4;
        margin-top: -105px;
    }

    #footerNavigationLinks > div.flex-container > div:nth-child(4) {
        order: 2;
    }

    #footerNavigationLinks > div.flex-container > div:nth-child(3) {
        order: 3;
    }

    #footerNavigationLinks > div.flex-container > div:nth-child(5) {
        order: 5;
        margin-top: -70px;
    }

    #footerNavigationLinks > div.flex-container > div:nth-child(6) {
        order: 6;
        margin-top: -35px;
    }
}

@media screen and (max-width: 770px) {
    #footerNavigationLinks .flex-item {
        flex: 50%;
    }

    div.flex-item:nth-child(6) {
        margin-top: -20px;
    }

    .withLoveTag {
        left: 0;
        position: absolute;
        margin: 15px 0 0 15px;
    }

    .footerLastLine {
        margin-top: 40px;
        margin-bottom: 25px;
    }


    #footerNavigationLinks > div.flex-container > div:nth-child(2) {
        order: 5;
        margin-top: -35px;
    }

    #footerNavigationLinks > div.flex-container > div:nth-child(3) {
        order: 3;
        margin-top: -105px;
    }

    #footerNavigationLinks > div.flex-container > div:nth-child(4) {
        order: 2;
    }

    #footerNavigationLinks > div.flex-container > div:nth-child(5) {
        order: 4;
        margin-top: -70px;
    }

    #footerNavigationLinks > div.flex-container > div:nth-child(6) {
        order: 6;
        margin-top: 0;
    }
}

@media screen and (max-width: 530px) {
    #footerNavigationLinks .flex-item {
        flex: 100%;
    }

    #footerNavigationLinks {
        padding: 0 25px;
    }

    div.flex-item:nth-child(6) {
        margin-top: 0px;
    }

    #footerNavigationLinks > div.flex-container > div:nth-child(2) {
        order: 2;
        margin-top: 0;
    }

    #footerNavigationLinks > div.flex-container > div:nth-child(3) {
        order: 3;
        margin-top: 0;
    }

    #footerNavigationLinks > div.flex-container > div:nth-child(4) {
        order: 4;
        margin-top: 0;
    }

    #footerNavigationLinks > div.flex-container > div:nth-child(5) {
        order: 5;
        margin-top: -70px;
    }

    #footerNavigationLinks > div.flex-container > div:nth-child(6) {
        order: 6;
        margin-top: 0;
    }
}

/* !footer responsive ruleset */
/* !footer */
/* 1.11 custom controls */
/* 1.11.1 ctaBox */

.ctaBox {
    background-color: #fff;
    border-radius: 30px;
    padding: 30px;
    box-sizing: border-box;
}

.ctaBoxForCustomers {
    background: transparent linear-gradient(150deg, #6A5AFF 0%, #FF5F5F 100%) 0% 0% no-repeat padding-box;
    border-radius: 30px;
}

    .ctaBoxForCustomers img {
        display: block;
        margin: 60px 0 20px;
    }

    .ctaBoxForCustomers a {
        display: block;
        width: 100%;
        text-align: center;
        background-color: #fff;
        color: #000;
    }

.ctaLeft {
    float: left;
}

.ctaRight {
    float: right;
}

.ctaBoxCustomers {
    text-align: center;
}

    .ctaBoxCustomers .ctaLeft,
    .ctaBoxCustomers .ctaRight {
        float: none;
        margin: 0 auto;
    }

.ctaText {
    font: normal normal 600 19px/27px Titillium Web;
}

.ctaBoxCustomers .ctaText {
    width: 100%;
    display: block;
    text-align: center;
    margin: 20px auto;
}

.bubbleFace {
    border-radius: 50px;
    margin: 12px 10px -22px 0;
    width: 59px;
    height: 59px;
}

/* 1.11.1.1 resp regeln ctaBox */

@media screen and (max-width: 1130px) {
    .ctaBox {
        text-align: center;
    }

    .ctaLeft,
    .ctaRight {
        float: none;
        margin: 0 auto;
    }

    .ctaText {
        width: 100%;
        display: block;
        text-align: center;
        margin: 20px auto;
    }
}

/* !resp regeln ctaBox */
/* !ctaBox */

/* 1.11.2 InfotileForUser */
.allTilesForUsers {
}

.infoTileForUsers > p {
    min-height: 84px;
}

.infoTileForUsers a {
    border-radius: 15px;
    max-width: 260px;
    margin: 30px auto;
}

.infoTileForUsers a {
    display: block;
    width: 100%;
    text-align: center;
    color: #fff;
    text-decoration: none;
    background: transparent linear-gradient(90deg, #6A5AFF 0%, #FF5F5F 100%) 0% 0% no-repeat padding-box;
}

    .infoTileForUsers a p {
        color: #fff;
        font: normal normal bold 19px/58px Titillium Web;
    }

.threeTilesForUsers .infoTileForUsers:nth-child(2n+1),
.threeTilesForUsers .infoTileForUsers:nth-child(odd) {
    background: transparent linear-gradient(330deg, #6A5AFF 0%, #FF5F5F 100%) 0% 0% no-repeat padding-box;
    color: #fff;
}

    .threeTilesForUsers .infoTileForUsers:nth-child(2n+1) a,
    .threeTilesForUsers .infoTileForUsers:nth-child(odd) a {
        display: block;
        width: 100%;
        text-align: center;
        background: #fff;
        text-decoration: none;
    }

        .threeTilesForUsers .infoTileForUsers:nth-child(2n+1) a p,
        .threeTilesForUsers .infoTileForUsers:nth-child(odd) a p {
            background-image: linear-gradient(150deg, #6A5AFF 0%, #FF5F5F 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font: normal normal bold 19px/58px Titillium Web;
        }

.infoTileForUsers:nth-child(2n+1),
.infoTileForUsers:nth-child(odd) {
    background: transparent linear-gradient(330deg, #6A5AFF 0%, #FF5F5F 100%) 0% 0% no-repeat padding-box;
    color: #fff;
}

    .infoTileForUsers:nth-child(2n+1) a,
    .infoTileForUsers:nth-child(odd) a {
        display: block;
        width: 100%;
        text-align: center;
        background: #fff;
        text-decoration: none;
    }

        .infoTileForUsers:nth-child(2n+1) a p,
        .infoTileForUsers:nth-child(odd) a p {
            background-image: linear-gradient(150deg, #6A5AFF 0%, #FF5F5F 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font: normal normal bold 19px/58px Titillium Web;
        }

.grid-container > div.infoTileForUsers {
    text-align: center;
    position: relative;
    overflow: hidden;
    padding-bottom: 0;
}

.infoTileForUsers p {
    margin: 30px 0;
}

.infoTileForUsers img {
    margin-bottom: -120px;
    max-width: calc(100% + 100px);
    width: calc(100% + 100px);
    margin-left: -40px;
}

/* 1.11.2.1 tile slideshow */

.infoTileForUsers.slick-slide {
    text-align: center;
    position: relative;
    overflow: hidden;
    padding-bottom: 0;
    max-width: 444px;
    padding: 40px 40px 0;
    box-sizing: border-box;
    font-size: 30px;
    background-color: #fff;
    border-radius: 30px;
    margin: 0 12.5px;
}

/* !tile slideshow */
/* 1.11.2.2 resp regeln InfotileForUser  */

@media screen and (max-width: 1100px) {
    .content.maxSize.threeTilesForUsers {
        grid-template-columns: repeat(1, 1fr);
        max-width: 540px;
        margin: 0 auto;
    }
}

@media screen and (max-width: 640px) {
    .infoTileForUsers.slick-slide {
        max-width: 320px;
    }
}

/* !resp regeln InfotileForUser */
/* !InfotileForUser */

/* 1.11.3 ContactAreaBox */

.contactAreaBox {
    background-color: #fff;
    border-radius: 30px;
    padding: 30px;
    box-sizing: border-box;
}

/* 1.11.3.1 resp Regeln ContactAreaBox */
/* !resp resp Regeln ContactAreaBox */
/* !ContactAreaBox */

/* 1.11.4 ctaBoxForUsers */


.ctaBoxForUser {
    background-color: #200c4b;
}

    .ctaBoxForUser img {
        margin: 0 auto 20px;
        display: block;
    }

        .ctaBoxForUser img.shopLogo {
            width: 100%;
            max-width: 240px;
        }

/* !ctaBoxForUsers */
/* 1.11.5 Floating Elements */
@keyframes floatingOne {
    0% {
        transform: translatey(0px);
    }

    50% {
        transform: translatey(-20px);
    }

    100% {
        transform: translatey(0px);
    }
}

@keyframes floatingTwo {
    0% {
        transform: translatey(0px);
    }

    50% {
        transform: translatey(10px);
    }

    100% {
        transform: translatey(0px);
    }
}

.floatingOne {
    transform: translatey(0px);
    animation: floatingOne 6s ease-in-out infinite;
}

.floatingTwo {
    transform: translatey(0px);
    animation: floatingTwo 5s ease-in-out infinite;
}

/* !floating Elements */

/* 1.11.6 InfotileForCustomers */
.threeTilesForCustomers {
    gap: 60px;
}

.grid-container > div.infoTileForCustomers {
    padding: 40px 0;
}

.infoTileForCustomers > p {
    min-height: 84px;
}

.infoTileForCustomers a {
    border-radius: 15px;
    max-width: 260px;
    margin: 30px auto;
}

.infoTileForCustomers a {
    display: block;
    width: 100%;
    text-align: center;
    color: #fff;
    text-decoration: none;
    background: transparent linear-gradient(90deg, #6A5AFF 0%, #FF5F5F 100%) 0% 0% no-repeat padding-box;
}

    .infoTileForCustomers a p {
        color: #fff;
        font: normal normal bold 19px/58px Titillium Web;
    }

.grid-container > div.infoTileForCustomers {
    text-align: center;
    position: relative;
    overflow: hidden;
    padding-bottom: 140px;
    gap: 60px;
}

.infoTileForCustomers p {
    margin: 30px auto;
    max-width: 80%;
}

.infoTileForCustomers img {
    margin-bottom: -80px;
    max-width: calc(100% + 100px);
    width: calc(100% + 100px);
    margin-left: -40px;
}

.customerInfoTileBottom {
    font-size: 24px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

    .customerInfoTileBottom span {
        font: normal normal 600 19px/39px Titillium Web;
        letter-spacing: 0.19px;
        display: block;
        height: 27px;
        padding: 12px 0 12px;
    }

        .customerInfoTileBottom span.small {
            font: normal normal 600 12px/39px Titillium Web;
            letter-spacing: 0.12px;
            padding: 0 0 24px;
            margin: -6px 0 0;
        }

    .customerInfoTileBottom strong {
        font: normal normal 600 39px/32px Titillium Web;
        letter-spacing: 0.39px;
        height: 44px;
    }


.whiteOnColor {
    background: transparent linear-gradient(107deg, #6A5AFF 0%, #FF5F5F 100%) 0% 0% no-repeat padding-box;
    color: #fff;
}

.whiteOnDarkGrey {
    color: #fff;
    background-color: #525252;
}

/* responsive 3 tiles for customers */

@media screen and (max-width: 900px) {
    .threeTilesForCustomers.grid-container {
        gap: 60px;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 25px;
        padding-bottom: 25px;
        grid-auto-rows: minmax(100px, auto);
    }
}

/* !responsive 3 tiles for customers */
/* !InfotileForCustomers */
/* 1.11.7 Videoslideshow */
/* 1.11.8 VideoGrid */

.videoGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    position: relative;
    text-align: center;
}

    .videoGrid video,
    .videoGrid .video {
        width: 100%;
        overflow: hidden;
        border-radius: 30px;
    }

/* 1.11.9 SubMenu */

.subMenu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
}

    .subMenu a {
        float: left;
        margin-right: 30px;
        color: #525252;
        font-size: 15px;
        margin-bottom: 15px;
        text-decoration: none;
    }

    .subMenu .active a {
        color: #ff5b5e;
    }

/* !SubMenu */
/* 1.11.10 LoginLightBox */

#dynamicLightboxBackgroundFrame {
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(10, 10, 10, 0.5); /* Green background with 30% opacity */
    z-index: 200;
    top: 0;
    left: 0;
    display: none;
}

#dynamicLightboxInnerWrap {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    background-color: #fff;
    opacity: 1;
    transition: all 0.5s ease-out,opacity 1s ease-out;
    padding: 20px 60px 10px;
    -webkit-box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 75%);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 75%);
    z-index: 2000;
    width: 60%;
    max-width: 480px;
}

#dynamicLightbox_close {
    position: absolute;
    right: -20px;
    top: -20px;
    height: 40px;
    width: 40px;
    margin: 0 0 0 160px;
    background-color: #fff;
    font-weight: 700;
    font-size: 24px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    border-radius: 50px;
    border: 2px solid #525252;
    color: #525252;
    font-family: 'scoolioIcon';
    transform: rotate( 45deg );
}

    #dynamicLightbox_close i {
        left: 2px;
        top: -2px;
        position: absolute;
    }

#loginContainer p {
    margin: 12px 0 0;
}

#loginContainer a {
    margin: 12px 0 36px;
}

/* !LoginLightBox */
/* 1.11.11 passwordResetAdditionalInformation */

.passwordResetAdditionalInformation ul,
.passwordResetAdditionalInformation li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/* !passwordResetAdditionalInformation */
/* 1.11.12 anzeigenformategrid */

/* 1.11.12 responsive regeln anzeigenformategrid  */
@media screen and (max-width: 1300px) {
    .grid-container.anzeigenFormateGrid {
        grid-template-columns: 1fr;
        margin: 0 auto;
        width: 100%;
        max-width: 640px;
    }
}
/* !responsive regeln anzeigenformategrid  */
/* anzeigenformategrid */
/* !custom controls */
/* !framework */
/* 2. pages */
/* 2.1 homepage */

#ntvsiegel_hp {
    position: relative;
    width: 100%;
    height: 1px;
}
#ntvsiegel_hp img{
    position: absolute;
    left: 50%;
    top: 20px;
    width: 120px;
    height: auto;
    margin-left: -60px;
    z-index: 2000;
}

/* 2.1.1 paralaxeffects */
#parallax {
    position: relative;
    width: 100%;
    height: 100vh;
    max-height: 800px;
    background-image: url(../imgs/websiteFramework/Startseite_Handy_Dashboard.png), url(../imgs/websiteFramework/Startseite_Handy_Discover.png), url(../imgs/websiteFramework/Startseite_Handy_Stundenplan.png), url(../imgs/websiteFramework/hp_logo.png);
    background-repeat: no-repeat;
    background-position: center;
    background-position: 50% 50%;
}

@media screen and (min-width: 1271px) {
    #parallaxSubstitutionImage {
        display: none;
    }

    #parallax {
        display: block;
    }
}

@media screen and (max-width: 1270px) {
    #parallaxSubstitutionImage {
        display: block;
        padding: 40px 20px;
        max-width: 600px;
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
    }

        #parallaxSubstitutionImage img {
            width: 100%;
            height: auto;
        }

    #parallax {
        display: none;
    }
}

#alternativDesign {
    width: 100%;
    max-width: 600px;
    margin: 50px auto 100px;
    position: relative;
    padding: 0;
    display: block;
    list-style-type: none;
}

    #alternativDesign > li:nth-child(1) {
        position: absolute;
        z-index: 3;
        left: 0;
        top: 20px;
        width: 100px;
        animation: floatingOne 7s ease-in-out infinite;
    }

        #alternativDesign > li:nth-child(1) a {
            transform: rotate(350deg);
            display: inline-block;
            z-index: 5;
            position: relative;
            display: block;
            width: 266px;
        }

    #alternativDesign > li:nth-child(2) {
        position: relative;
        margin: 0 auto;
        max-width: 268px;
        width: 100%;
        display: block;
        z-index: 2;
        animation: floatingTwo 5s ease-in-out infinite;
    }

        #alternativDesign > li:nth-child(2) a {
            display: inline-block;
            z-index: 10;
            position: relative;
        }

    #alternativDesign > li:nth-child(3) {
        position: absolute;
        right: 0;
        top: 30px;
        z-index: 1;
        animation: floatingOne 3s ease-in-out infinite;
    }

        #alternativDesign > li:nth-child(3) a {
            transform: rotate(10deg);
            display: inline-block;
            z-index: 1;
            position: relative;
        }

/* !paralaxeffects */
/* 2.1.2 backgroundpatern */
#backgroundHomepagePattern {
    position: fixed;
    z-index: -1;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    background-color: #fff;
    background-image: url(../imgs/websiteFramework/hp_background.png);
    background-repeat: repeat;
    background-position: center;
    background-position: 50% 50%;
}

/* !backgroundmovie */

h1.homepageHeading {
    letter-spacing: 0.69px;
}

/* 2.2.1 responsive regeln */

#alternativDesign > img:nth-child(2) {
    position: relative;
    margin: 0 auto;
    z-index: 2;
    width: 480px;
    display: block;
    animation: floatingTwo 5s ease-in-out infinite;
}

#alternativDesign {
    margin: 50px auto 50px;
}

/* responsive regeln */

@media screen and (max-width: 640px) {
    #alternativDesign > img:nth-child(1) {
        display: none;
    }

    #alternativDesign > img:nth-child(3) {
        display: none;
    }
}

/* !homepage */
/* 2.2 Unternehmensbereich */
/* 2.2.1 Übersicht Unternehmen*/

#scoolioForCustomersHeadGridPanel {
    margin-bottom: 0;
}

#scoolioForCustomersHeadGridPanel .headGridPanelOne {
    width: 300px;
    padding: 15px;
}

#scoolioForCustomersHeadGridPanel .headGridPanelTwo {
    position: relative;
    margin-bottom: 30px;
    padding: 30px;
    width: 720px;
}

#scoolioForCustomersHeadGridPanel .headGridPanelTwo video {
    width: 100%;
    max-width: 730px;
    border-radius: 10px;
}


#scoolioForCustomersHeadGridPanel #begleitBild {
    position: relative;
    z-index: 1;
    border-radius: 30px;
    margin-left: -60px;
    width: 320px;
    height: auto;
    margin-left: 270px;
    width: 420px;
    border-radius: 30px;
}

#scoolioForCustomersGrid {
    grid-template-columns: repeat(6, 1fr);
}

    #scoolioForCustomersGrid .panelOne {
        grid-column: 1 / 4;
    }

    #scoolioForCustomersGrid .panelTwo {
        grid-column: 4 / 7;
        overflow: hidden;
    }

    #scoolioForCustomersGrid .panelThree {
        grid-column: 1 / 4;
    }

    #scoolioForCustomersGrid .panelFour {
        grid-column: 4 / 7;
        overflow: hidden;
    }

    #scoolioForCustomersGrid .panelOne,
    #scoolioForCustomersGrid .panelTwo,
    #scoolioForCustomersGrid .panelThree,
    #scoolioForCustomersGrid .panelFour {
        position: relative;
        padding-bottom: 90px;
    }

        #scoolioForCustomersGrid .panelOne a,
        #scoolioForCustomersGrid .panelTwo a,
        #scoolioForCustomersGrid .panelThree a,
        #scoolioForCustomersGrid .panelFour a {
            position: absolute;
            bottom: 0;
            left: calc(50% - 150px);
            margin: 0 auto 40px;
        }

        #scoolioForCustomersGrid .panelOne img,
        #scoolioForCustomersGrid .panelTwo img,
        #scoolioForCustomersGrid .panelThree img,
        #scoolioForCustomersGrid .panelFour img {
            margin: -30px auto 0;
            display: block;
        }

        #scoolioForCustomersGrid .panelThree img {
            margin: 0 auto 0;
            display: block;
        }

    #scoolioForCustomersGrid .panelFive {
        grid-column: 1 / 3;
        padding: 0;
        display: flex;
        justify-content: center;
    }

        #scoolioForCustomersGrid .panelFive img {
            border-radius: 30px;
            display: block;
            object-fit: cover;
            width: 100%;
            height: 100%;
        }

    #scoolioForCustomersGrid .panelSix {
        grid-column: 3 / 7;
    }

        #scoolioForCustomersGrid .panelSix img {
            margin: 0 auto -40px;
            width: 640px;
            display: block;
        }

    #scoolioForCustomersGrid .panelSeven {
        grid-column: 1 / 5;
    }

    #scoolioForCustomersGrid .panelEight {
        grid-column: 5 / 7;
    }

/* 2.2.1.1 Übersicht unternehmen Responsive */
/* !Übersicht unternehmen Responsive */

@media screen and (max-width: 1300px) {
    #scoolioForCustomersHeadGridPanel #begleitBild {
        margin-left: 0;
        padding-left: 75px;
    }

    #scoolioForCustomersHeadGridPanel .headGridPanelTwo {
        width: 420px;
    }

    #scoolioForCustomersHeadGridPanel #begleitBild {
        margin-left: 75px;
        padding-left: 0;
    }

    #scoolioForCustomersHeadGridPanel .headGridPanelTwo {
        width: 420px;
    }

    #scoolioForCustomersGrid .panelSeven {
        grid-column: 1 / 7;
    }

    #scoolioForCustomersGrid .panelSeven img {
        width: 100%;
    }

    #scoolioForCustomersGrid .panelEight {
        grid-column: 1 / 7;
    }

    #scoolioForCustomersHeadGridPanel {
        margin-top: 90px;
        margin-bottom: 0px;
    }
}

@media screen and (max-width: 900px) {
    #scoolioForCustomersGrid .panelOne,
    #scoolioForCustomersGrid .panelTwo,
    #scoolioForCustomersGrid .panelThree,
    #scoolioForCustomersGrid .panelFour,
    #scoolioForCustomersGrid .panelSix {
        grid-column: 1 / 7;
    }

    #scoolioForCustomersGrid .panelFive {
        display: none;
    }

    #scoolioForCustomersGrid .panelThree img {
        margin: 0 auto 20px;
        display: block;
    }

    #scoolioForCustomersHeadGridPanel .headGridPanelOne {
        width: 100%;
        margin-top: 0px;
        padding: 0;
    }
    #scoolioForCustomersHeadGridPanel .headGridPanelTwo {
        width: 100%;
        max-width: 720px;
        margin: 40px auto 30px;
        padding: 0;
    }
    #scoolioForCustomersHeadGridPanel {
        display: block;
        margin: 0;
    }

}




/* !Übersicht Unternehmen*/
/* 2.2.2 Ads */
#scoolioAdsHeadGridPanel .headGridPanelOne {
    width: 300px;
    margin-top: -150px;
}

#scoolioAdsHeadGridPanel .headGridPanelTwo {
    position: relative;
    margin-bottom: 160px;
}

#scoolioAdsHeadGridPanel #movingMobile {
    position: absolute;
    z-index: 2;
    width: 360px;
    height: auto;
    bottom: -30px;
    margin-left: 60px;
}

#scoolioAdsHeadGridPanel #begleitBild {
    position: relative;
    z-index: 1;
    border-radius: 30px;
    margin-left: -60px;
    width: 320px;
    height: auto;
    margin-left: 270px;
    width: 420px;
}

#scoolioAdsGrid #customerTiles {
    width: calc(100% + 80px);
    margin: -20px 0 -40px -40px;
}

#scoolioAdsGrid #customerTiles img {
    max-width: 310px;
    height: auto;
}

    #scoolioAdsGrid #customerTiles .slick-arrow.slick-prev {
        left: 0px;
        font-size: 30px;
    }
    #scoolioAdsGrid #customerTiles .slick-arrow.slick-next {
        right: 0px;
        font-size: 30px;
    }

#scoolioAdsGrid {
    grid-template-columns: repeat(6, 1fr);
}

    #scoolioAdsGrid .panelOne {
        grid-column: 1 / 5;
    }

    #scoolioAdsGrid .panelTwo {
        grid-column: 5 / 7;
    }

    #scoolioAdsGrid .panelThree {
        grid-column: 1 / 3;
    }

    #scoolioAdsGrid .panelFour {
        grid-column: 3 / 7;
        position: relative;
    }

        #scoolioAdsGrid .panelFour img {
            margin: 0 auto;
            width: 100%;
            max-width: 540px;
            display: block;
            position: absolute;
            bottom: 0;
            left: calc(50% - 270px);
        }

    #scoolioAdsGrid .panelFive {
        grid-column: 1 / 7;
        position: relative;
    }

        #scoolioAdsGrid .panelFive h2 {
            font: normal normal 600 39px/43px Titillium Web;
            letter-spacing: 0.39px;
            margin-top: 0;
        }

        #scoolioAdsGrid .panelFive a {
            position: absolute;
            right: 30px;
            top: 120px;
        }

        #scoolioAdsGrid .panelFive p {
            max-width: calc(100% - 400px);
        }

    #scoolioAdsGrid .panelSix {
        grid-column: 1 / 3;
    }

        #scoolioAdsGrid .panelSix h3 .normalHeading {
            height: 130px;
        }

        #scoolioAdsGrid .panelSix img {
            width: 100px;
            height: auto;
        }

    #scoolioAdsGrid .panelSeven {
        grid-column: 3 / 7;
        color: #fff;
        background-size: cover;
        background-image: url(../imgs/websiteFramework/backgrounds/FullService.jpg);
    }

/* resposive ads */

@media screen and (max-width: 1300px) {
    #scoolioAdsGrid .panelSeven {
        grid-column: 3 / 7;
        color: #fff;
        background-size: cover;
        background: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2) ), url(../imgs/websiteFramework/backgrounds/FullService.jpg);
    }

    #scoolioAdsGrid .panelFour img {
        position: relative;
        margin: 0 auto -40px;
        left: 0;
    }

    #scoolioAdsGrid .panelSix {
        grid-column: 2 / 6;
    }

    #scoolioAdsGrid .panelSeven {
        grid-column: 2 / 6;
        min-height: 400px;
    }
}

@media screen and (max-width: 1000px) {
    #scoolioAdsGrid .panelOne,
    #scoolioAdsGrid .panelTwo,
    #scoolioAdsGrid .panelThree,
    #scoolioAdsGrid .panelFour {
        grid-column: 2 / 6;
    }
}

@media screen and (max-width: 900px) {
    #scoolioAdsHeadGridPanel #movingMobile {
        width: calc(60% + 60px);
    }

    #scoolioAdsHeadGridPanel #begleitBild {
        margin-left: 60%;
    }

    #scoolioAdsGrid .panelFive {
        padding-bottom: 100px;
    }

        #scoolioAdsGrid .panelFive a {
            position: absolute;
            left: calc(50% - 150px);
            bottom: 30px;
            top: auto;
        }

        #scoolioAdsGrid .panelFive p {
            max-width: 100%;
        }
}

@media screen and (max-width: 640px) {
    #scoolioAdsHeadGridPanel .headGridPanelOne {
        width: 300px;
        margin: 0 auto;
    }

    #scoolioAdsHeadGridPanel .headGridPanelOne {
        width: 300px;
        margin: 0 auto;
    }

    #scoolioAdsHeadGridPanel #movingMobile {
        width: calc(60%);
        margin-left: 5%;
    }

    #scoolioAdsHeadGridPanel #begleitBild {
        margin-left: 40%;
        width: 70%;
    }

    #scoolioAdsGrid .panelOne,
    #scoolioAdsGrid .panelTwo,
    #scoolioAdsGrid .panelThree,
    #scoolioAdsGrid .panelFour,
    #scoolioAdsGrid .panelSix,
    #scoolioAdsGrid .panelSeven {
        grid-column: 1 / 7;
    }


    #scoolioAdsGrid #customerTiles {
        width: calc(100% + 80px);
        margin: -20px 0 -20px -40px;
    }

    #scoolioAdsGrid #customerTiles img {
        max-width: 310px;
        height: auto;
        padding-left: 0.3em;
    }


}

/* !resposie ads */

/* !Ads */
/* 2.2.3 Engine */

#scoolioEngineHeadGridPanel .headGridPanelOne {
    width: 320px;
    margin-top: -150px;
    margin-left: 60px;
}

#scoolioEngineHeadGridPanel .headGridPanelTwo {
    position: relative;
    margin-bottom: 160px;
    left: 120px;
}

    #scoolioEngineHeadGridPanel .headGridPanelTwo video {
        border-radius: 30px;
    }

#scoolioEngineHeadGridPanel #begleitBild {
    position: relative;
    z-index: 1;
    border-radius: 30px;
    margin-left: 60px;
}

#scoolioEngineGrid {
    grid-template-columns: repeat(6, 1fr);
}

    #scoolioEngineGrid .panelOne {
        grid-column: 1 / 7;
        text-align: center;
    }

        #scoolioEngineGrid .panelOne p {
            font: normal normal 600 39px/43px Titillium Web;
            letter-spacing: 0.39px;
            max-width: 1100px;
            margin: 24px auto;
        }

        #scoolioEngineGrid .panelOne strong {
            font: normal normal 700 39px/43px Titillium Web;
        }

    #scoolioEngineGrid .panelTwo {
        grid-column: 1 / 3;
        padding: 0;
        display: flex;
        justify-content: center;
    }

        #scoolioEngineGrid .panelTwo img {
            border-radius: 30px;
        }

    #scoolioEngineGrid .panelThree {
        grid-column: 3 / 7;
    }

        #scoolioEngineGrid .panelThree img {
            margin: 0 auto -40px;
            width: 640px;
            display: block;
        }

    #scoolioEngineGrid .panelFour {
        grid-column: 1 / 5;
        overflow: hidden;
    }

        #scoolioEngineGrid .panelFour img {
            margin: -30px auto -60px;
            display: block;
        }

    #scoolioEngineGrid .panelFive {
        grid-column: 5 / 7;
    }

    #scoolioEngineGrid .panelSix {
        grid-column: 1 / 4;
    }

    #scoolioEngineGrid .panelSeven {
        grid-column: 4 / 7;
    }

    #scoolioEngineGrid .panelEight {
        grid-column: 1 / 5;
    }

    #scoolioEngineGrid .panelNine {
        grid-column: 5 / 7;
    }

    #scoolioEngineGrid .panelSix img,
    #scoolioEngineGrid .panelSeven img,
    #scoolioEngineGrid .panelEight img {
        margin: -30px auto -60px;
        display: block;
    }

    #scoolioEngineGrid .panelNine img {
        margin: 70px auto 0;
        display: block;
    }

/* !Engine */
/* 2.2.4 Shows */


#scoolioShowsHeadGridPanel .headGridPanelOne {
    width: 320px;
    margin-top: -150px;
    margin-left: 60px;
}

#scoolioShowsHeadGridPanel .headGridPanelTwo {
    position: relative;
    margin-bottom: 160px;
    left: 0;
}

#scoolioShowsHeadGridPanel #movingMobile {
    position: absolute;
    z-index: 2;
    width: 360px;
    height: auto;
    bottom: -30px;
    margin-left: 60px;
}

#scoolioShowsHeadGridPanel #begleitBild {
    position: relative;
    z-index: 1;
    border-radius: 30px;
    height: auto;
    margin-left: 270px;
    width: 420px;
}

#scoolioShowsGrid {
    grid-template-columns: repeat(6, 1fr);
}

    #scoolioShowsGrid .panelOne {
        grid-column: 1 / 5;
    }

        #scoolioShowsGrid .panelOne .video,
        #scoolioShowsGrid .panelOne .video video {
            width: 100%;
            max-width: 700px;
            margin: 0 auto 10px;
            display: block;
            border-radius: 30px;
        }


        #scoolioShowsGrid .panelOne .video {
            padding: 0 40px;
        }


    #scoolioShowsGrid .panelTwo {
        grid-column: 5 / 7;
    }

    #scoolioShowsGrid .panelThree {
        grid-column: 1 / 3;
    }

        #scoolioShowsGrid .panelThree h2.mediumHeading {
            text-align: left;
        }

    #scoolioShowsGrid .panelFour {
        grid-column: 3 / 7;
    }


    #scoolioShowsGrid .panelFive {
        grid-column: 1 / 4;
    }

    #scoolioShowsGrid .panelSix {
        grid-column: 4 / 7;
    }

    #scoolioShowsGrid .panelSeven {
        grid-column: 1 / 5;
    }

    #scoolioShowsGrid .panelEight {
        grid-column: 5 / 7;
    }

video::-webkit-media-controls-overlay-play-button {
    display: block;
}

/* 2.2.4.1 responsive Shows */

@media screen and (max-width: 1270px) {
    #scoolioShowsHeadGridPanel .headGridPanelTwo {
        left: 0;
        margin-bottom: 80px;
    }

    #scoolioShowsGrid .panelOne .video, #scoolioShowsGrid .panelOne .video video {
        max-width: 640px;
    }
}

@media screen and (max-width: 1100px) {

    #scoolioShowsGrid .panelOne {
        grid-column: 1 / 7;
    }

    #scoolioShowsGrid .panelTwo,
    #scoolioShowsGrid .panelThree,
    #scoolioShowsGrid .panelFour,
    #scoolioShowsGrid .panelFive,
    #scoolioShowsGrid .panelSix,
    #scoolioShowsGrid .panelSeven,
    #scoolioShowsGrid .panelEight {
        grid-column: 2 / 6;
    }

    #scoolioShowsGrid .slick-prev {
        left: 0px;
        top: 100px;
    }

    #scoolioShowsGrid .slick-next {
        right: 25px;
        top: 100px;
    }

    #scoolioShowsGrid .panelOne .video, #scoolioShowsGrid .panelOne .video video {
        max-width: 500px;
    }
}

@media screen and (max-width: 640px) {


    #scoolioShowsHeadGridPanel .headGridPanelOne {
        width: 300px;
        margin: 0 auto;
    }

    #scoolioShowsHeadGridPanel .headGridPanelOne {
        width: 300px;
        margin: 0 auto;
    }

    #scoolioShowsHeadGridPanel #movingMobile {
        width: calc(60%);
        margin-left: 5%;
    }

    #scoolioShowsHeadGridPanel #begleitBild {
        margin-left: 40%;
        width: 70%;
    }

    #scoolioShowsHeadGridPanel .headGridPanelTwo {
        left: 0;
    }

    #scoolioShowsGrid .panelOne .video,
    #scoolioShowsGrid .panelOne .video video {
        width: auto;
        max-width: calc(100vw - 120px);
    }

    #scoolioShowsHeadGridPanel .headGridPanelTwo img {
        margin-top: -20px;
    }

    #scoolioShowsGrid .panelTwo,
    #scoolioShowsGrid .panelThree,
    #scoolioShowsGrid .panelFour,
    #scoolioShowsGrid .panelFive,
    #scoolioShowsGrid .panelSix,
    #scoolioShowsGrid .panelSeven,
    #scoolioShowsGrid .panelEight {
        grid-column: 1 / 7;
    }

    #scoolioShowsGrid .videoGrid {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* !responsive shows */
/* !Shows */
/* 2.2.5 PrintUndDigital */

#printAndDigitalHeadGridPanel .headGridPanelOne {
    width: 300px;
    margin-top: -150px;
}

#printAndDigitalHeadGridPanel .headGridPanelTwo {
    position: relative;
    margin-bottom: 160px;
}

#printAndDigitalHeadGridPanel #movingMobile {
    position: absolute;
    z-index: 2;
    width: 360px;
    height: auto;
    bottom: 240px;
    margin-left: 390px;
}

#printAndDigitalHeadGridPanel #begleitBild {
    position: relative;
    z-index: 1;
    height: auto;
    margin-left: 60px;
    width: 640px;
}

#printAndDigitalGrid {
    grid-template-columns: repeat(6, 1fr);
}

    #printAndDigitalGrid .panelOne {
        grid-column: 1 / 3;
        position: relative;
    }

        #printAndDigitalGrid .panelOne h2.normalHeading {
            margin: 0;
            position: absolute;
            top: 50%;
            transform: translate(0, -50%);
            width: calc(100% - 60px);
        }


    #printAndDigitalGrid .panelTwo {
        grid-column: 3 / 7;
        overflow: hidden;
    }

    #printAndDigitalGrid .panelThree {
        color: #fff;
        grid-column: 1 / 5;
        overflow: hidden;
        background-image: url('../imgs/websiteFramework/backgrounds/Maedchen.jpg');
    }

    #printAndDigitalGrid .panelFour {
        grid-column: 5 / 7;
    }

/* responsive print und digital */

@media screen and (max-width: 1300px) {
    #printAndDigitalGrid .panelOne,
    #printAndDigitalGrid .panelTwo,
    #printAndDigitalGrid .panelThree,
    #printAndDigitalGrid .panelFour {
        grid-column: 2 / 6;
    }

    #printAndDigitalHeadGridPanel .headGridPanelTwo {
        margin-bottom: 60px;
    }

    #printAndDigitalGrid .panelOne h2.normalHeading {
        margin: 0;
        position: relative;
        top: auto;
        transform: none;
        width: calc(100% - 60px);
    }

    #printAndDigitalGrid .panelThree {
        min-height: 500px;
    }
}

@media screen and (max-width: 640px) {

    #printAndDigitalGrid .panelOne,
    #printAndDigitalGrid .panelTwo,
    #printAndDigitalGrid .panelThree,
    #printAndDigitalGrid .panelFour {
        grid-column: 1 / 7;
    }


    #printAndDigitalHeadGridPanel .headGridPanelOne {
        width: 300px;
        margin: 0 auto;
    }

    #printAndDigitalHeadGridPanel .headGridPanelOne {
        width: 300px;
        margin: 0 auto;
    }

    #printAndDigitalHeadGridPanel #movingMobile {
        width: 75%;
        margin-left: 0%;
    }

    #printAndDigitalHeadGridPanel #begleitBild {
        margin-left: 25%;
        width: 80%;
    }

    #printAndDigitalHeadGridPanel #movingMobile {
        bottom: 0;
    }

    #printAndDigitalGrid .panelOne h2.normalHeading {
        font: normal normal 600 39px/43px Titillium Web;
        letter-spacing: 0.39px;
        width: 100%;
    }
}

/* !responsive print und digital */
/* !PrintUndDigital */
/* 2.2.6 Jobcards */

#scoolioJobcardsHeadGridPanel .headGridPanelOne {
    width: 300px;
    margin-top: -150px;
}

#scoolioJobcardsHeadGridPanel .headGridPanelTwo {
    position: relative;
    margin-bottom: 160px;
}

#scoolioJobcardsHeadGridPanel #movingMobile {
    position: absolute;
    z-index: 1;
    width: 480px;
    height: auto;
    bottom: 40px;
    margin-left: 60px;
}

#scoolioJobcardsHeadGridPanel #begleitBild {
    position: relative;
    z-index: 2;
    border-radius: 30px;
    margin-left: 30px;
    width: 320px;
    height: auto;
    margin-left: 270px;
    width: 420px;
}

    #scoolioJobcardsGrid #customerTiles {
        width: calc(100% + 80px);
        margin: -20px 0 -40px -40px;
    }

    #scoolioJobcardsGrid #customerTiles img {
        max-width: 310px;
        height: auto;
    }

    #scoolioJobcardsGrid {
        grid-template-columns: repeat(6, 1fr);
    }

    #scoolioJobcardsGrid .panelOne {
        grid-column: 1 / 5;
    }

    #scoolioJobcardsGrid .panelTwo {
        grid-column: 5 / 7;
    }

    #scoolioJobcardsGrid .panelThree {
        grid-column: 1 / 3;
        padding: 0;
    }

        #scoolioJobcardsGrid .panelThree .ctaBoxForCustomers {
            padding: 40px;
        }

    #scoolioJobcardsGrid .panelFour {
        grid-column: 3 / 7;
    }

        #scoolioJobcardsGrid .panelFour img {
            margin: 0 auto;
            width: 100%;
            max-width: 625px;
            display: block;
            margin-top: 0px;
            margin-bottom: -40px;
        }

    #scoolioJobcardsGrid .panelFive {
        grid-column: 1 / 7;
        position: relative;
    }

        #scoolioJobcardsGrid .panelFive h2 {
            font: normal normal 600 39px/43px Titillium Web;
            letter-spacing: 0.39px;
            margin-top: 0;
        }

        #scoolioJobcardsGrid .panelFive a {
            position: absolute;
            right: 30px;
            top: 132px;
        }

        #scoolioJobcardsGrid .panelFive p {
            max-width: calc(100% - 400px);
        }

    #scoolioJobcardsGrid .panelSix {
        grid-column: 1 / 3;
    }

        #scoolioJobcardsGrid .panelSix img {
            width: 100px;
            height: auto;
        }

    #scoolioJobcardsGrid .panelSeven {
        grid-column: 3 / 7;
        color: #fff;
        background-image: url(../imgs/websiteFramework/backgrounds/FullService.jpg);
    }

/* jobcards responsive */
@media screen and (max-width: 1300px) {
    #scoolioJobcardsGrid .panelSix,
    #scoolioJobcardsGrid .panelSeven {
        grid-column: 2 / 6;
        min-height: 400px;
        background-size: cover;
    }

    #scoolioJobcardsGrid .panelOne,
    #scoolioJobcardsGrid .panelTwo,
    #scoolioJobcardsGrid .panelThree,
    #scoolioJobcardsGrid .panelFour {
        grid-column: 2 / 6;
    }

    #scoolioJobcardsGrid .panelSeven {
        background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1)), url(../imgs/websiteFramework/backgrounds/FullService.jpg);
        background-position: center center;
    }
}

@media screen and (max-width: 1270px) {
    #scoolioJobcardsHeadGridPanel .headGridPanelTwo {
        margin-top: -40px;
        margin-bottom: 40px;
    }
}

@media screen and (max-width: 900px) {
    #scoolioJobcardsGrid .panelFive {
        padding-bottom: 100px;
    }

        #scoolioJobcardsGrid .panelFive a {
            position: absolute;
            left: calc(50% - 150px);
            bottom: 30px;
            top: auto;
        }

        #scoolioJobcardsGrid .panelFive p {
            max-width: 100%;
        }
}

@media screen and (max-width: 640px) {
    #scoolioJobcardsHeadGridPanel .headGridPanelOne {
        width: 300px;
        margin: 0 auto;
    }

    #scoolioJobcardsHeadGridPanel .headGridPanelOne {
        width: 300px;
        margin: 0 auto;
    }

    #scoolioJobcardsHeadGridPanel #movingMobile {
        width: 80%;
        margin-left: -5%;
    }

    #scoolioJobcardsHeadGridPanel #begleitBild {
        margin-left: 40%;
        width: 70%;
    }

    #scoolioJobcardsHeadGridPanel .headGridPanelTwo {
        position: relative;
        margin-top: -40px;
        margin-bottom: 40px;
    }

    #scoolioJobcardsGrid .panelOne,
    #scoolioJobcardsGrid .panelTwo,
    #scoolioJobcardsGrid .panelThree,
    #scoolioJobcardsGrid .panelFour,
    #scoolioJobcardsGrid .panelSix,
    #scoolioJobcardsGrid .panelSeven {
        grid-column: 1 / 7;
    }
}

/* !jobcards responsive */
/* !Jobcards */
/* 2.2.7 scoolio for companies */

#scoolioForCompaniesHeadGridPanel .headGridPanelOne {
    width: 320px;
    margin-top: -150px;
    margin-left: 60px;
}

#scoolioForCompaniesHeadGridPanel .headGridPanelTwo {
    position: relative;
    margin-bottom: 160px;
    left: 120px;
}

    #scoolioForCompaniesHeadGridPanel .headGridPanelTwo video {
        border-radius: 30px;
    }

#scoolioForCompaniesHeadGridPanel #begleitBild {
    position: relative;
    z-index: 1;
    border-radius: 30px;
    margin-left: 60px;
}

#scoolioForCompaniesGrid {
    grid-template-columns: repeat(6, 1fr);
}

    #scoolioForCompaniesGrid .panelOne {
        grid-column: 1 / 5;
        overflow: hidden;
    }

        #scoolioForCompaniesGrid .panelOne img {
            margin: 0 auto -40px;
            display: block;
        }

    #scoolioForCompaniesGrid .panelTwo {
        grid-column: 5 / 7;
    }

    #scoolioForCompaniesGrid .panelThree {
        grid-column: 1 / 3;
    }

    #scoolioForCompaniesGrid .panelFour {
        grid-column: 3 / 7;
    }

        #scoolioForCompaniesGrid .panelFour img {
            border-radius: 30px;
            margin: 0 auto -40px;
            display: block;
            max-width: 600px;
        }

    #scoolioForCompaniesGrid .panelSix {
        grid-column: 1 / 4;
    }

    #scoolioForCompaniesGrid .panelSeven {
        grid-column: 4 / 7;
    }

    #scoolioForCompaniesGrid .panelEight {
        grid-column: 1 / 5;
    }

    #scoolioForCompaniesGrid .panelNine {
        grid-column: 5 / 7;
    }

    #scoolioForCompaniesGrid .panelSix img,
    #scoolioForCompaniesGrid .panelSeven img,
    #scoolioForCompaniesGrid .panelEight img {
        margin: -30px auto -60px;
        display: block;
    }

    #scoolioForCompaniesGrid .panelNine img {
        margin: 70px auto 0;
        display: block;
    }

/* scoolio for companies reponsive */

@media screen and (max-width: 1100px) {

    #scoolioForCompaniesGrid .panelOne,
    #scoolioForCompaniesGrid .panelTwo,
    #scoolioForCompaniesGrid .panelThree,
    #scoolioForCompaniesGrid .panelFour,
    #scoolioForCompaniesGrid .panelFive,
    #scoolioForCompaniesGrid .panelSix,
    #scoolioForCompaniesGrid .panelSeven,
    #scoolioForCompaniesGrid .panelEight,
    #scoolioForCompaniesGrid .panelNine {
        grid-column: 2 / 6;
    }

        #scoolioForCompaniesGrid .panelFour img {
            border-radius: 30px;
            margin: 0 auto -40px;
            display: block;
            max-width: 600px;
            width: 100%;
        }
}

@media screen and (max-width: 1000px) {
    #scoolioForCompaniesHeadGridPanel {
        display: block;
    }

    #scoolioForCompaniesHeadGridPanel {
        margin: 0 auto;
        width: 100%;
        max-width: 620px;
    }

        #scoolioForCompaniesHeadGridPanel .headGridPanelOne {
            width: 100%;
            max-width: 640px;
            margin: 0 auto;
        }

        #scoolioForCompaniesHeadGridPanel .headGridPanelTwo video {
            width: 100%;
            max-width: 480px;
            margin: 0 auto;
            display: block;
        }

        #scoolioForCompaniesHeadGridPanel .headGridPanelTwo {
            position: relative;
            margin-bottom: 40px;
            left: 0;
        }
}

@media screen and (max-width: 640px) {


    #scoolioForCompaniesHeadGridPanel .headGridPanelOne {
        width: 300px;
        margin: 0 auto;
    }

    #scoolioForCompaniesHeadGridPanel .headGridPanelOne {
        width: 300px;
        margin: 0 auto;
    }

    #scoolioForCompaniesHeadGridPanel #movingMobile {
        width: calc(60%);
        margin-left: 5%;
    }

    #scoolioForCompaniesHeadGridPanel #begleitBild {
        margin-left: 40%;
        width: 70%;
    }

    #scoolioForCompaniesHeadGridPanel .headGridPanelTwo video {
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
        display: block;
    }

    #scoolioForCompaniesHeadGridPanel .headGridPanelTwo {
        left: 0;
    }

    #scoolioForCompaniesGrid .panelOne,
    #scoolioForCompaniesGrid .panelTwo,
    #scoolioForCompaniesGrid .panelThree,
    #scoolioForCompaniesGrid .panelFour,
    #scoolioForCompaniesGrid .panelFive,
    #scoolioForCompaniesGrid .panelSix,
    #scoolioForCompaniesGrid .panelSeven,
    #scoolioForCompaniesGrid .panelEight,
    #scoolioForCompaniesGrid .panelNine {
        grid-column: 1 / 7;
    }
}

/* !scoolio for companies responsive */
/* !scoolio for companies */
/* !Unternehmensbereich */
/* 2.3 Schülerbereich Schülerseiten */
/* 2.3.1 Schülerseiten Übersicht */

#scoolioAppHeadGridPanel {
    margin-bottom: 60px;
    margin-top: -20px;
}

    #scoolioAppHeadGridPanel .headGridPanelOne {
        width: 350px;
        margin-top: -30px;
        position: relative;
    }

        #scoolioAppHeadGridPanel .headGridPanelOne p {
            margin: 20px auto;
        }

    #scoolioAppHeadGridPanel .headGridPanelTwo #movingMobile {
        position: absolute;
        margin-left: -60px;
        animation: floatingOne 5s ease-in-out infinite;
    }

    #scoolioAppHeadGridPanel .headGridPanelTwo #begleitBild {
        border-radius: 30px;
        margin-left: 240px;
    }

#scoolioAppGrid {
    grid-template-columns: repeat(6, 1fr);
}

    #scoolioAppGrid .panelOne {
        grid-column: 1 / 5;
        overflow: hidden;
        background-image: url('../imgs/websiteFramework/background-zwei-Schuelerinnen-mit-scoolio-hoodies.jpg');
    }

    #scoolioAppGrid .panelTwo {
        grid-column: 5 / 7;
    }

    #scoolioAppGrid .panelThree {
        grid-column: 1 / 7;
    }


    #scoolioAppGrid .panelFour {
        grid-column: 1 / 3;
    }

        #scoolioAppGrid .panelFour .downloadLinks {
            margin: 0;
        }

    #scoolioAppGrid .panelFive {
        grid-column: 3 / 7;
        color: #fff;
        background-image: url('../imgs/websiteFramework/background-gruppe-schueler-vor-gruenem-hintergrund.jpg');
    }

    #scoolioAppGrid .panelSix,
    #scoolioAppGrid .panelEight {
        grid-column: 1 / 4;
        position: relative;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    #scoolioAppGrid .panelSeven,
    #scoolioAppGrid .panelNine {
        grid-column: 4 / 7;
        position: relative;
        margin-bottom: 0;
        padding-bottom: 0;
    }

        #scoolioAppGrid .panelSix img,
        #scoolioAppGrid .panelNine img {
            position: absolute;
            bottom: 0;
            left: calc(50% - 240px);
            width: 480px;
        }

        #scoolioAppGrid .panelSeven img,
        #scoolioAppGrid .panelEight img {
            width: 100%;
            max-width: 480px;
            margin: 0 auto 0px;
            display: block;
        }

/* 2.3.1.1 resp regeln Schülerseiten Übersicht */

@media screen and (max-width: 1300px) {
    #scoolioAppGrid .panelOne,
    #scoolioAppGrid .panelTwo,
    #scoolioAppGrid .panelSix,
    #scoolioAppGrid .panelSeven,
    #scoolioAppGrid .panelEight,
    #scoolioAppGrid .panelNine {
        grid-column: 2 / 6;
    }

        #scoolioAppGrid .panelSix img,
        #scoolioAppGrid .panelNine img {
            position: relative;
            left: auto;
            width: 100%;
            max-width: 480px;
            margin: 0 auto 0;
            display: block;
        }

    #scoolioAppGrid .panelOne {
        background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3)), url(../imgs/websiteFramework/background-zwei-Schuelerinnen-mit-scoolio-hoodies.jpg);
        background-position: center center;
    }

    #scoolioAppGrid .panelFive {
        background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3)), url(../imgs/websiteFramework/background-gruppe-schueler-vor-gruenem-hintergrund.jpg);
        background-position: center center;
    }
}

@media screen and (max-width: 1000px) {

    #scoolioAppGrid .panelFour, #scoolioAppGrid .panelFive {
        text-align: center;
    }

        #scoolioAppGrid .panelFour .downloadLinks {
            margin: 0 auto;
        }

    #scoolioAppGrid .panelFour,
    #scoolioAppGrid .panelFive {
        grid-column: 2 / 6;
    }


    #scoolioAppHeadGridPanel {
        width: 100%;
        margin: 0px auto 40px;
        display: block;
    }

        #scoolioAppHeadGridPanel .headGridPanelOne {
            width: 100%;
            max-width: 640px;
            margin: 0 auto 40px;
        }

        #scoolioAppHeadGridPanel .headGridPanelTwo {
            width: 100%;
            max-width: 640px;
            margin: 0 auto 0;
        }
}

@media screen and (max-width: 640px) {
    #scoolioAppGrid .panelOne,
    #scoolioAppGrid .panelTwo,
    #scoolioAppGrid .panelFour,
    #scoolioAppGrid .panelFive,
    #scoolioAppGrid .panelThree,
    #scoolioAppGrid .panelSix,
    #scoolioAppGrid .panelSeven,
    #scoolioAppGrid .panelEight,
    #scoolioAppGrid .panelNine {
        grid-column: 1 / 7;
    }

    #scoolioAppHeadGridPanel .headGridPanelTwo #begleitBild {
        display: none;
    }

    #scoolioAppHeadGridPanel .headGridPanelTwo #movingMobile {
        position: relative;
        margin: 0 0 -80px;
        width: 100%;
        height: auto;
    }

    #scoolioAppGrid .panelThree h2.normalHeading,
    #scoolioAppGrid .panelFour h2.normalHeading {
        font: normal normal 600 39px/43px Titillium Web;
        letter-spacing: 0.39px;
        width: 100%;
    }
}

/* !resp regeln Schülerseiten Übersicht */
/* !scoolio Schülerseiten Übersicht */
/* 2.3.2 schulplanerPage */
#schulPlanerHeadGridPanel .headGridPanelOne {
    width: 280px;
    margin-top: -150px;
}

#schulPlanerHeadGridPanel .headGridPanelTwo {
    position: relative;
    margin-bottom: 160px;
}

#schulPlanerHeadGridPanel #movingMobile {
    position: absolute;
    z-index: 2;
    bottom: -90px;
    margin-left: 260px;
    animation: floatingOne 5s ease-in-out infinite;
}

#schulPlanerHeadGridPanel #begleitBild {
    position: relative;
    z-index: 1;
    border-radius: 30px;
    margin-left: 60px;
}

#schulplanerGrid {
    grid-template-columns: repeat(6, 1fr);
}

    #schulplanerGrid .panelOne {
        grid-column: 1 / 5;
        overflow: hidden;
        background-image: url('../imgs/websiteFramework/background_happy_girl.jpg');
    }

    #schulplanerGrid .panelTwo img {
        margin: -160px -40px -40px;
        float: right;
    }

    #schulplanerGrid .panelTwo {
        grid-column: 5 / 7;
        overflow: hidden;
        color: #fff;
        /* obsolet wegen colorfullBackground
        background: transparent linear-gradient(330deg, #57179E 0%, #C12788 58%, #ED5C6B 100%) 0% 0% no-repeat padding-box; */
    }

    #schulplanerGrid .panelThree,
    #schulplanerGrid .panelFive,
    #schulplanerGrid .panelSeven {
        grid-column: 1 / 4;
    }

    #schulplanerGrid .panelFour,
    #schulplanerGrid .panelSix,
    #schulplanerGrid .panelEight {
        grid-column: 4 / 7;
    }

    #schulplanerGrid .panelThree,
    #schulplanerGrid .panelFive,
    #schulplanerGrid .panelFour,
    #schulplanerGrid .panelSix,
    #schulplanerGrid .panelSeven,
    #schulplanerGrid .panelEight {
        margin-bottom: 0;
        padding-bottom: 0;
        position: relative;
    }

        #schulplanerGrid .panelThree img,
        #schulplanerGrid .panelFive img,
        #schulplanerGrid .panelFour img,
        #schulplanerGrid .panelSix img,
        #schulplanerGrid .panelSeven img,
        #schulplanerGrid .panelEight img {
            margin: 0 auto;
            width: 100%;
            max-width: 480px;
            display: block;
        }

        #schulplanerGrid .panelThree img,
        #schulplanerGrid .panelSeven img {
            position: absolute;
            bottom: 0;
            left: calc(50% - 240px);
            width: 480px;
        }

    #schulplanerGrid .panelNine {
        grid-column: 1 / 3;
    }

    #schulplanerGrid .panelTen {
        color: #fff;
        grid-column: 3 / 7;
        background-image: url('../imgs/websiteFramework/background_Astronaut.jpg');
    }

/* 2.3.2.1 resp regeln Schulplaner  */
@media screen and (max-width: 1300px) {
    #schulplanerGrid .panelOne {
        background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3)), url(../imgs/websiteFramework/background_happy_girl.jpg);
        background-position: center center;
    }

    #schulplanerGrid .panelTen {
        background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3)), url(../imgs/websiteFramework/background_Astronaut.jpg);
        background-position: center center;
    }
}

@media screen and (max-width: 1100px) {
    #schulplanerGrid .panelOne,
    #schulplanerGrid .panelTwo {
        grid-column: 1 / 7;
        overflow: hidden;
    }
}

@media screen and (max-width: 1200px) {
    #schulplanerGrid .panelThree,
    #schulplanerGrid .panelFive,
    #schulplanerGrid .panelFour,
    #schulplanerGrid .panelSix,
    #schulplanerGrid .panelSeven,
    #schulplanerGrid .panelEight {
        grid-column: 1 / 7;
        overflow: hidden;
    }

        #schulplanerGrid .panelThree img,
        #schulplanerGrid .panelSeven img {
            position: relative;
            bottom: 0;
            width: 100%;
            left: auto;
        }

    #schulplanerGrid .panelNine,
    #schulplanerGrid .panelTen {
        grid-column: 2 / 6;
        overflow: hidden;
    }
}

@media screen and (max-width: 640px) {
    #schulPlanerHeadGridPanel .headGridPanelOne {
        margin: 0 auto;
        width: 100%;
    }

    #schulPlanerHeadGridPanel #begleitBild {
        display: none;
    }

    #schulPlanerHeadGridPanel #movingMobile {
        position: relative;
        z-index: 2;
        width: 100%;
        left: 0%;
        top: auto;
        bottom: auto;
        margin: 20px 0 -120px;
    }

    #schulplanerGrid .panelNine,
    #schulplanerGrid .panelTen {
        grid-column: 1 / 7;
        overflow: hidden;
    }
}

/* !responsive rules schulplanerPage */
/* !schulplanerPage */
/* 2.3.3 scoolio pro */

#scoolioProGridPanel {
    margin: 0 0 150px;
}

    #scoolioProGridPanel .headGridPanelOne {
        width: 280px;
    }

    #scoolioProGridPanel .headGridPanelTwo {
        position: relative;
    }

    #scoolioProGridPanel #movingMobile {
        position: absolute;
        z-index: 2;
        bottom: -160px;
        margin-left: 260px;
        animation: floatingOne 5s ease-in-out infinite;
    }

    #scoolioProGridPanel #begleitBild {
        position: relative;
        z-index: 1;
        border-radius: 30px;
        margin-left: 60px;
    }

#scoolioProGrid {
    grid-template-columns: repeat(6, 1fr);
}
    /*
    #schulplanerGrid .panelOne {
        grid-column: 1 / 7;
        overflow: hidden;
    }

        #schulplanerGrid .panelOne img {
            margin: -160px -40px -40px;
            float: left;
        } */

    #scoolioProGrid .panelOne {
        grid-column: 1 / 5;
        overflow: hidden;
        background-image: url('../imgs/websiteFramework/backgrounds/Gruppe2.jpg');
    }

    #scoolioProGrid .panelTwo img {
        margin: -160px -40px -40px;
        float: right;
    }

    #scoolioProGrid .panelTwo {
        grid-column: 5 / 7;
        overflow: hidden;
        color: #fff;
    }

    #scoolioProGrid .panelThree,
    #scoolioProGrid .panelFive {
        grid-column: 1 / 4;
    }

    #scoolioProGrid .panelFour,
    #scoolioProGrid .panelSix {
        grid-column: 4 / 7;
    }

    #scoolioProGrid .panelThree,
    #scoolioProGrid .panelFive,
    #scoolioProGrid .panelFour,
    #scoolioProGrid .panelSix {
        margin-bottom: 0;
        padding-bottom: 0;
        position: relative;
    }

        #scoolioProGrid .panelThree img,
        #scoolioProGrid .panelFive img,
        #scoolioProGrid .panelFour img {
            margin: 0 auto;
            width: 100%;
            max-width: 480px;
            display: block;
        }

        #scoolioProGrid .panelSix img,
        #scoolioProGrid .panelThree img {
            position: absolute;
            bottom: 0;
            left: calc(50% - 240px);
            width: 480px;
        }

    #scoolioProGrid .panelSeven {
        grid-column: 1 / 7;
        position: relative;
    }

        #scoolioProGrid .panelSeven h2 {
            margin-top: 0;
        }

        #scoolioProGrid .panelSeven p {
            max-width: calc(100% - 400px);
        }

        #scoolioProGrid .panelSeven a {
            position: absolute;
            right: 30px;
            top: 132px;
        }

    #scoolioProGrid .panelEight {
        grid-column: 1 / 3;
    }

    #scoolioProGrid .panelNine {
        color: #fff;
        grid-column: 3 / 7;
        background-image: url('../imgs/websiteFramework/backgrounds/Junge.jpg');
    }

/* 2.3.3.1 resp regeln scoolio pro */

@media screen and (max-width: 1300px) {
    #scoolioProGrid .panelOne,
    #scoolioProGrid .panelTwo,
    #scoolioProGrid .panelThree,
    #scoolioProGrid .panelFour,
    #scoolioProGrid .panelFive,
    #scoolioProGrid .panelSix,
    #scoolioProGrid .panelEight,
    #scoolioProGrid .panelNine {
        grid-column: 2 / 6;
    }

    #scoolioProGrid .panelOne {
        background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3)), url(../imgs/websiteFramework/backgrounds/Gruppe2.jpg);
        background-position: center center;
    }

    #scoolioProGrid .panelNine {
        background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3)), url(../imgs/websiteFramework/backgrounds/Junge.jpg);
        background-position: center center;
    }

    #scoolioProGrid .panelSix img,
    #scoolioProGrid .panelThree img {
        position: relative;
        width: 100%;
        margin: 0 auto;
        max-width: 540px;
        left: auto;
    }
}

@media screen and (max-width: 1000px) {
    #scoolioProGrid .panelSeven {
        text-align: center;
    }

        #scoolioProGrid .panelSeven p {
            max-width: 100%;
        }

        #scoolioProGrid .panelSeven a {
            position: relative;
            margin: -20px auto 40px;
            top: auto;
            right: auto;
        }
}

@media screen and (max-width: 640px) {
    #scoolioProGridPanel .headGridPanelOne {
        width: 100%;
    }

    #scoolioProGridPanel #begleitBild {
        display: none;
    }

    #scoolioProGridPanel #movingMobile {
        position: relative;
        z-index: 2;
        bottom: 0;
        margin: 0 auto -160px;
    }

    #scoolioProGrid .panelOne,
    #scoolioProGrid .panelTwo,
    #scoolioProGrid .panelThree,
    #scoolioProGrid .panelFour,
    #scoolioProGrid .panelFive,
    #scoolioProGrid .panelSix,
    #scoolioProGrid .panelEight,
    #scoolioProGrid .panelNine {
        grid-column: 1 / 7;
    }
}

/* !resp regeln scoolio pro */
/* !scoolio pro */
/* 2.3.4 gewinnspiele */
/* 2.3.4.1 resp regeln gewinnspiele */
/* !resp regeln gewinnspiele */
/* !scoolio gewinnspiele */
/* 2.3.5 Stundenplan App */

#StundenplanAppHeadGridPanel .headGridPanelOne {
    width: 300px;
    margin-top: -150px;
}

#StundenplanAppHeadGridPanel .headGridPanelTwo {
    position: relative;
    margin-top: 100px;
    margin-bottom: 160px;
}

#StundenplanAppHeadGridPanel #movingMobile {
    position: absolute;
    z-index: 2;
    bottom: -70px;
    left: 260px;
    animation: floatingOne 5s ease-in-out infinite;
}

#StundenplanAppHeadGridPanel #begleitBild {
    position: relative;
    z-index: 1;
    border-radius: 30px;
    margin-left: 60px;
}

#stundenplanAppGrid {
    grid-template-columns: repeat(6, 1fr);
}

    #stundenplanAppGrid .panelOne {
        grid-column: 1 / 5;
        overflow: hidden;
        background-image: url('../imgs/websiteFramework/backgrounds/Gruppe.jpg');
        height: 450px;
    }

    #stundenplanAppGrid .panelTwo img {
        margin: -160px -40px -40px;
        float: right;
    }

    #stundenplanAppGrid .panelTwo {
        grid-column: 5 / 7;
        overflow: hidden;
        color: #fff;
        /* obsolet wegen colorfullBackground
        background: transparent linear-gradient(330deg, #57179E 0%, #C12788 58%, #ED5C6B 100%) 0% 0% no-repeat padding-box; */
    }

    #stundenplanAppGrid .panelThree {
        grid-column: 1 / 4;
    }

    #stundenplanAppGrid .panelFour {
        grid-column: 4 / 7;
    }

    #stundenplanAppGrid .panelThree,
    #stundenplanAppGrid .panelFour {
        margin-bottom: 0;
        padding-bottom: 0;
        position: relative;
    }

        #stundenplanAppGrid .panelFour img {
            margin: 0 auto;
            width: 100%;
            max-width: 480px;
            display: block;
        }

        #stundenplanAppGrid .panelThree img {
            position: absolute;
            bottom: 0;
            left: calc(50% - 240px);
            width: 480px;
        }

/* 2.3.5.1 resp regeln Stundenplan App */

@media screen and (max-width: 1300px) {
    #stundenplanAppGrid .panelOne {
        background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3)), url(../imgs/websiteFramework/backgrounds/Gruppe.jpg);
        background-position: center center;
        color: #fff;
    }
}

@media screen and (max-width: 1100px) {
    #stundenplanAppGrid .panelOne,
    #stundenplanAppGrid .panelTwo {
        grid-column: 1 / 7;
        overflow: hidden;
    }
}

@media screen and (max-width: 1200px) {
    #stundenplanAppGrid .panelThree,
    #stundenplanAppGrid .panelFour {
        grid-column: 1 / 7;
        overflow: hidden;
    }

        #stundenplanAppGrid .panelThree img {
            position: relative;
            bottom: 0;
            width: 100%;
            max-width: 520px;
            left: auto;
            margin: 0 auto -15px;
            display: block;
        }
}

@media screen and (max-width: 640px) {
    #StundenplanAppHeadGridPanel .headGridPanelOne {
        width: 100%;
        margin-top: 0;
    }

    #StundenplanAppHeadGridPanel #movingMobile {
        position: relative;
        z-index: 2;
        width: 100%;
        left: 0%;
        top: auto;
        bottom: auto;
        margin: 0px;
    }

    #StundenplanAppHeadGridPanel #begleitBild {
        display: none;
    }

    #StundenplanAppHeadGridPanel .headGridPanelTwo {
        margin-top: 0px;
        margin-bottom: 0px;
    }
}

/* !resp regeln Stundenplan App */
/* !scoolio Stundenplan App */
/* 2.3.6 Hausaufgaben App */

#hausaufgabenAppHeadGridPanel {
    margin-top: 60px;
    margin-bottom: 0;
}

    #hausaufgabenAppHeadGridPanel .headGridPanelOne {
        width: 330px;
        margin-top: -150px;
    }

    #hausaufgabenAppHeadGridPanel .headGridPanelTwo {
        position: relative;
        margin-bottom: 150px;
    }

    #hausaufgabenAppHeadGridPanel #movingMobile {
        position: absolute;
        z-index: 2;
        bottom: -140px;
        margin-left: 260px;
        animation: floatingOne 5s ease-in-out infinite;
    }

    #hausaufgabenAppHeadGridPanel #begleitBild {
        position: relative;
        z-index: 1;
        border-radius: 30px;
        margin-left: 60px;
    }

#hausaufgabenAppGrid {
    grid-template-columns: repeat(6, 1fr);
}

    #hausaufgabenAppGrid .panelOne {
        grid-column: 1 / 3;
        overflow: hidden;
        text-align: center;
    }

    #hausaufgabenAppGrid .panelTwo {
        grid-column: 3 / 7;
        overflow: hidden;
        background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3)), url(../imgs/websiteFramework/background_happy_girl.jpg);
        background-position: center;
    }

    #hausaufgabenAppGrid .panelThree {
        grid-column: 1 / 4;
    }

    #hausaufgabenAppGrid .panelFour {
        grid-column: 4 / 7;
    }

    #hausaufgabenAppGrid .panelThree,
    #hausaufgabenAppGrid .panelFour {
        margin-bottom: 0;
        padding-bottom: 0;
        position: relative;
    }

        #hausaufgabenAppGrid .panelFour img {
            position: absolute;
            bottom: 0;
            left: calc(50% - 240px);
            width: 480px;
        }

        #hausaufgabenAppGrid .panelThree img {
            margin: 0 auto;
            width: 100%;
            max-width: 480px;
            display: block;
        }

/* 2.3.6.1 resp regeln Hausaufgaben App */

@media screen and (max-width: 1100px) {
    #hausaufgabenAppGrid .panelOne,
    #hausaufgabenAppGrid .panelTwo {
        grid-column: 1 / 7;
        overflow: hidden;
    }
}

@media screen and (max-width: 1200px) {
    #hausaufgabenAppGrid .panelThree,
    #hausaufgabenAppGrid .panelFour {
        grid-column: 2 / 6;
        overflow: hidden;
    }

        #hausaufgabenAppGrid .panelFour img,
        #hausaufgabenAppGrid .panelThree img {
            position: relative;
            bottom: 0;
            width: 100%;
            max-width: 540px;
            margin: 0 auto -20px;
            left: auto;
            display: block;
        }
}

@media screen and (max-width: 640px) {
    #hausaufgabenAppGrid .panelThree,
    #hausaufgabenAppGrid .panelFour {
        grid-column: 1 / 7;
    }

    #hausaufgabenAppHeadGridPanel .headGridPanelOne {
        width: 100%;
        margin-top: 0;
    }

    #hausaufgabenAppHeadGridPanel #begleitBild {
        display: none;
    }

    p.paraMargin {
        margin: 12px 0;
    }

    #hausaufgabenAppHeadGridPanel #movingMobile {
        position: relative;
        z-index: 2;
        bottom: 0;
        margin: 0 0 -160px;
        width: 100%;
    }
}

/* !resp regeln Hausaufgaben App */
/* !scoolio Hausaufgaben App */
/* 2.3.6 Hausaufgaben KI */

h1.notSoFatHeading {
    text-transform: none;
    margin: 30px 0px 0px;
    padding: 0 0 14px 0;
    font: normal normal 600 39px/43px Titillium Web;
}

.rainBowFontNorm {
    background: -webkit-linear-gradient(135deg, #6A5AFF 0%, #6A5AFF 5%, #FF5F5F 100%);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

p.bigregular {
    font: normal normal 600 19px/27px Titillium Web;
    margin: 0 0 24px;
}

#aiWizard {
    width: 100%;
    max-width: 840px;
    margin: 0 auto 50px;
}

    #aiWizard .btn {
        background: transparent linear-gradient(90deg, #6A5AFF 0%, #FF5F5F 100%) 0% 0% no-repeat padding-box;
        border-radius: 15px;
        color: #fff;
        margin: 36px 12px;
        height: 58px;
        font: normal normal bold 19px/58px Titillium Web;
        letter-spacing: 0.19px;
        text-decoration: none;
        display: inline-block;
        text-align: center;
        cursor: pointer;
        border: none;
        transition: all 1s;
    }

    #aiWizard #advertisement {
        display: none;
    }

#aiMessage textarea {
    background: var(--white) 0% 0% no-repeat padding-box;
    border: 1px solid var(--schrift);
    background: #fff 0% 0% no-repeat padding-box;
    border: 1px solid #1d1d1f;
    border-radius: 15px;
    font: 600 19px/27px Titillium Web;
    letter-spacing: .19px;
    width: 100%;
    box-sizing: border-box;
    padding-left: 10px;
}

#aiWizard .btn {
    background: transparent linear-gradient(90deg, #6A5AFF 0%, #FF5F5F 100%) 0% 0% no-repeat padding-box;
    border-radius: 15px;
    opacity: 1;
}

#aiInputs {
    margin-top: -20px;
}

#aiWizard input[type="text"],
#aiWizard textarea {
    background: #fff 0% 0% no-repeat padding-box;
    border: 1px solid #bbb;
    border-radius: 15px;
    font: 600 19px/27px Titillium Web;
    letter-spacing: .19px;
    width: 100%;
    box-sizing: border-box;
    padding-left: 10px;
    font-family: 'titillium_weblight', Arial, Verdana, Helvetica, Sans-Serif;
    margin-bottom: 36px;
    padding-right: 60px;
    padding-left: 60px;
    width: 100%;
    height: 60px;
    text-align: center;
}

#aiWizard textarea {
    resize: vertical;
    padding-right: 60px;
}

    #aiWizard textarea::-webkit-scrollbar {
        overflow: hidden;
    }

#aiWizard input[type="text"]::placeholder {
    color: #a6a6a6;
    text-align: center;
}

#aiWizard input[type="text"]::-webkit-input-placeholder {
    text-align: center;
}

#aiWizard input[type="text"]:-moz-placeholder { /* Firefox 18- */
    text-align: center;
}

#aiWizard input[type="text"]::-moz-placeholder { /* Firefox 19+ */
    text-align: center;
}

#aiWizard input[type="text"]:-ms-input-placeholder {
    text-align: center;
}

#aiWizard a.btn-submit {
    width: 300px;
    box-sizing: border-box;
}

#aiWizard li,
#aiWizard span,
#aiWizard p {
    color: #525252;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    margin-top: 18px;
}

    #aiWizard p.smallText {
        color: #525252;
        font-size: 13px;
        line-height: 24px;
        font-weight: 500;
        margin-top: 18px;
    }

#aiWizard .validation-summary-errors {
    margin: -30px 0 30px;
}

    #aiWizard .validation-summary-errors li {
        color: red;
    }

#moderationDetails {
    margin-top: 18px;
}

    #moderationDetails details {
        display: block;
        background-color: #fff;
        border: 1px solid #bbb;
        border-radius: 15px;
        padding: 15px;
        color: #525252;
        font-size: 18px;
        font-weight: 500;
        line-height: 24px;
        margin: 30px 0 0px 0px;
    }

p#completionViolationTarget,
p#completionViolationRetryTarget {
    color: red !important;
}

#aiWizard .hidden {
    display: none !important;
}

#aiWizard #wizardStartForm {
    position: relative;
}

    #aiWizard #wizardStartForm .resetButton {
        height: 50px;
        width: 50px;
        top: 5px;
        right: 5px;
        position: absolute;
        padding: 0 0 0 2px;
        margin: 0;
        border-radius: 12px;
    }

    #aiWizard #wizardStartForm .btn-submit {
        margin: -10px auto 20px;
    }

#aiWizard span#timer {
    font: normal normal bold 39px/43px 'titillium_webbold';
    letter-spacing: 0.39px;
}

.twoBoxesForWizard {
    margin-top: 30px;
    display: grid;
    grid-template-columns: calc(50% - 60px) 80px calc(50% - 60px);
    gap: 20px;
}

    .twoBoxesForWizard details {
        padding: 20px 30px;
        box-sizing: border-box;
        font-size: 13px;
        line-height: 21px;
        text-align: center;
        -webkit-box-shadow: 0px 0px 25px -7px rgba(0,0,0,0.3);
        -moz-box-shadow: 0px 0px 25px -7px rgba(0,0,0,0.3);
        box-shadow: 0px 0px 25px -7px rgba(0,0,0,0.3);
        border-radius: 15px;
        background-color: #fff;
        color: #525252;
        font-size: 18px;
        font-weight: 500;
        line-height: 24px;
        margin-top: 18px;
        margin-bottom: 20px;
    }

        .twoBoxesForWizard details summary {
            cursor: pointer;
            margin-bottom: 8px;
        }

    .twoBoxesForWizard .boxMiddle {
        display: table;
    }

    .twoBoxesForWizard .or {
        display: block;
        text-transform: none;
        font-weight: 500;
        margin: 30px 0px 0px;
        font-size: 50px;
        padding: 0;
        font-family: 'titillium_webbold';
        background: -webkit-linear-gradient(135deg, #6A5AFF 0%, #6A5AFF 5%, #FF5F5F 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin: auto;
        padding-top: 2px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        font-size: 18px;
        font-weight: 500;
        line-height: 24px;
        margin-top: 18px;
        font-family: Titillium Web;
    }

#advertiseAppGrid {
    margin: 30px auto;
    display: grid;
    padding: 0;
    grid-template-columns: 50% 50%;
    gap: 20px;
}

    #aiWizard > div:nth-child(3) > div.scoolioBlogAdFrame.margintop48 > a,
    #advertiseAppGrid > div:nth-child(3) > div > a {
        display: inline !important;
    }

    #advertiseAppGrid > div:nth-child(3) > div {
        margin-top: 0 !important;
    }

#aiWizard span.textBeforeBox {
    font-size: 23px;
    margin: 40px 0 20px;
    display: block;
    line-height: 36px;
}

#aiWizard .answerBox {
    padding: 40px 20px 40px;
    text-align: left;
    box-sizing: border-box;
    -webkit-box-shadow: 0px 0px 25px -7px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 25px -7px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 25px -7px rgba(0,0,0,0.3);
    border-radius: 10px;
    position: relative;
    z-index: 10;
}

#aiWizard div.ctaBoxForUser {
    background-color: #200c4b;
    border-radius: 30px;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    padding: 30px;
    box-sizing: border-box;
}

#aiWizard .repeatAiWizBox {
    border-radius: 30px;
    background: white;
    overflow: hidden;
}

/* 2.3.6.1 resp regeln Hausaufgaben KI */
@media screen and (max-width: 900px) {
    #advertiseAppGrid > div:nth-child(1) > a, #advertiseAppGrid > div:nth-child(2) > form > button {
        width: 270px !important;
    }

    #advertiseAppGrid {
        width: 560px;
        position: relative;
        box-sizing: border-box;
        grid-template-columns: calc(50% - 10px) calc(50% - 10px);
    }

        #advertiseAppGrid img {
            max-width: 100%;
        }

        #advertiseAppGrid .innerBlogAdframe {
            bottom: 175px;
        }
}

@media screen and (max-width: 600px) {

    #advertiseAppGrid {
        width: 100%;
        grid-template-columns: 100%;
    }

        #advertiseAppGrid > div:nth-child(4) {
            display: none;
        }

        #advertiseAppGrid > div:nth-child(3) > div > a > img {
            max-width: 560px;
        }

        #advertiseAppGrid .innerBlogAdframe {
            bottom: 0;
        }
}

@media screen and (max-width: 900px) {
    .doubleWidth {
        width: 100% !important;
        margin-left: 0 !important;
    }

    #aiWizard input[type="text"], #aiWizard textarea {
        width: 100%;
        margin-left: 0;
    }

    #aiWizard #wizardStartForm .resetButton {
        right: 5px;
    }
}

@media screen and (max-width: 640px) {
    #aiWizard .roundedScoolioShadow {
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .twoBoxesForWizard {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 420px) {
    #aiWizard input[type="text"]::placeholder {
        text-align: left;
        margin-left: 0;
    }

    #aiWizard input[type="text"], #aiWizard textarea {
        padding-left: 10px;
        text-align: left;
    }
}

/* !resp regeln Hausaufgaben KI */
/* !scoolio Hausaufgaben KI */
/* !Schuelerseiten */
/* 2.4 Hilfe */

#hilfegridcontainer {
    grid-template-columns: 450px 1fr;
}

    #hilfegridcontainer * {
        list-style: none;
    }

    #hilfegridcontainer > div.hilfeauswahlboxlinks {
        background-color: transparent;
        padding: 0;
    }

.hilfeauswahlboxlinks #faqselector {
    margin: 0;
    padding: 0;
}

.hilfeauswahlboxlinks strong {
    font: normal normal bold 19px/27px Titillium Web;
    letter-spacing: 0.19px;
    color: #525252;
    margin: 20px 20px;
    display: block;
}

.hilfeauswahlboxlinks #faqselector > .helpcategory > ul {
    margin: 0;
    padding: 0;
}

#hilfegridcontainer .helpcategory {
    background-color: #fff;
    border-radius: 15px;
    margin: 0 0 25px;
    padding: 0 20px;
    position: relative;
}

    #hilfegridcontainer .helpcategory::after {
        background-image: url(/imgs/icons/arrow_black.svg);
        background-size: cover;
        content: ' ';
        display: block;
        margin-top: 17px;
        height: 13px;
        width: 24px;
        position: absolute;
        top: 10px;
        right: 25px;
        transition: transform .3s;
    }

    #hilfegridcontainer .helpcategory.active::after {
        transform: rotate(90deg);
        transition: transform .3s;
    }

.hilfeauswahlboxlinks li {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    font-size: 15px;
    min-height: 40px;
    line-height: 30px;
    cursor: pointer;
    background: #F5F4F7 0% 0% no-repeat padding-box;
    border-radius: 15px;
    font: normal normal 600 19px/27px Titillium Web;
    letter-spacing: 0.19px;
    color: #525252;
}

.hilfeauswahlboxlinks li {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    font-size: 15px;
    min-height: 65px;
    line-height: 30px;
    cursor: pointer;
    padding: 20px;
}

/* to big content */
#faqselector > li:nth-child(8) {min-height: 90px;}

.helpcategory {
    position: relative;
    max-height: 50px;
    overflow: hidden;
    -webkit-transition: max-height 0.8s;
    -moz-transition: max-height 0.8s;
    transition: max-height 0.8s;
}

    .helpcategory.active {
        transition: all 1s ease;
        max-height: 20000px;
    }

.hilfeauswahlboxlinks li.helpcategory ul li {
    margin: 20px 0;
}


    .hilfeauswahlboxlinks li.helpcategory ul li.active {
        background: #525252 0% 0% no-repeat padding-box;
        color: #FFFFFF;
    }


.grid-container > .hilfsthemenrechts {
    padding: 0;
    background-color: transparent;
}

    .grid-container > .hilfsthemenrechts #faq-content {
        padding: 0;
        margin: 0;
    }

#faq-content > li {
    display: none;
    background-color: #fff;
    padding: 30px 40px;
    box-sizing: border-box;
    font-size: 30px;
    border-radius: 30px;
}

    #faq-content > li.active {
        display: block;
    }

#faq-content strong {
    font: normal normal 600 21px/24px Titillium Web;
    letter-spacing: 0.21px;
    color: #FE5F60;
    margin-bottom: 24px;
    display: inline-block;
}

#faq-content p {
    font: normal normal 600 19px/27px Titillium Web;
    letter-spacing: 0.19px;
}

/* 2.4.1 resp Regeln Hilfe */

@media screen and (max-width: 1000px) {

    #hilfegridcontainer {
        grid-template-columns: 1fr;
    }

    .hilfsthemenrechts {
        display: none;
    }


    element.style {
    }

    #hilfegridcontainer * {
        list-style: none;
    }

    .hilfeauswahlboxlinks li.helpcategory ul li {
        margin: 20px 0;
    }

    .hilfeauswahlboxlinks li {
        width: 100%;
        padding: 0;
        box-sizing: border-box;
        font-size: 15px;
        min-height: 65px;
        line-height: 30px;
        cursor: pointer;
        padding: 20px;
    }

        .hilfeauswahlboxlinks li.mobileactive {
            background: #525252 0% 0% no-repeat padding-box;
            color: #FFFFFF;
        }

    .hilfeauswahlboxlinks strong {
        font: normal normal bold 19px/27px Titillium Web;
        letter-spacing: 0.19px;
        color: #525252;
        margin: 20px 0px;
        display: block;
    }

    #faqselector > li:nth-child(8) {min-height: 65px;}
}
@media screen and (max-width: 460px) { #faqselector > li:nth-child(8) { min-height: 90px; }}

/* !resp Regeln Hilfe */
/* !Hilfe */
/*     2.5 Team */

#teamIntroductionGrid .item1 {
    position: relative;
}

    #teamIntroductionGrid .item1 h2 {
        margin: 0;
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        width: calc(100% - 60px);
    }

#teamIntroductionGrid .item2 {
    background-image: url('../imgs/websiteFramework/backgrounds/background_pointing_phone.png');
    grid-column: 2 / 4;
    color: #fff;
    min-height: 600px;
}

#teamvideo {
    margin: 0px auto 25px;
    width: 100%;
    max-width: 960px;
}

    #teamvideo video {
        max-width: 960px;
        width: 100%;
        height: auto;
        border-radius: 30px;
    }

.mitarbeiterBox {
    display: block;
    padding: 40px;
    box-sizing: border-box;
    background-size: cover;
    min-height: 780px;
    color: #fff;
    background-position: bottom;
    line-height: 27px;
}

    .mitarbeiterBox a {
        color: #fff;
    }

#textBoxMitarbeiterGrid.mitarbeiterBox {
    grid-column: 2 / 4;
    background-image: url('../imgs/websiteFramework/backgrounds/background_Team_2023.jpg');
    color: #fff;
}

#danny.mitarbeiterBox {
    background-image: url('../imgs/websiteFramework/backgrounds/Danny.jpg');
}

#steffi.mitarbeiterBox {
    background-image: url('../imgs/websiteFramework/backgrounds/Steffi.png');
}

#anne.mitarbeiterBox {
    background-image: url('../imgs/websiteFramework/backgrounds/Anne.png');
}

#andre.mitarbeiterBox {
    background-image: url('../imgs/websiteFramework/backgrounds/Andre.png');
}

#michael.mitarbeiterBox {
    background-image: url('../imgs/websiteFramework/backgrounds/Micha.png');
}

#richard.mitarbeiterBox {
    background-image: url('../imgs/websiteFramework/backgrounds/Richard.png');
}

#georg.mitarbeiterBox {
    background-image: url('../imgs/websiteFramework/backgrounds/Georg_Avatar.png');
}

#theresa.mitarbeiterBox {
    background-image: url('../imgs/websiteFramework/backgrounds/Theresa_Avatar.png');
}

.mitarbeiterBox h2 {
    margin: 0 0 10px;
}

.mitarbeiterBox p {
    margin: 0;
}


#gridOutroTeam .item1 {
    background-image: url('../imgs/websiteFramework/backgrounds/background_team_bottom.png');
}

#gridOutroTeam .item2 {
    grid-column: 2 / 4;
}

/* 2.5.1 resp regeln Team */

@media screen and (max-width: 1100px) {
    .mitarbeiterGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    #textBoxMitarbeiterGrid {
        grid-row: 1;
        grid-column: 1 / 3;
    }

    #anne.mitarbeiterBox {
        grid-row: 2;
    }

    #danny.mitarbeiterBox {
        grid-row: 2;
    }

    #darek.mitarbeiterBox {
        grid-row: 3;
    }

    #florian.mitarbeiterBox {
        grid-row: 3;
    }

    .mitarbeiterGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    #textBoxMitarbeiterGrid.mitarbeiterBox {
        grid-column: 1 / 3;
        color: #fff;
        background-size: cover;
    }

    #gridOutroTeam {
        grid-template-columns: repeat(1fr);
    }

        #gridOutroTeam .item1 {
            min-height: 600px;
            background-size: cover;
            background-position: center;
        }

        #gridOutroTeam .item1,
        #gridOutroTeam .item2 {
            grid-column: 1 / 4;
        }

    #teamIntroductionGrid .item1,
    #teamIntroductionGrid .item2 {
        grid-column: 1 / 4;
    }

    #teamIntroductionGrid .item2 {
        background-size: cover;
    }

    #teamIntroductionGrid .item1 h2 {
        margin: 0;
        position: relative;
        top: auto;
        transform: none;
        width: 100%;
    }
}


@media screen and (max-width: 740px) {
    .mitarbeiterGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    #textBoxMitarbeiterGrid.mitarbeiterBox {
        background-color: #fefefe;
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: center bottom;
        padding-bottom: 60vw;
        min-height: 100px;
    }

    #textBoxMitarbeiterGrid.mitarbeiterBox {
        background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3)), url(../imgs/websiteFramework/backgrounds/background_Team_Weihnachten.png);
        background-position: center center;
    }

    #textBoxMitarbeiterGrid {
        grid-row: 1;
        grid-column: 1 / 2;
    }

    #danny.mitarbeiterBox {
        grid-row: 2;
    }

    #anne.mitarbeiterBox {
        grid-row: 2;
    }

    #steffi.mitarbeiterBox {
        grid-row: 3;
    }
}

@media screen and (max-width: 640px) {
    .mitarbeiterGrid {
        grid-template-columns: repeat(1, 1fr);
    }

    #textBoxMitarbeiterGrid.mitarbeiterBox {
        grid-column: auto;
    }

    #textBoxMitarbeiterGrid {
        grid-row: 1;
    }

    #danny.mitarbeiterBox {
        grid-row: 2;
    }

    #anne.mitarbeiterBox {
        grid-row: 3;
    }

    #steffi.mitarbeiterBox {
        grid-row: 4;
    }
}

/* ! Team resp Regeln */
/* !Team */
/* 2.6 Karriere  */
/* 2.6.1 Karriereueberischt */

#karriereGrid {
    margin-top: 80px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 25px;
    padding-bottom: 25px;
    grid-auto-rows: minmax(100px,auto);
}

    #karriereGrid .panelOne {
        grid-column: 1/3;
        background-image: url('../imgs/websiteFramework/backgrounds/background_Team_2023.jpg');
        min-height: 780px;
    }

    #karriereGrid .panelTwo li p:nth-child(1) {
        font: normal normal 600 21px/24px Titillium Web;
        letter-spacing: 0.21px;
        margin-bottom: 6px;
    }

    #karriereGrid .panelTwo li p:nth-child(2) {
        font: normal normal 600 19px/27px Titillium Web;
        letter-spacing: 0.19px;
        margin: 6px 0;
    }

#newJobList h2,
#newJobList h3 {
    text-align: center;
    line-height: 90px;
    margin: 0;
}

#newJobList h2 {
    font: normal normal 600 55px/80px Titillium Web;
    letter-spacing: 0.55px;
    color: #525252;
    opacity: 1;
}

#newJobList h3 {
    font: normal normal 600 21px/60px Titillium Web;
    letter-spacing: 0.21px;
    color: #525252;
    opacity: 1;
}

#newJobList .jobEntry {
    padding: 40px;
    margin: 25px auto;
    margin-bottom: 10px;
    box-sizing: border-box;
    margin-bottom: 20px;
    /*
    -webkit-box-shadow: 0px 0px 25px -7px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 25px -7px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 25px -7px rgba(0,0,0,0.3);*/
    border-radius: 30px;
    box-sizing: border-box;
    max-width: 920px;
    background-color: #fff;
}

    #newJobList .jobEntry h4 {
        text-align: left;
        display: block;
        font-size: 21px;
        line-height: 24px;
        font-weight: 900;
        float: left;
        width: calc(100% - 220px);
        margin: 0 10px 0 0;
    }

    #newJobList .jobEntry p {
        text-align: left;
        display: block;
        float: left;
        width: calc(100% - 220px);
        margin: 10px 10px 0 0;
    }

#newJobList .jobEntry {
    position: relative;
}

    #newJobList .jobEntry a {
        position: absolute;
        top: 30px;
        right: 30px;
    }

/* 2.6.1.1 resp regeln Karriereuebersicht */

@media screen and (max-width: 900px) {
    #karriereGrid {
        grid-template-columns: repeat(1, 1fr);
    }

        #karriereGrid .panelOne {
            grid-column: auto;
        }
}

@media screen and (max-width: 640px) {
    #karriereGrid .panelOne {
        background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1)), url(../imgs/websiteFramework/background-team.jpg);
        background-position: center center;
    }

    #newJobList .jobEntry a {
        position: relative;
        top: auto;
        right: auto;
    }

    #newJobList .jobEntry h4,
    #newJobList .jobEntry p {
        width: 100%;
        text-align: center;
    }

    #newJobList .jobEntry {
        padding: 40px 40px 20px;
    }
}

/* !resp regeln Karriereuebersicht */
/* !Karriereueberischt */
/* 2.6.2 Jobpage */

#jobContentIntro {
    text-align: center;
    padding: 30px 120px 0;
    margin: -100px auto 25px;
}

    #jobContentIntro h1 {
        margin-bottom: 23px;
    }

#jobContentPage .contentContainerBlankBackground {
    box-sizing: border-box;
}

/* 2.6.2.1 resp regeln Jobpage */
@media screen and (max-width: 640px) {
    #jobContentIntro {
        margin: 0 auto 25px;
        padding: 30px 30px 0;
    }

    #jobContentPage h2.smallerHeading {
        font: normal normal 600 19px/27px Titillium Web;
    }
}

/* !Jobpage */
/* !Karriere */
/* 2.8 Formpages */

input#ConfirmedNewsletterRegistration[type="checkbox"] {
    display: block;
}

#requestContact label,
#requestCalenderStepTwo label {
    display: block;
    margin: 0 12px 12px;
    font: normal normal 600 19px/27px Titillium Web;
    letter-spacing: 0.19px;
}

#requestContact .formInputRound,
#requestCalenderStepTwo .formInputRound {
    background: var(--white) 0% 0% no-repeat padding-box;
    border: 1px solid var(--schrift);
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #1D1D1F;
    border-radius: 15px;
    font: 600 19px/27px Titillium Web;
    letter-spacing: 0.19px;
    width: 100%;
    box-sizing: border-box;
    padding-left: 10px;
    font: normal normal normal 19px/27px Titillium Web;
    letter-spacing: 0.19px;
}

    #requestContact .formInputRound::placeholder,
    #requestContact .formInputRound:-ms-input-placeholder,
    #requestContact .formInputRound::-ms-input-placeholder,
    #requestCalenderStepTwo .formInputRound::placeholder,
    #requestCalenderStepTwo .formInputRound:-ms-input-placeholder,
    #requestCalenderStepTwo .formInputRound::-ms-input-placeholder {
        color: #A6A6A6;
    }

#requestContact p,
#requestCalenderStepTwo p {
    margin: 12px;
    color: #525252;
}

    #requestContact p.smallParagraph,
    #requestCalenderStepTwo p.smallParagraph {
        font: 600 19px/27px Titillium Web;
        letter-spacing: 0.12px;
        color: #1D1D1F;
    }

#requestCalenderStepTwo .trippleRowFormGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    padding-bottom: 25px;
    padding-top: 25px;
    grid-auto-rows: minmax(100px, auto);
}

#requestCalenderStepTwo .privacyConsentContainer .checkBoxAreaLeft {
    float: left;
    width: 30px;
    padding: 15px 10px;
    box-sizing: border-box;
}

#requestCalenderStepTwo .privacyConsentContainer .contentAreaRight {
    float: left;
    width: calc(100% - 30px);
}

#requestContact button.buttonShaped,
#requestCalenderStepTwo button.buttonShaped {
    margin: 36px 0;
}

#requestContact textarea {
    width: 100%;
    resize: vertical;
    height: 120px;
}

    #requestContact textarea::placeholder {
        color: #A6A6A6;
    }

#requestContact .selectContactInstitution {
    background: #525252 0% 0% no-repeat padding-box;
    border-radius: 15px;
    border: none;
    width: 100%;
    height: 30px;
    box-sizing: border-box;
    padding: 0 10px;
    font: normal normal normal 19px/27px Titillium Web;
    letter-spacing: 0.19px;
    color: #D6D6D6;
}

    #requestContact .selectContactInstitution option {
        border-radius: 15px;
        border: none;
        width: 100%;
        height: 30px;
        box-sizing: border-box;
        padding: 0 10px;
        font: normal normal normal 19px/27px Titillium Web;
        letter-spacing: 0.19px;
        color: #D6D6D6;
    }

.errorMsg {
    display: block;
    margin: 12px;
    font: normal normal 600 19px/27px Titillium Web;
    color: #F63D54;
}

/* 2.8.1 resp regeln formPages */

@media screen and (max-width: 750px) {
    #requestContact .dividingGrid {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* !responsive formPages */
/* 2.8.2 FairDiscountForm */

#requestContact.specialIntrest .contentElement {
    padding-bottom: 40px;
}

#requestContact.specialIntrest input[type=checkbox] {
    display: inline;
}

/* !FairDiscountForm */
/* !formPages */
/* 2.9 Blogs */

#blogOverview {
    padding-top: 40px;
}

#blogOverview h1 {
    margin-top: 10px;
    max-width: 70%;
}

#blogOverview .breadcrumb {
    max-width: 70%;
}

#blogOverview #singleArticleContent > picture > img {
    border-radius: 30px;
    display: block;
    width: 100%;
    margin: 24px 0;
}

#blogOverview #singleArticleContent video {
    width: 100%;
    border-radius: 30px;
}

#singleArticleContent #NewsletterConsent {
    display: block;
}

span.bildUnterschrift {
    display: block;
    margin: -12px 0 24px;
    color: #B5B5B5;
}

#blogOverviewGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    grid-auto-rows: minmax(100px, auto);
    grid-template-columns: 2fr 1fr;
    padding-top: 25px;
    padding-bottom: 25px;
}

.releaseDate {
    font: normal normal 600 12px/27px Titillium Web;
    letter-spacing: 0.12px;
    color: #525252;
}

.blogGridRight > div {
    background-color: #fff;
    padding: 40px;
    box-sizing: border-box;
    font-size: 30px;
    border-radius: 30px;
    margin-bottom: 25px;
    padding-bottom: 10px;
    font: 600 19px/27px Titillium Web;
}

.blogGridRight h3 {
    letter-spacing: 0.21px;
    margin: 0 0 10px;
}

ul.tagList {
    margin: 0;
    padding: 0;
}

    ul.tagList li {
        text-decoration: none;
        background: #F5F4F7 0% 0% no-repeat padding-box;
        border-radius: 15px;
        text-decoration: none;
        font: 600 19px/27px Titillium Web;
        letter-spacing: 0.19px;
        color: #525252;
        display: inline-block;
        margin: 0 8px 12px 0;
        padding: 10px;
    }

.blog-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    grid-auto-rows: minmax(100px, auto);
}

    .blog-grid-container a {
        border-radius: 30px;
        background-color: #fff;
        overflow: hidden;
        color: #1f1f1f;
        text-decoration: none;
        position: relative;
    }

        .blog-grid-container a img {
            object-fit: cover;
            width: 100%;
        }

    .blog-grid-container .imageWrap {
        justify-content: center;
    }

    .blog-grid-container .articleExcerptContent {
        width: calc(100% - 60px);
        padding: 30px 30px 80px;
    }

        .blog-grid-container .articleExcerptContent .articleExcerptTag {
            font: normal normal 600 12px/27px Titillium Web;
            letter-spacing: 0.12px;
        }

    .blog-grid-container h2 {
        font: normal normal 600 25px/29px Titillium Web;
        letter-spacing: 0.25px;
        margin: 10px 0;
    }

    .blog-grid-container .articleExcerptContent .releaseDate {
        position: absolute;
        bottom: 30px;
        left: 30px;
        font: normal normal 600 12px/27px Titillium Web;
        letter-spacing: 0.12px;
    }

#blogOverview #singleArticleContent > picture > img.halfBlogImage {
    width: 50%;
    height: auto;
    margin: 24px 0;
}

@media screen and (min-width: 1400px) {
    #blogOverviewGrid > div.blogGridLeft > div > a:nth-child(1) {
        display: grid;
        grid-auto-rows: minmax(100px, auto);
        grid-template-columns: 2fr 1fr;
        grid-column: 1 / 3;
        position: relative;
    }

/*        #blogOverviewGrid > div.blogGridLeft > div > a:nth-child(1) .releaseDate {
            left: calc(66% + 30px);
        }*/
}

#blogArticle img {
    border-radius: 30px;
}

ul.tagList {
    margin: 0 0 0 -10px;
    width: calc(100% + 20px);
    padding: 0;
}

    ul.tagList li {
        text-decoration: none;
        background: #F5F4F7 0% 0% no-repeat padding-box;
        border-radius: 15px;
        text-decoration: none;
        display: inline-block;
        margin: 0 8px 12px 0;
        padding: 10px;
        font: normal normal 600 19px/27px Titillium Web;
        letter-spacing: 0.19px;
        color: #525252;
    }

/* 2.9.1 resp Regeln Blogs */

@media screen and (max-width: 1100px) {
    .blog-grid-container {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media screen and (max-width: 800px) {
    #blogOverview h1,
    #blogOverview .breadcrumb {
        max-width: 100%;
    }

    #blogOverviewGrid {
        grid-template-columns: repeat(1, 1fr);
        gap: 25px;
    }
}

/* !resp Regeln Blogs */

.dividingGridForm {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 25px;
    padding-bottom: 10px;
    grid-auto-rows: minmax(10px,auto);
}

    .dividingGridForm label {
        display: block;
        margin: 0 12px 12px;
        font: normal normal 600 19px/27px Titillium Web;
        letter-spacing: 0.19px;
    }

    .dividingGridForm input,
    .dividingGridForm select {
        width: 100%;
    }

    .dividingGridForm input {
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #1D1D1F;
        border-radius: 15px;
        width: 100%;
        box-sizing: border-box;
        padding-left: 10px;
        font: normal normal normal 19px/27px Titillium Web;
        letter-spacing: 0.19px;
    }

    .dividingGridForm select {
        background: #525252 0% 0% no-repeat padding-box;
        border-radius: 15px;
        border: none;
        width: 100%;
        height: 30px;
        box-sizing: border-box;
        padding: 0 10px;
        font: normal normal normal 19px/27px Titillium Web;
        letter-spacing: 0.19px;
        color: #D6D6D6;
    }

#submitButtonForGenZ2023 {
    background: transparent linear-gradient(90deg, #6A5AFF 0%, #FF5F5F 100%) 0% 0% no-repeat padding-box;
    border-radius: 15px;
    color: #fff;
    width: 200px;
    height: 58px;
    font: normal normal bold 19px/58px Titillium Web;
    letter-spacing: 0.19px;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    border: none;
}

    #submitButtonForGenZ2023:hover {
        background: transparent linear-gradient(270deg, #5D36EE 0%, #5D36EE 100%) 0% 0% no-repeat padding-box;
        transition: all 1s;
    }

#blogaarticleFrame .checkBoxAreaLeft {
    margin-top: 20px;
    width: 30px;
    float: left;
}

#blogaarticleFrame .contentAreaRight {
    margin-top: 20px;
    width: calc(100% - 30px);
    float: left;
    margin-top: -5px;
}

.GenZMiddleContent .errorMsg {
    margin-left: -8px;
    margin-top: 2px;
}

.GenZMiddleContent .errorMsg {
    max-width: 300px;
    margin: 0 auto 20px;
}

.specialListCheckmarked {
    line-height: 24px;
    font-size: 15px;
    font-weight: 500;
    margin-top: 20px;
    margin-bottom: 40px;
}

    .specialListCheckmarked li {
        margin: 20px 40px 10px;
        position: relative;
        font-size: 16px;
        width: calc(100% - 40px);
    }

        .specialListCheckmarked li::after {
            content: ' ';
            position: absolute;
            left: -40px;
            top: 5px;
            background-image: url(img/css/icon_check.svg);
            height: 15px;
            width: 20px;
            background-size: 20px 15px;
        }

.fadeAwayText {
    margin-top: -305px;
    height: 300px;
    width: 100%;
    position: relative;
    background-color: #000;
    z-index: 10;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(245,244,247,1) 20%, rgba(245,244,247,0) 100%);
}

/* !UnternehmensBlog */
/* !Blogs */
/* 2.10 PromotionalOverviewPage */

#promotionalOverview .promotion {
    background-color: #fff;
    border-radius: 30px;
    margin-bottom: 30px;
    overflow: hidden;
    position: relative;
}

#promotionalOverview .imageleft {
    float: left;
    width: 65%;
    line-height: 0;
}

    #promotionalOverview .imageleft img {
        width: 100%;
        height: auto;
    }

#promotionalOverview .textRight {
    float: left;
    width: 35%;
    box-sizing: border-box;
    padding: 30px;
}

#promotionalOverview .buttonShaped {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: calc(35% - 60px);
}

/* 2.10.1 resp regeln PromotionalOverviewPage */

@media screen and (max-width: 800px) {
    #promotionalOverview .imageleft,
    #promotionalOverview .textRight {
        float: none;
        width: 100%;
    }

    #promotionalOverview {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }

        #promotionalOverview .textRight {
            padding-bottom: 90px;
        }

        #promotionalOverview .buttonShaped {
            width: 100%;
            max-width: 240px;
        }
}

@media screen and (max-width: 480px) {
    #promotionalOverview .buttonShaped {
        width: 240px;
        left: 50%;
        margin-left: -120px;
    }
}

/* !responsive rules PromotionalOverviewPage */
/* !PromotionalOverviewPage */
/* 2.11 ForStudentsPage */

/*
2.11 Datenschutz und Nutzungsbedinungen
2.11.1 resp regeln Datenschutz und Nutzungsbedinungen
*/

.ac {
    margin-top: 20px;
}

.ac-label {
    position: relative;
    padding: .5em 2em .5em .7em;
    margin-bottom: .5em;
    display: block;
    cursor: pointer;
    background-color: #e5e5e5;
    transition: background-color .15s ease-in-out;
    font-size: 24px;
    line-height: 28px;
    font-weight: 500;
    border-radius: 10px;
    overflow: hidden;
}

    .ac-input:checked + label, .ac-label:hover {
        background-color: #d5d5d5;
    }

    .ac-label:after, .ac-input:checked + .ac-label:after {
        content: "+";
        position: absolute;
        display: block;
        right: 0;
        top: 0;
        width: 2em;
        height: 100%;
        line-height: 1.9em;
        text-align: center;
        background-color: #d5d5d5;
        transition: background-color .15s ease-in-out;
    }

    .ac-label:hover:after, .ac-input:checked + .ac-label:after {
        background-color: #d5d5d5;
    }

.ac-input:checked + .ac-label:after {
    content: "-";
}

.ac-input {
    display: none;
    opacity: 0;
    height: 0px;
}

.ac-text, .ac-sub-text {
    opacity: 0;
    height: 0;
    margin-bottom: 0;
    transition: opacity .5s ease-in-out;
    overflow: hidden;
}

.ac-input:checked ~ .ac-text, .ac-sub .ac-input:checked ~ .ac-sub-text {
    opacity: 1;
    height: auto;
}

.ac-sub .ac-label {
    background: none;
    font-weight: 600;
    padding: .5em 2em;
    margin-bottom: 0;
}

    .ac-sub .ac-label:checked {
        background: none;
        border-bottom: 1px solid whitesmoke;
    }

    .ac-sub .ac-label:after, .ac-sub .ac-input:checked + .ac-label:after {
        left: 0;
        background: none;
    }

    .ac-sub .ac-input:checked + label, .ac-sub .ac-label:hover {
        background: none;
    }

.ac-sub-text {
    padding: 0 1em 0 2em;
}

    .ac-sub-text p {
        margin: 0 0 10px;
    }

    .ac-sub-text h2 {
        margin: 20px 0 20px;
    }

/* !resp regeln Datenschutz und Nutzungsbedinungen  */
/* !Datenschutz und Nutzungsbedinungen */
/* 2.12 Systemseiten */


#systemContent {
    width: 100%;
    max-width: 840px;
    margin: 0 auto;
    padding: 30px 0px 60px;
    text-align: center;
}

    #systemContent .larger {
        text-align: center;
        font: normal normal 600 55px/76px Titillium Web;
        letter-spacing: 0.55px;
        margin: 0 0 60px;
    }

    #systemContent .rescuelogo img {
        width: 100px;
        height: auto;
        margin: 0 auto 30px;
    }

    #systemContent input {
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #1D1D1F;
        border-radius: 15px;
        width: 300px;
        box-sizing: border-box;
        padding-left: 10px;
        font: normal normal normal 19px/27px Titillium Web;
        letter-spacing: 0.19px;
    }

    #systemContent button {
        background: transparent linear-gradient(90deg, #6A5AFF 0%, #FF5F5F 100%) 0% 0% no-repeat padding-box;
        border-radius: 15px;
        color: #fff;
        margin: 30px 12px;
        width: 300px;
        height: 58px;
        font: normal normal bold 19px/58px Titillium Web;
        letter-spacing: 0.19px;
        text-decoration: none;
        display: inline-block;
        text-align: center;
        cursor: pointer;
        border: none;
        transition: all 1s;
    }

        #systemContent button:hover {
            background: transparent linear-gradient(270deg, #5D36EE 0%, #5D36EE 100%) 0% 0% no-repeat padding-box;
            transition: all 1s;
        }

#aiWizard #wizardStartForm .resetButton {
    background: #fff;
    border-radius: 12px;
    color: #333;
    border-color: #888;
    line-height: 0px;
}

/* 2.12.1 resp regeln für systemseiten */

@media screen and (max-width: 640px) {
    #systemContent .larger {
        font: 600 32px/45px Titillium Web;
        letter-spacing: 0.39px;
    }
}

/* !resp regeln  für systemseiten */
/* !Systemseiten */
/* 2.13. berufswahltest */

.answerContainer {
    display: none;
    padding-top: 20px;
}

    .answerContainer.active {
        display: block;
    }

    .answerContainer span.lightgrey {
        letter-spacing: 0.19px;
        color: #D6D6D6;
        margin-top: 110px;
        display: inline-block;
    }

.answerArea {
    width: calc(50% - 60px);
}

    .answerArea strong {
        display: inline-block;
        margin-bottom: 20px;
    }

    .answerArea img {
        border-radius: 30px;
        margin-bottom: -35px;
        width: 100%;
        height: auto;
    }

    .answerArea button {
        width: 180px;
        height: 60px;
        background: transparent linear-gradient(90deg, #6A5AFF 0%, #FF5F5F 100%) 0% 0% no-repeat padding-box;
        border-radius: 15px;
        letter-spacing: 0.19px;
        color: #fff;
        border: none;
        display: inline-block;
        cursor: pointer;
        padding: 0 15px;
        font-family: Titillium Web;
    }

#answerArea {
    margin-top: 30px;
}


.anserBoxLeft {
    float: left;
    cursor: pointer;
}

.anserBoxRight {
    float: right;
    cursor: pointer;
}


#berufwahlTest .contentElement h2 {
    padding: 0;
    letter-spacing: 0;
}

#berufwahlTest .contentElement p {
    padding: 0;
}

#BerufswahlTestResult {
    text-align: center;
    display: none;
    margin-top: -80px;
}

    #BerufswahlTestResult .content {
        margin: 0px auto;
        padding: 0;
    }

    #BerufswahlTestResult > div {
        display: none;
    }

    #BerufswahlTestResult .berufsResultGrid {
        display: none;
    }

    #BerufswahlTestResult img {
        width: 100%;
        max-width: 970px;
        border-radius: 30px;
    }

    #BerufswahlTestResult p {
        max-width: 660px;
        display: inline-block;
        margin: 40px auto;
    }

    #BerufswahlTestResult .content h2 {
        margin: -40px 20px -20px;
        line-height: 64px;
    }

    #BerufswahlTestResult .content p {
        padding: 0;
        margin: 20px;
    }

    #BerufswahlTestResult a {
        width: 180px;
        height: 60px;
        background: transparent linear-gradient(270deg, #ff5b5e 0%, #ff7f66 100%) 0% 0% no-repeat padding-box;
        border-radius: 15px;
        font: normal normal bold 19px/27px titillium_webbold;
        letter-spacing: 0.19px;
        color: #fff;
        border: none;
        display: inline-block;
        cursor: pointer;
        padding: 0 15px;
        line-height: 60px;
    }

a.berufwahlTestLink {
    margin: -50px 0 50px;
    font-size: 15px;
    display: block;
}

#BerufswahlTestResult .panelOne {
    grid-column: 1 / 4;
    overflow: hidden;
    text-align: left;
}

#BerufswahlTestResult .dividingGrid .left img {
    margin: -40px auto -80px;
    max-width: 600px;
    height: auto;
}

#BerufswahlTestResult .dividingGrid .right h2 {
    margin: 50px 0;
}

#BerufswahlTestResult .dividingGrid .right a {
    margin: 0 20px 20px 0;
}

#BerufswahlTestResult .dividingGrid .right p {
    margin: 0 0 50px;
}

/* 2.13.1 resp regeln berufswahltest */

@media screen and (max-width: 800px) {

    .anserBoxLeft,
    .anserBoxRight {
        float: none;
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
    }

    .answerContainer span.lightgrey {
        margin: 15px auto;
        display: inline-block;
    }

    #BerufswahlTestResult .panelOne .dividingGrid .left,
    #BerufswahlTestResult .panelOne .dividingGrid .right {
        grid-column: 1 / 4;
        text-align: center;
    }

    #BerufswahlTestResult .dividingGrid .right a {
        margin: 20px 20px;
    }
}

/* !responsive rules berufwahltest */
/* !berufswahltest */
/* delete when finished */

.toDoCointainer {
    max-width: 800px;
    width: 100%;
    margin: 40px;
    padding: 40px;
    box-sizing: border-box;
    background-color: pink;
}