html {
    -webkit-text-size-adjust: 100%;
}

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

    body {
        line-height: 1.4;
        max-width: 100vh;
        overflow-x: hidden;

        --space: 40px;
    }

    .container.content {
        overflow: hidden;
    }

    body.ftde nav.meta li#navitem595,
    body.ftde nav.meta li#navitem596,
    body.ftde nav.meta li#navitem597,
    body.ftde nav.meta li#navitem603,
    body.towns nav.main li#navitem604,
    body.schools nav.main li#navitem605,
    body.unis nav.main li#navitem606 {
        display: block;
        font-family: 'Alegreya';
        font-weight: 900;
        font-size: 24px;
        line-height: 28px;
    }

    body.ftde nav.meta li#navitem595 a,
    body.ftde nav.meta li#navitem596 a,
    body.ftde nav.meta li#navitem597 a,
    body.ftde nav.meta li#navitem603 a,
    body.towns nav.main li#navitem604 a,
    body.schools nav.main li#navitem605 a,
    body.unis nav.main li#navitem606 a {
        font-weight: 900;
        padding: 15px 40px 15px 20px;
    }

    .col-md-4.tw {
        padding: inherit;
    }
    .col-md-4.inst {
        padding: inherit;
    }

    header.main > .container > .row > .col-sm-12 {
        padding-left: 0;
        padding-right: 0;
    }
    .outer > .container.content > .row > .col-sm-12 {
        padding-left: 0;
        padding-right: 0;
    }
    .outer > .container.content > .row > .main.col-sm-12 {
        padding-left: 15px;
        padding-right: 15px;
    }

    header.main {
        height: 70px;
    }

    header.main .print-btn {
        display: none;
    }

    header.main .logo {
        left: 15px;
        width: 60px;
        height: 75px;
        background-size: auto 55px;
        z-index: 100;
    }

    header.main nav.main {
        display: none;
        position: absolute;
        width: 100%;
        top: 90px;
        height: auto;
        text-transform: none;
        background: none;
        z-index: 10;
    }

    header.main nav.main::before{
        content: '';
        position: fixed;
        top: 89px;
        left: 0;
        right: 0;
        bottom:0;
        opacity: 0;
        background-color: rgba(0,0,0,.5);
        z-index:-1;
        transition: var(--transition);
        pointer-events: none;
    }

    header.main nav.main[style="display: block;"]::before {
        opacity: 1;
    }

    header.main nav.main div.meta {
        display: block;
    }
    header.main nav.main .back {
        display: none;
    }

    header.main nav.main ul {
        text-align: left;
        margin-right: 0;
        font-family: 'Alegreya';
        font-weight: 900;
        font-size: 24px;
        line-height: 28px;
        background-color: white;
    }
    header.main nav.main ul li {
        display: block;
        margin: 0;
    }

    header.main nav.main ul > li > ul li {
        border-top: 1px solid var(--col-mistysky);
        }

    header.main nav.main ul li:not(.active):hover > a {
        border: none;
        background-color: var(--col-mistysky);
        color: var(--col-richblack);
    }

    header.main nav.main ul li.active > a {
        border: none;
        background-color: var(--col-nightsky);
        color: white;
    }

    header.main nav.main ul li:hover > a {
        color: var(--col-richblack);
        background-color: transparent;
    }

    header.main nav.main ul li.active:hover > a {
        background-color: var(--col-nightsky);
        color: white;
    }

    header.main nav.main .meta ul li:hover > a, header.main nav.main ul ul li:hover > a {
        border: none;
    }

    header.main nav.main > ul > li {
        margin: 0;
        border-bottom: 1px solid var(--col-mistysky);
    }
    header.main nav.main > ul > li > a {
        display: block;
        padding: 15px 40px 15px 20px;
        color: var(--col-nightsky);
    }

    header.main nav.main ul li.has-children > .icon-mob {
        display: block;
        position: absolute;
        top: 10px;
        right: 4px;
        width: 34px;
        height: 34px;
        cursor: pointer;
        z-index: 2;
    }
    header.main nav.main ul li.has-children > .icon-mob::before {
        content: '\e90b';
        font-family: 'ft-kamp-icons' !important;
        position: absolute;
        top: 5px;
        left: 5px;
        transition: all .32s;
    }
    header.main nav.main ul li.has-children > .icon-mob.active::before {
        transform: rotate(180deg);
        color: white;
    }

    header.main nav.main > ul > li > ul {
        position: relative;
        width: auto;
        top: unset;
        box-shadow: none;
        padding: 0;
    }
    header.main nav.main > ul > li:hover > ul {
        display: none;
    }
    header.main nav.main > ul > li > ul::before {
        display: none;
    }
    header.main nav.main ul > li > ul > li.has-children > a::after {
        display: none;
    }

    header.main nav.main > ul > li > ul > li:hover > ul {
        display: none;
    }
    header.main nav.main > ul > li > ul > li > a {
        display: block;
        font-size: 18px;
        line-height: 32px;
        padding: 13px 40px 13px 35px;
    }
    header.main nav.main ul > li > ul > li a:hover,
    header.main nav.main ul > li > ul > li.active a,
    .towns header.main nav.main ul > li > ul > li:hover,
    .towns header.main nav.main ul > li > ul > li.active,
    .schools header.main nav.main ul > li > ul > li:hover,
    .schools header.main nav.main ul > li > ul > li.active,
    .unis header.main nav.main ul > li > ul > li:hover,
    .unis header.main nav.main ul > li > ul > li.active {
        background-color: var(--col-mistysky);
        color: var(--col-richblack);
        font-weight: 400;
    }
    header.main nav.main > ul > li > ul > li > ul {
        position: relative;
        top: auto;
        right: auto;
        width: auto;
        padding: 0;
        font-size: 12px;
        line-height: 16px;
        background-color: #fff;
        box-shadow: none;
    }
    header.main nav.main ul > li > ul > li.has-children > ul > li > a {
        padding-left: 50px;
    }

    header.main nav.main div.meta > ul {
        padding: 15px 0;
    }

    header.main nav.main div.meta > ul > li > a {
        display: block;
        font-family:'Exo 2';
        font-weight: 400;
        font-size: 14px;
        line-height: 24px;;
        padding: 15px 7px 7px 15px;
        color: var(--col-nightsky);
    }

    header.main.start nav.main {
        display: block;
        position: relative;
        width: auto;
    }
  
    header.main.start nav.main ul {
        padding: 0 15px;
    }
    body.ftde header.main.start nav.main ul {
        display: none;
    }
    header.main.start nav.main ul li {
        padding: 0 0 0 32px;
    }
    header.main.start nav.main ul li:last-of-type {
        border-bottom: none;
    }
    header.main.start nav.main ul li a {
        padding: 0;
        background-color: transparent;
    }
    header.main.start nav.main ul li a::after {
        right: auto;
        left: 0;
        width: 18px;
        height: 18px;
        margin: -9px 0 0;
        background-size: auto 18px;
    }
    header.main nav.main ul li.schools a::after {
        background-position: -18px 0;
    }
    header.main nav.main ul li.unis a::after {
        background-position: -36px 0;
    }
    header.main nav.main .back {
        position: relative;
        top: auto;
        left: auto;
        margin: 0 0 0 15px;
        padding: 0 0 0 19px;
    }
    .towns header.main nav.main .back, .schools header.main nav.main .back, .unis header.main nav.main .back {
        left: 200px;
    }

    header.main.start nav.meta ul {
        display: none;
        position: absolute;
        top: 0;
        width: 100%;
    }
    header.main.start nav.meta ul {
        position: absolute;
        top: 55px;
        padding: 0;
        text-align: left;
        margin-right: 0;
        background-color: white;
        z-index: 11;
    }

    header.main.start nav.meta ul::before{
        content: '';
        position: fixed;
        top: 90px;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        background-color: rgba(0,0,0,.5);
        z-index:-1;
        transition: var(--transition);
        pointer-events: none;
    }

    header.main.start nav.meta ul[style="display: block;"]::before {
        opacity: 1;
    }

    header.main.start nav.meta ul li {
        display: block;
        margin: 0;
        padding: 0;
        background-color: white;;
    }

    header.main.start nav.meta ul li:last-of-type{
        padding-bottom: 20px;
    }

    header.main.start nav.meta ul li a {
        display: block;
        padding: 10px 20px;
        color: var(--col-nightsky);
    }

    header.main.start nav.meta ul li:hover a {
        background-color: var(--col-mistysky);
        color: var(--col-richblack);
    }

    header.main.start nav.meta ul li a:hover {
        text-decoration: none;
    }

    header.main .right-bar {
        width: 100%;
    }
    header.main .search {
        float: none;
        position: absolute;
        top: 1px;
        right: 0;
        width: 100%;
    }
    header.main .toggle-mob {
        display: block;
    }
    header.main .search form {
        display: none;
        position: absolute;
        top: 40px;
        right: -20px;
        width: 100%;
        padding: 10px 0 10px 10px;
        background: #dedede;
        z-index: 2;
    }
    header.main .search input[type="text"] {
        width: 68%;
    }
    header.main .search .toggle-mob {
        position: absolute;
        top: 4px;
        right: 70px;
        width: 20px;
        height: 20px;
    }
    header.main nav.meta .toggle-mob,
    header.main nav.meta .toggle-mob-meta {
        position: absolute;
        top: 4px;
        right: 0px;
        width: 50px;
        padding: 0 10px;
        height: 44px;
    }

    header.main nav.meta .toggle-mob:hover,
    header.main nav.meta .toggle-mob-meta:hover {
        text-decoration: none;
    } 

    header.main nav.meta .toggle-mob::after,
    header.main nav.meta .toggle-mob-meta::after {
        content: '\e906';
        font-family: 'ft-kamp-icons' !important;
        color: var(--col-nightsky);
        font-size: 30px;
        font-weight: 400;
        }
    header.main nav.meta .toggle-mob.active,
    header.main nav.meta .toggle-mob-meta.active {
        background-position: right center;
    }
    header.main nav.meta ul {
        display: none;
        position: absolute;
        top: 43px;
        right: -20px;
        width: 375px;
        color: #fff;
        background-color: #666;
        padding: 10px 0;
    }
    header.main nav.meta ul li a {
        color: #fff;
    }

    .ce-intext.ce-right .ce-gallery {
        margin-left: 0;
    }
    .ce-gallery img {
        max-width: 100%;
        height: auto;
    }

    .top-slider::before {
        height: 120px;
    }

    .top-slider .flexslider::before{
        font-size: 72px;
        top: -72px;
    }

    .top-slider .flexslider::after {
        top: -45px;
        left: 31%;
        font-size: 14px;
    }

    .top-slider .text {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: auto;
        padding: 20px 15px;
        text-align: center;
        transform: translateY(0);
    }
    .top-slider .text h2, .top-slider .text h3 {
        color: var(--col-nightsky);
        text-shadow: none;;
    }
    .top-slider .text span.h2 {
        font-size: 46px;
        line-height: 1;
    }
    .top-slider .text h2 {
        font-size: 50px;
        word-break: break-word;
    }

    .top-slider .text h2 br,
    .top-slider .text h3 br {
        display: none;
    }
    .flexslider .flex-control-nav {
        position: relative;
        bottom: auto;
        margin: 0 0 10px;
    }
    .flex-control-paging li a {
        position: relative;
        top: 2px;
        background: var(--col-nightsky);
        border: none;
        border-top: 10px solid white;
        border-bottom: 10px solid white;
        height: 22px;
        opacity: .4;
    }

    .flex-control-paging li a.flex-active {
        background: var(--col-nightsky);
        opacity: 1;
    }

    .flex-control-paging li a:not(.flex-active):hover {
        background: var(--col-nightsky);
        opacity: 1;
    }

    .teaser-folding {
        padding: 20px 15px;
    }
    .teaser-folding .read-more {
        padding: 0 16px 0 0;
        font-size: 13px;
    }
    .teaser-folding .read-more::after {
        top: 7px;
        width: 11px;
        background-size: auto 7px;
    }
    .teaser-folding .folding .shut {
        padding: 0 16px 0 0;
        font-size: 13px;
    }
    .teaser-folding .folding .shut::after {
        top: 6px;
        right: 0;
        width: 11px;
        background-size: auto 7px;
    }
    .teaser-folding h2.bg {
        height: auto;
        margin: 0 0 12px;
        padding: 10px 10px;
        line-height: 20px;
        font-size: 18px;
    }

    .content-slider .text {
        padding: 10px 0 0;
    }
    .content-slider .text .quote-text {
        padding: 0 40px;
        font-size: 14px;
        line-height: 20px;
    }

    .news-events {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .news-events .news-teaser-outer {
        margin: 5px 0 0;
    }
    .news-teaser-outer {
        position: relative;
    }

    .container.content .news-teaser a {
        grid-template-columns: auto;
        gap: 10px;
    }

    .news-events .news-teaser .image {
        background-color: transparent;
        width: unset;
        margin: 0 15px;
    }

    .news-events .news-teaser .image img {
        height: 55vw;
        max-width: calc(100vw - 30px);
    }

    .news-events .news-teaser .bottom {
        border: none;
        border-radius: 0;
        height: 18px;
    }

    .news-events .news-teaser .bottom::after {
        line-height: 18px;
    }

    .news-events h3 {
        margin: 0 0 6px;
        font-size: 12px;
    }
    .news-events .news-teaser .text {
        padding:  0 15px;
    }
    .news-events .news-teaser .text p {
        line-height: 1.2;
    }

    .news-teaser-outer .row:nth-of-type(2) {
        position: absolute;
        top: 240px;
        right: -2px;
    }
    .news-teaser-outer #c5305 + .row {
        position: absolute;
        top: 200px;
        right: -2px;
    }
    .news-teaser-outer #c3688 + .row {
        position: absolute;
        top: 550px;
        right: -16px;
    }
    .news-events .more-events a, .news-events .csc-layout-30 a {
        margin: 20px 0 0 0;
    }
    .news-events .more-news a::before,
    .news-events .csc-layout-20 a::before {
        top: -2px;
        right: 0;
        width: 19px;
        height: 20px;
        background-size: auto 19px;
    }
    .news-events .more-news a.towns::before,
    .news-events .csc-layout-20 a.towns::before {
        background-position: 0 1px;
    }
    .news-events .more-news a.schools::before,
    .news-events .csc-layout-20 a.schools::before {
        background-position: -19px 1px;
    }
    .news-events .more-news a.unis::before, .news-events .csc-layout-20 a.unis::before {
        background-position: -38px 1px;
    }
    .news-events .more-news a.ftde::before, .news-events .csc-layout-20 a.ftde::before {
        background-position: -57px 1px;
    }
    .news-teaser-outer .col-xs-6:nth-of-type(2n+1) {
        clear: both;
    }

    .news-events .news > .row .event-teaser, .news-events .news > .row .news-teaser.Termin {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 15px;
    }

    .campaign-start .news-events .event-teaser .date,
    .news-events .news-teaser.slim .date {
        padding: 10px 0 0;
    }

    .news-teaser-outer .ce-textpic {
        overflow: visible;
    }



    .tx-fttowns .campaign-overview{
        background-color: #fff;
    }


    .campaign-overview {
        padding: 20px 0 0;
    }
    .campaign-overview .row {
        margin: 0;
    }
    .campaign-overview > .row > .col-xs-4 {
        padding: 0;
    }

    .campaign-overview > .row::before {
        content: none;
    }


    .campaign-start .campaign-overview .overview-counter .logo,
    .campaign-start .overview-counter .logo {
        display: none;
    }
    .campaign-overview .cat-label-mob {
        display: block;
    }
    .schools .overview-counter .counter {
        margin: 67px 0 0 0;
    }

    .campaign-overview .overview-counter .counter span {
        margin: 0 0 0 -2px;
        width: 30px;
        height: 42px;
        line-height: 30px;
        font-size: 30px;
        }
    .campaign-overview .cat-label-mob {
        display: block;
        margin: -12px 0 8px 0;
        font-family: 'Alegreya';
        font-weight: 900;
        font-size: 24px;
        text-transform: capitalize;
        color: var(--col-richblack);
    }

    .campaign-overview .map {
        position: relative;
        height: 373px;
        margin: 15px 15px 0;
        background-size: contain;
        padding-bottom: 268px;
    }
    .campaign-overview .map #map_canvas {
        width: calc(100% - 30px);
        height: 273px;
        bottom: 0;
        position: absolute !important; 
    }

    .campaign-start .campaign-overview .map {
        margin: 30px 0 0 15px;
    }
    .campaign-start .campaign-overview .map #map_canvas {
        width: calc(100% - 15px);
        height: 273px;
    }

    .campaign-overview .map .map-actions {
        top: 0;
        bottom: inherit;
        right: auto;
        width: calc(100vw - 30px);
        margin: 0 -115px 0 0;
    }

    .campaign-overview .map .search {
        width: 100%;
    }

    .campaign-overview .overview-counter .counter span, .campaign-overview .overview-counter .counter div.crd-countnum, .overview-counter .counter span, .overview-counter .counter div.crd-countnum, .tx-ftschools .counter div.crd-countnum{
        font-size: 30px;
        width: 30px
    }
    .campaign-overview .cat-label-mob, .cat-label-mob{
        display: inline-block;
        text-transform: capitalize;
        font-weight: bold;
        padding-bottom: 20px;
    }

    .crd-ext #submitfull + .list-border.top {
        margin-top: 24px;
    }

    
    .towns .overview-counter .logo {
        display:none;
    }

    .city-header-caption {
        left: 15px;
    }
    .main .city-header-caption h1 {
        margin: 0 0 8px 0;
        padding: 12px 10px;
        font-size: 30px;
        line-height: 30px;
    }
    .main .city-header-caption h3 {
        font-size: 21px;
        line-height: 29px;
        padding: 0 9px 4px 10px;
    }

    .tx-owl-slider .item img {
        max-width: 90%;
        height: auto;
    }

    .fb .csc-layout-40 h2 {
        padding: 0 22px 0 42px;
    }
    .fb .csc-layout-40 h2,
    .tw .csc-layout-40 h2,
    .inst .csc-layout-40 h2 {
        height: 36px;
        margin: 0 0 15px;
        font-size: 21px;
        line-height: 36px;
        background-size: auto 36px;
    }
    .fb .csc-layout-40 h2::before {
        top: 7px;
        left: 11px;
        width: 12px;
        height: 22px;
        background-size: 12px auto;
    }
    .tw .csc-layout-40 h2::before {
        top: 10px;
        width: 23px;
        height: 20px;
        background-size: 23px auto;
    }
    .tw .csc-layout-40 h2 {
        padding: 0 24px 0 52px;
    }
    .inst .csc-layout-40 h2::before {
        top: 9px;
        width: 18px;
        height: 18px;
        background-size: 18px auto;
    }
    
    div.content .news-events h2 {
        margin: 40px 15px 0;
    }

    .news-events .news-teaser .date {
        padding: 10px 0 0;
        line-height: 20px;
        font-size: 12px;
    }
    .news-events .news-teaser.cat-53 .text,
    .news-events .news-teaser.cat-54 .text,
    .news-events .news-teaser.cat-58 .text,
    .news-events .news-teaser.cat-59 .text,
    .news-events .news-teaser.cat-61 .text,
    .news-events .news-teaser.cat-64 .text,
    .news-events .news-teaser.cat-71 .text,
    .news-events .news-teaser.cat-72 .text,
    .news-events .news-teaser.cat-75 .text,
    .news-events .news-teaser.cat-78 .text,
    .news-events .news-teaser.cat-91 .text {
        height: 104px;
        font-size: 15px;
        line-height: 16px;
    }
    .news-events .event-teaser,
    .news-events .news-teaser.cat-53,
    .news-events .news-teaser.cat-54,
    .news-events .news-teaser.cat-58,
    .news-events .news-teaser.cat-59,
    .news-events .news-teaser.cat-61,
    .news-events .news-teaser.cat-64,
    .news-events .news-teaser.cat-71,
    .news-events .news-teaser.cat-72,
    .news-events .news-teaser.cat-75,
    .news-events .news-teaser.cat-78,
    .news-events .news-teaser.cat-91 {
        margin: 0;
    }

    .campaign-start .news-events .csc-layout-30 {
        position: relative;
        top: auto;
        right: auto;
    }
    .teaser-cityindex {
        padding: 0 0 40px;
    }
    .teaser-cityindex .image img {
        max-width: inherit;
        width: 100%;
        height: auto;
    }

    .main .teaser .image {
        float: none;
        width: 100%;
        margin: 0 0 20px;
        padding: 0;
    }

    .main .quote.has-image .body {
        padding: 160px 0 0 0;
    }

    .main .quote .image {
        left: calc(50% - 70px);
    }

    .main .quote.has-image .body::before {
        left: calc(50% + 45px);
        }

    .ce-left .ce-gallery,
    .ce-right .ce-gallery {
        float: none;
    }
    .ce-left .ce-gallery,
    .ce-right .ce-gallery,
    .ce-column {
        float: none;
    }
    .col-md-6 .ce-gallery.cols-1 img {
        width: auto;
    }

    .teaser-effect .overlay {
        opacity: 1;
    }
    .news-detail .news-single-image {
        float: none;
        width: auto;
        margin: 0 0 20px;
    }
    .news-detail.termin .date {
        display: block;
        margin: 0 0 10px;
    }
    .news-detail.termin .title {
        display: block;
        max-width: 100%;
        padding: 0;
    }
    .news-detail.termin .title h1 {
        margin: 0 0 20px;
        line-height: 1.1;
    }
    .news-detail.termin .title::before {
        display: none;
    }

    .crd-col2-0,
    .crd-col2-1 {
        float: none;
        margin: 0;
    }
    .crd-listsort #viewcrdlistsort,
    .crd-listsort #viewcrdartsort,
    .crd-listsort #viewcrdblsort {
        width: 100%;
        max-width: 345px;
    }
    .crd-listsort#crdlistsortwrap {
        float: none;
    }
    .crd-listsort #viewcrdlistsort,
    .crd-listsort #viewcrdartsort,
    .crd-listsort #viewcrdblsort {
        margin: 0 0 10px;
    }

    .crd-listname-name {
        position: relative;
        display: inline-block;
        max-width: 50%;
        padding: 3px 5px 0 0;
        font-size: 15px;
        background-color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        z-index: 2;
    }

    .crd-listwrap #wraper {
        overflow: auto;
    }

    .crd-listwrap .crd-listname .crd-listname-addon {
        position: relative;
        max-width: 40%;
        padding: 0 2px 0 0;
        font-size: 12px;
        background-color: #fff;
        display: inline-block;
        z-index: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .crd-listname-details {
        right: 0;
        text-indent: -9999em;
    }
    .crd-listrang {
        top: 7px;
        right: 30px;
        font-size: 12px;
    }
    .crd-listrang:hover {
        padding: 0 0 0 10px;
        background-color: #fff;
        z-index: 3;
    }
    .crd-listrang::before {
        display: none;
    }
    #navwrap {
        text-align: center;
    }
    #slidernav {
        width: 100%;
        margin: 0 0 20px;
    }
    #slidernav::after {
        content: '';
        display: table;
        clear: both;
    }
    #slidernav .wrapcntwrap {
        width: 78%;
    }
    #selectitemsperpage {
        float: none;
    }

    .big_column {
        padding: 0;
    }
    .city-header {
        margin: 20px -15px;
    }
    .upload-city-image,
    .upload-city-image-placeholder {
        height: 200px;
        background-size: cover !important;
    }
    .city-actions-body .col-sm-4,
    .city-actions-body .col-sm-8 {
        padding: 0;
    }
    #schoolmap .city-unis {
        padding: 20px 0 0;
    }
    .city-actions-body img {
        width: 100%;
        margin: 0 0 20px;
    }

    .city-header-bottom h4 {
        font-size: 36px;
    }

    .calc-wrap {
        margin: 30px 0;
    }
    .calc-wrap .top{
        padding-left:15px;
        padding-right:15px;
        display: block;
    }
    .calc-wrap .top::before{
        width: 100%;
        text-align: center;
        display: block;
        padding-bottom: 10px;
    }
    .calc-wrap .top .calc-left, .calc-wrap .top .calc-right{
        width: 100%;
   } 
    .calc-wrap .top .calc-left input[type="text"] {
        width: 100%;
    }
    .calc-wrap .calc-submit {
        margin: 10px 0 0;
        padding-left: 10px;
        padding-right: 10px;
        width: 100%;
    }

    .register .form .part .lbl.fullwidth {
        width: 100%;
        margin: 0 0 10px;
    }
    .register .form .part .ipt.fullwidth {
        width: 100%;
        margin: 0 0 20px;
    }
    .register .ipt.fullwidth .checkbox {
        width: 50%;
        margin: 0 0 10px;
        font-size: 12px;
    }

    .register .form .part label, .schools#page56 .up-alert-text #studentrepresentative label, .form-title .row > label, .form-title .qbox > label, .form-title.tx-rm-ft-unis-titelerneuerung .qbox > label {
        float: none;
        width: auto;
    }
    .register .form .part input[type="text"], .register .form .part input[type="password"], .schools#page56 .up-alert-text #studentrepresentative input[type="text"], .schools#page56 .up-alert-text #studentrepresentative input[type="email"],
    .form-title .row > input[type="text"], .form-title .row > input[type="number"], .form-title .row > textarea, .form-title .row > select, .form-title .qbox > input[type="text"], .form-title .qbox > input[type="number"], .form-title .qbox > select {
        float: none;
        width: 100% !important;
    }
    .form-title .row > input[type="text"].zeitrv, .form-title .row > input[type="text"].zeitrb{
        float: none;
        width: 48% !important;
    }
    .form-title .row > input[type="text"].zeitrv{
        margin-right: 4%;
    }
    .register .form .part .checkbox label {
        margin: 2px 0 0 30px;
    }

    .register .form .part select, .schools#page56 .up-alert-text #studentrepresentative select {
        width: 100%;
    }
    .register .form .part .lbl {
        float: none;
        width: auto;
    }
    .register .form .part .ipt {
        float: none;
        width: auto;
    }
    .register .part .info {
        margin: -10px 0 15px 0;
    }
    .register .part .info.no-top-indent {
        margin: -10px 0 10px;
    }
    .register .form .cfrm-preview {
        float: none;
        margin: 0 0 10px;
    }
    .register .form .part .checkbox .cfrm-preview + label {
        margin: 0 0 0 34px;
    }
    .calc-wrap .body .calc-result {
        padding: 20px 15px 0;
    }
    .calc-wrap .body .kat {
        float: none;
        width: 100%;
        padding: 0 0 0 70px;
    }
    .calc-wrap .body .title {
        margin: 0;
        max-width: 90%;
        overflow: hidden;
    }
    .calc-wrap .body .anzahl,
    .calc-wrap .body .anzahl2,
    .calc-wrap .body .anzahl3 {
        margin: 0;
        padding: 0 4px 0 8px;
        font-size: 16px;
        background-color: #fff;
    }
    .calc-wrap .body .name {
        font-size: 16px;
    }
    .container.content .calc-wrap .title a {
        margin: 0;
    }

    .indent-l,
    .indent-lr {
        margin: 0;
    }
    .eform-input-wrap.upload-input {
        width: 100%;
        margin: 10px 0 0;
    }
    .previewImage-wrap {
        width: 100%;
    }
    .newsdates .eform-input-wrap input[type="text"],
    .downloads .eform-input-wrap input[type="text"],
    .links .eform-input-wrap input[type="text"],
    .events .eform-input-wrap input[type="text"] {
        width: 100%;
    }
    #eform #plz {
        width: 30%;
        margin: 0 4% 0 0;
    }
    #eform #ort {
        width: 66%;
    }
    #eform label {
        float: none;
        width: auto;
    }

    .tx-ftschools .crd-ext .text-center {
        text-align: left;
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .tx-ftschools .crd-searchfull {
        display: block;
        margin: 0 0 10px;
    }
    .tx-ftschools .crd-ext .crd-searchfulldummy {
        width: 88%;
    }
    .tx-ftschools .crd-ext .crd-searchfulldummy input#mapsearch {
        width: 100%;
        margin: 0;
    }
    .tx-ftschools #crdlistblwrap {
        width: 100%;
        margin: 0 0 10px 0;
    }
    .tx-ftschools select {
        width: 100%;
    }
    .tx-ftschools #crd-sortandfilter {
        width: 100%;
        margin: 0 0 10px;
    }
    div.crd-searchsub {
        width: 100%;
    }
    div.crd-searchsub .select.focus ul {
        width: 100%;
    }
    .tx-ftschools .crd-list::before {
        right: 0;
    }
    .tx-ftschools .crd-listname {
        padding: 0 30px 0 45px;
    }
    .tx-ftschools .crd-listtext {
        font-size: 14px;
    }

    .attention {
        margin: 0 0 32px;
        padding: 26px 15px 20px;
    }
    .up-alert-center {
        width: auto;
        margin: 0 15px;
        padding: 15px;
    }

    .content .tx-rm-ft-schools-titelerneuerung fieldset > h3,
    .content .tx-rm-ft-schools-titelerneuerung .initial > h2,
    .content .tx-rm-ft-schools-titelerneuerung fieldset > p,
    .content .tx-rm-ft-schools-titelerneuerung fieldset > .p,
    .content .tx-rm-ft-schools-titelerneuerung fieldset > label,
    .content .tx-rm-ft-schools-titelerneuerung .status,
    .content .tx-rm-ft-schools-titelerneuerung .row,
    .content .tx-rm-ft-schools-titelerneuerung .error,
    .content .tx-rm-ft-schools-titelerneuerung .forms > form > p {
        margin-left: 0;
        margin-right: 0;
    }
    .content .tx-rm-ft-schools-titelerneuerung .initial > ul {
        margin-left: 0;
    }
    .content .form-title input[type="text"],
    .content .form-title input[type="password"],
    .content .form-title input[type="number"] {
        width: 100%;
    }
    .content .form-title .border {
        padding: 20px 15px;
    }
    .content .form-title select {
        width: 100%;
    }
    .content .attention::before {
        top: 0;
        right: 0;
        width: 30px;
        height: 32px;
        background-size: contain;
    }
    .content .tx-rm-ft-schools-titelerneuerung .checkthis {
        right: 0;
    }
    .content label[for="q1_telefon"] p {
        margin: 0;
    }
    .content .form-title textarea {
        width: 100%;
    }
    .content .tx-rm-ft-schools-titelerneuerung #p3 input[type="text"] {
        width: 100%;
    }
    .content .form-title .check {
        width: 100%;
    }
    .main .tx-rm-ft-schools-titelerneuerung label p {
        margin: 0;
    }
    .content .form-title .qbox {
        width: 100%;
    }
    .content .form-title .qbox .check input + label {
        max-width: 230px;
    }
    .content .form-title .additem {
        margin: 0;
    }
    .content .tx-rm-ft-schools-titelerneuerung table {
        border-collapse: separate;
        border-spacing: 2px;
        width: 100%;
    }
    .content .overview tr td:first-child {
        min-width: 1px;
        padding-right: 0;
    }
    .content .tx-rm-ft-schools-titelerneuerung .overview table tr td {
        width: 50%;
    }
    .content div.overview {
        padding: 15px 0;
    }

    .form-title .vstatus {
        height: auto;
        padding-top: 10px;
        line-height: 38px;
    }
    .form-title .vstatus ul {
        padding: 0 0 1px;
    }
    div.main .form-title .vstatus li {
        margin: 0 9px 8px 0;
        padding: 0;
    }

    .content .tx-ftforms fieldset > h3,
    .content .tx-ftforms fieldset > p,
    .content .tx-ftforms fieldset >label,
    .content .tx-ftforms .status,
    .content .tx-ftforms .row,
    .content .tx-ftforms .error,
    .content .tx-ftforms .forms > form > p {
        margin-left: 0;
        margin-right: 0;
    }
    .form-title textarea#q2_welcheproduktetext,
    .form-title textarea#q2_produkteeinsatztext,
    .form-title textarea#q8_aktivebereichetext,
    #q4_produktortintervalltext,
    #q5_unterrichtsfach1text {
        margin: 0;
    }
    .form-title .check textarea,
    .form-title .check + textarea,
    .form-title .check + br + textarea {
        width: 100%;
    }
    .form-title .add-section-btn {
        margin: 0;
    }
    .member .delete {
        display: inline-block;
        position: relative;
        bottom: auto;
        right: auto;
    }

    .tx-ftschools .cfrm-wrap {
        width: 100%;
    }
    .tx-ftschools .cfrm-left {
        float: none;
        width: auto;
        padding-bottom: 2px;
    }
    .tx-ftschools .cfrm-right {
        width: 100%;
        float: none;
    }

    div.content h1{
        margin-top: 0;
    }
    .header-image {
        margin: -100px 0 40px;
    }
    .header-image:before {
        height: 200px;
    }

    .register .form .part label, .schools#page56 .up-alert-text #studentrepresentative label {
        font-weight: bold;
    }
    .register .form .part .checkbox label {
        font-weight: normal;
    }

    .qtip {
        min-width: 270px;
    }

    .news-teaser-outer .csc-layout-list .row > div:nth-of-type(3) {
        display: none;
    }
    a.external-link::after {
        top: 0;
    }

    div.msg-cookies a.seen {
        margin: 20px 0 0;
    }

    .folding-box .image {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0 0 20px;
    }

    .video-embed {
        width: 100%;
    }
    .ce-gallery.cols-1 .cookie-content-placeholder {
        width: 100%;
        padding: 15px;
        height: auto;
    }

    footer.main .container.top >.row {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 168px auto auto;
        grid-template-areas:
        "ft-newsletter"
        "ft-kontakt"
        "ft-social";
    }

    footer.main .container.top >.row .col-sm-4 {
        width: 100%;
        padding-top: 205px;
        grid-area: ft-kontakt;
        text-align: center;
    }

    footer.main .container.top >.row .col-sm-4.newsletter {
        padding-top: 32px;
    }

    footer.main .container.top >.row .col-sm-4.newsletter::after {
        content: '';
    }

    footer.main .logo-ftde {
        transform: translateY(164px);
    }

    footer.main .newsletter-signin {
        width: calc(100% - 50px);
        max-width: unset;
    }

    footer.main .container.top >.row .col-sm-4.social-media {
        width: 100%;
        padding-top: 32px;
        padding-bottom: 32px;
        grid-area: ft-social;
        justify-self: center;
        text-align: center;
    }

    footer.main nav.social ul li {
        margin: 0 4% 0 0;
    }

    footer.main .bottom {
        transform: translateY(0);
        text-align: center;
        padding-bottom: 50px;
    }

    footer.main nav.meta ul {
        display: block;
    }

    footer.main nav.meta ul {
        float:none;
    }

    footer.main nav.meta ul li {
        display: block;
        margin: 0 0 20px 0;
    }

    .show-cookie-settings {
        display: block;
        width: 100%;
    }


   .col-6 .ce-gallery.cols-1 .cookie-content-placeholder,
   .col-sm-8 .ce-gallery.cols-1 .cookie-content-placeholder,
    .col-md-8 .ce-gallery.cols-1 .cookie-content-placeholder,
    .col-lg-8 .ce-gallery.cols-1 .cookie-content-placeholder,
    .col-xl-8 .ce-gallery.cols-1 .cookie-content-placeholder,
    .col-md-6 .ce-gallery.cols-1 .cookie-content-placeholder {
        width: 100%;
    }



    .campaign-overview .overview-counter .counter {
        margin-bottom: 10px;
    }   
    #tx_rmnewsletterapi .gb-formname {
        width: 100%;
    }
    #tx_rmnewsletterapi .gb-checkboxwrap {
        clear: both;
    }
    #tx_rmnewsletterapi .gb-checkboxwrap label {
        float: left;
        width: calc(100% - 40px);
    }

    .tx-felogin-pi1 label {
        width: 100%;
    }
    
    .tx-felogin-pi1 input[type="text"],
    .tx-felogin-pi1 input[type="password"] {
        width: 100%;
    }

    .news-events .more-news a, .news-events .csc-layout-20 a, .news-events .csc-layout-30 a, .calc-submit, .cfrm-button, .cfrm-button-back, .schools .btn2, .towns .btn2, .unis .btn2, .form-title .nav .btn, .up-send, .eform-button, #tx_rmnewsletterapi .gb-formitem button.submit-black, .hide_overview, .finalize.btn, #back-to-search {
        padding: 8px 22px;
    }
}


@media screen and (min-width: 320px) and (max-width: 374px) {

    iframe {
        max-width: 290px !important;
        min-width: 1px !important;
        margin: 0 auto !important;
    }

    .city-header-caption {
        left: 15px;
    }
    .main .city-header-caption h1 {
        margin: 0 0 8px 0;
        padding: 12px 10px;
        font-size: 23px;
        line-height: 26px;
    }
    .main .city-header-caption h3 {
        width: 100%;
        font-size: 15px;
        line-height: 29px;
        padding: 0 9px 4px 10px;
    }

   .col-sm-8 .ce-gallery.cols-1 .video-embed,
    .col-md-8 .ce-gallery.cols-1 .video-embed,
    .col-lg-8 .ce-gallery.cols-1 .video-embed,
    .col-xl-8 .ce-gallery.cols-1 .video-embed,
    .col-md-6 .ce-gallery.cols-1 .video-embed,
    .video-embed {
        width: 295px;
    }
}

/** S7 **/
@media screen and (min-width: 360px) and (max-width: 767px) {

    .news-teaser-outer .row:nth-of-type(2) {
        top: 260px;
    }

    header.main .search input[type="text"] {
        width: 73%;
    }

}

/** iPhone 6/7/8 **/
@media screen and (min-width: 375px) and (max-width: 767px) {

    .news-teaser-outer .row:nth-of-type(2) {
        top: 270px;
    }
    .news-teaser-outer #c5305 + .row {
        top: 230px;
    }
    .news-teaser-outer #c3688 + .row {
        top: 55%;
    }

    header.main .search input[type="text"] {
        width: 73%;
    }

    .folding-box .image {
        float: right;
        max-width: 50%;
        margin-left: 20px;
    }
    
}

@media screen and (min-width: 375px) and (max-width: 414px) {

    .city-header-caption {
        left: 15px;
    }
    .main .city-header-caption h1 {
        width: 100%;
        margin-right: 0;
        font-size: 27px;
        line-height: 30px;
    }
    .main .city-header-caption h3 {
        width: 100%;
        font-size: 18px;
        line-height: 29px;
    }
   .col-sm-8 .ce-gallery.cols-1 .video-embed,
    .col-md-8 .ce-gallery.cols-1 .video-embed,
    .col-lg-8 .ce-gallery.cols-1 .video-embed,
    .col-xl-8 .ce-gallery.cols-1 .video-embed,
    .col-md-6 .ce-gallery.cols-1 .video-embed,
    .video-embed {
        width: 345px;
    }
    
}

@media screen and (min-width: 414px) and (max-width: 575px) {

   .col-sm-8 .ce-gallery.cols-1 .video-embed,
    .col-md-8 .ce-gallery.cols-1 .video-embed,
    .col-lg-8 .ce-gallery.cols-1 .video-embed,
    .col-xl-8 .ce-gallery.cols-1 .video-embed,
    .col-md-6 .ce-gallery.cols-1 .video-embed,
    .video-embed {
        width: 384px;
    }
}


@media screen and (min-width: 500px) and (max-width: 767px) {

    .news-teaser-outer #c5305 + .row {
        top: 23%;
    }
    .news-teaser-outer #c3688 + .row {
        top: 60%;
    }


}

@media screen and (min-width: 575px) and (max-width: 767px) {

    .video-embed {
        width: 736px;
    }
}

@media screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2) {

}


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

    .tx-owl-slider .item img {
        max-width: 90%;
        height: auto;
    }

    header.main nav.main .back {
        display: none;
    }

    .top-slider .text {
        left: 25px;
    }
    .top-slider .text span.h2 {
        font-size: 46px;
        line-height: 1;
    }
    .top-slider .text h2 {
        font-size: 50px;
    }

    .tx-ftschools .crd-searchfull {
        margin-bottom: 10px;
    }

    .teaser-folding h2.bg {
        height: auto;
        padding: 10px 0 12px;
        line-height: 1.1;
    }

    #slidernav .wrapcntwrap {
        width: 88%;
    }

    .form-title .row > label {
        display: block;
    }

    header.main nav.main {
        font-size: 22px;
    }

    .teaser-cityindex {
        padding: 0 0 10px;
    }

    .news-events .news-teaser .text {
        padding: 21px 0 10px;
        overflow: hidden;
    }

    .news-events .more-events a, .news-events .csc-layout-30 a {
        margin: 60px 0 0 0;
    }

    .main .teaser {
        margin: 0 0 40px;
    }

    .fb-page.fb_iframe_widget > span > iframe {
        width: 100% !important;
    }
    #c3765 {
        overflow: hidden;
    }

    .crd-listsort #viewcrdartsort {
        margin: 0;
    }
    #viewcrdlistsort {
        margin: 0 0 10px;
    }

    .upload-city-image, .upload-city-image-placeholder {
        background-size: cover !important;
    }
   .col-sm-8 .ce-gallery.cols-1 .video-embed,
    .col-md-8 .ce-gallery.cols-1 .video-embed,
    .col-lg-8 .ce-gallery.cols-1 .video-embed,
    .col-xl-8 .ce-gallery.cols-1 .video-embed,
    .col-md-6 .ce-gallery.cols-1 .video-embed,
    .video-embed {
        width: 778px;
    }
    .ce-gallery.cols-1 .cookie-content-placeholder {
        width: 778px;
    }

}

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

    .teaser-effect .overlay {
        opacity: 1;
    }

    .teaser-cityindex p {
        margin: 0 0 10px;
        font-size: 17px;
        line-height: 21px;
    }
}

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

    .top-slider .flexslider::after {
        left: 12.5%;
    }

    .video-embed {
        width: 595px;
    }
    .ce-gallery.cols-1 .cookie-content-placeholder {
        width: 595px;
        height: auto;
        padding-top: 60px;
    }
   .col-6 .ce-gallery.cols-1 .cookie-content-placeholder,
   .col-sm-8 .ce-gallery.cols-1 .cookie-content-placeholder,
    .col-md-8 .ce-gallery.cols-1 .cookie-content-placeholder,
    .col-lg-8 .ce-gallery.cols-1 .cookie-content-placeholder,
    .col-xl-8 .ce-gallery.cols-1 .cookie-content-placeholder {
        width: 380px;
    }
    .col-md-6  .ce-gallery.cols-1 .video-embed,
   .col-sm-8 .ce-gallery.cols-1 .video-embed,
    .col-md-8 .ce-gallery.cols-1 .video-embed,
    .col-lg-8 .ce-gallery.cols-1 .video-embed,
    .col-xl-8 .ce-gallery.cols-1 .video-embed {
        width: 380px;
    }
    .col-md-6 .ce-gallery.cols-1 .cookie-content-placeholder {
        width: 100%;
    }

    #cfrmform .col-sm-5, #cfrmform .col-sm-8, #cfrmform .col-sm-10{
        width: 100%;
    }
    #cfrmform .col-sm-offset-1, #cfrmform .col-sm-offset-3{
        margin-left: 0;
    }

    .header-image:before {        
        height: 200px;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1229px) {

    .crd-listsort #viewcrdlistsort, .crd-listsort #viewcrdartsort, .crd-listsort #viewcrdblsort {
        width: 220px;
    }
   .col-6 .ce-gallery.cols-1 .cookie-content-placeholder,
   .col-sm-8 .ce-gallery.cols-1 .cookie-content-placeholder,
    .col-md-8 .ce-gallery.cols-1 .cookie-content-placeholder,
    .col-lg-8 .ce-gallery.cols-1 .cookie-content-placeholder,
    .col-xl-8 .ce-gallery.cols-1 .cookie-content-placeholder {
        width: 505px;
    }
    .col-md-6 .ce-gallery.cols-1 .cookie-content-placeholder {
        width: 370px;
    }
    .col-6 .ce-gallery.cols-1 .video-embed,
    .col-sm-8 .ce-gallery.cols-1 .video-embed,
     .col-md-8 .ce-gallery.cols-1 .video-embed,
     .col-lg-8 .ce-gallery.cols-1 .video-embed,
     .col-xl-8 .ce-gallery.cols-1 .video-embed,
     .col-md-6 .ce-gallery.cols-1 .video-embed {
         width: 505px;
     }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {

    .top-slider .flexslider::after {
        left: 21.5%;
    }
    

   .col-6 .ce-gallery.cols-1 .cookie-content-placeholder,
   .col-sm-8 .ce-gallery.cols-1 .cookie-content-placeholder,
    .col-md-8 .ce-gallery.cols-1 .cookie-content-placeholder,
    .col-lg-8 .ce-gallery.cols-1 .cookie-content-placeholder,
    .col-xl-8 .ce-gallery.cols-1 .cookie-content-placeholder {
        width: 505px;
    }
    .col-md-6 .ce-gallery.cols-1 .cookie-content-placeholder {
        width: 370px;
    }
   .col-6 .ce-gallery.cols-1 .video-embed,
   .col-sm-8 .ce-gallery.cols-1 .video-embed,
    .col-md-8 .ce-gallery.cols-1 .video-embed,
    .col-lg-8 .ce-gallery.cols-1 .video-embed,
    .col-xl-8 .ce-gallery.cols-1 .video-embed {
        width: 505px;
    }
    .col-md-6 .ce-gallery.cols-1 .video-embed {
        width: 370px;
    }

    .header-image:before {        
        height: 250px;
    }
}