/*Customizing styles for specific views*/
@media (max-width: 767px) {
    .hidden-xs {
        display: none !important;
    }
    .answer img {
        width: 100%;
        height: auto;
    }
    .container #mediadir .reference {
        margin-bottom: 20px;
        height: auto;
        padding: 30px;
    }
    #podcast_container embed {
        width: 100% !important;
        height: auto !important;
    }
    #regkey {
        width: 58%;
    }
    .table .egov-btn {
        margin-bottom: 10px;
    }
    /*survey*/
    .survey td {
        float: left;
        width: 100%;
        padding-left: 0;
    }
    .questionBlock_button input {
        margin-left: 0 !important;
    }
    .radioText {
        word-wrap: break-word;
        width: 260px;
        float: left;
    }
    .item h1 {
        left: 7%;
        bottom: 27%;
        font-size: 18px;
    }
    #page #mediadir .mapLarge{
        width: 100%;
    }
    .carousel-indicators {
        bottom: 0px;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    #page #shop button.add-to-cart {
        -webkit-border-radius: 4px;
        border-radius: 4px;
    }
    #page #shop div.price {
        -webkit-border-radius: 5px;
        border-radius: 5px;
        clear: both;
        float: right;
        margin-top: 10px;
    }
    #home-boxes {
        padding: 0;
        float: left;
    }
    #home-boxes .box1, #home-boxes .box2 {
        padding: 0;
    }
    #home-boxes .first .home-box {
        width: 100%;
    }
    #home-boxes .middlebox .home-box {margin-left: 0;}
    #home-boxes .first, #home-boxes .middlebox, #home-boxes .lastbox {
        padding-left: 0;
        padding-right: 0;
    }
    .navbar-header {float: right;}
    #subnavigation {display: none;}
    .login-content {
        padding: 0;
    }
    #calendar-boxes {
        padding: 0;
    }
    .voting td:last-of-type {
        width: 37%;
    }
    .voting td:first-of-type {
        width: 63%;
    }
    #mediadir .reference {margin-bottom: 20px;}
    #shop div.images a img {
        height: auto;
    }
    .searchform #searchfield p#fieldlast {
        padding-top: 0;
    }
    .searchform #searchfield p {
        width: 100%;
        margin-right: 0;
    }
    #home-page, #home-block {padding: 0 15px;}
    .home-box.col-md-4 {width: 100%;margin-bottom: 30px;}
    .social-foot {
        float: left;
        width: 78%;
        margin-top: 3px;
    }
    #shop .shopterms .row3 {
        display: none;
    }
    #footer-bottom .footer-left {
        float: left;
        width: auto;
        margin-right: auto;
        margin-left: 15px;
    }
    #media {
        font-size: 13px;
    }
    .footer-right {
        width: 100%;
        float: left;
    }
    form select[name="catId"] {
        width: 100%;
        margin-bottom: 15px;
    }
    .sidebar-block.contact-us a {
        float: left;
        width: 100%;
        height: 41px;
        padding: 6px 12px;
        color: #FFFFFF;
        font-size: 15px;
        font-weight: bold;
        background: url('images/contact-us-button.jpg') no-repeat;
        background-size: 100% 100%;
        text-align: center;
        background-position: 100%;
    }
    #content-wrapper {
        padding-bottom: 210px;
    }
    #page h1, .h1 {
        font-size: 26px;
        word-wrap: break-word;
    }
    #home-page-wrapper {
        padding: 20px 0;
    }
    #footer-bottom ul {
        margin-left: 15px;
    }
    label[for="access_user_tos"] {
        width: 88%;
        float: left;
        margin-left: 4px;
    }
    #page {margin-right: 0;width: 100%;}
    #sidebar {margin-top: 20px;width: 100%;}
    #tagelement,#tagelement tr, #tagelement .row2  {
        float: left;
        width: 100%;
        font-size: 13px;
    }
    #tagelement td {
        float: left;
        width: 100%;
        padding-left: 54%;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    }
    #tagelement td:nth-of-type(1):before {
        content: "Tabellenüberschrift 1";
        position: absolute;
        left: 20px;
        font-weight: 700;
    }
    #login form input.remember_me, #login form label.remember_me {
        width: auto;
    }
    #tagelement td:nth-of-type(2):before {
        content: "Tabellenüberschrift 2";
        position: absolute;
        left: 20px;
        font-weight: 700;
    }
    #tagelement td:nth-of-type(3):before {
        content: "Tabellenüberschrift 3";
        position: absolute;
        left: 20px;
        font-weight: 700;
    }
    .listrow .eachrow:nth-child(2) {
        width: 22px;
    }
    .listrow .eachrow:nth-child(2) {
        padding-left: 0;
    }
    #breadcrumb {
        padding-left: 15px;
        padding-right: 15px;
    }
    #tagelement tr:nth-of-type(1) {display: none;}
    .news-image {width: 50%;}
    .news-text {clear: both;margin-top: 10px;}
    #blog form p {padding-left: 0;}
    #blog form p label {margin: 0;}
    #page #blog div.search_date{padding: 0;}
    #news-social-media li {clear: both;}
    #news-social-media .facebook {margin-bottom: 5px;}
    #captcha #coreCaptchaLabel {white-space: normal;}
    #login p {
        padding-left: 0;
    }
    form p label {
        margin-right: 20px;
    }
    form p {
        width: 100%;
        padding-left: 0;
    }
    #login p label {
        margin-left: 0;
        width: 100%;
    }
    #login #sociallogin, #access #sociallogin {
        width: 100%;
        margin-left: 0;
    }
    .login-content #login {
        width: 100%;
        padding: 0px;
        border-bottom: 0;
        border-right: 0;
    }
    .login-bottom {padding-left: 0px;}
    #login a.lostpw, #login a.register {margin-left: 0}
    #sidebar.col-md-3, #page.col-md-9, #page-left, #page #shop div.details, #page #shop div.short-description {
        width: 100%;
        margin-right: 0px;
    }
    #page-right {
        width: 100%;
        padding: 0;
    }
    #page #shop figure a,#page #checkout .right,#page #checkout .left {width: 100%;}
    #page #shop figure a .categorie-image-wrapper {
        width: 100%;
        height: auto;
    }
    #page #downloads div.overview div.row div.category {
        width: 100%;
        padding: 0 0 15px 0;
    }
    .overview .row {
        width: 100%;
    }
    .member_list td {
        float: left;
        clear: both;
        width: 100%;
    }
    /*cart*/
    #cartlist #th_bg2 .cartrow:first-child {
        width: 100%;
        padding-left: 50%;
    }
    #cartlist #th_bg2 .cartrow:first-child:before {
        content: "Product";
        position: absolute;
        left: 20px;
        font-weight: 700;
    }
    #cartlist #th_bg2 .cartrow:nth-child(2):before {
        content: "Stückpreis";
        position: absolute;
        font-weight: 700;
        left: 20px;
    }
    #cartlist #th_bg2 .cartrow:nth-child(2) {
        width: 100%;
        padding-left: 50%;
    }
    #cartlist #th_bg2 .cartrow:nth-child(3):before {
        content: "Menge";
        position: absolute;
        font-weight: 700;
        left: 20px;
    }
    #cartlist #th_bg2 .cartrow:nth-child(3) {
        width: 100%;
        padding-left: 80%;
        font-weight: 700;
        padding-right: 0;
    }
    #page #shop input.shop_quantity {
        width: 28px;
    }
    #cartlist .row1 div {
        width: 50%;
    }
    #cartlist #th_bg2 .cartrow {
        width: 100%;
        padding-left: 50%;
        text-align: right;
    }
    #shop #th_bg2 .a_right {
        text-align: right;
        width: 100%;
    }
    #cartlist #th_bg2 .cartrow:nth-child(4):before {
        content: "inkl. MwSt.";
        position: absolute;
        font-weight: 700;
        left: 20px;
    }
    #cartlist #th_bg2 .cartrow:nth-child(6):before {
        content: "Total";
        position: absolute;
        left: 20px;
        font-weight: 700;
    }
    #cartlist #th_bg {
        display: none;
    }
    /*versandkonditions*/
    #shop {
        font-size: 13px;
    }
    #shop .shopterms .row2 .shoprow {
        float: left;
        width: 100%;
        padding-left: 56%;
        min-height: 27px;
        color: #000;
    }
    .row2.first .shoprow:first-child:before {
        content: "Versandart";
        position: absolute;
        left: 10px;
        font-weight: 700;
    }
    .row2.first .shoprow:nth-child(2):before {
        content: "Lieferländer";
        position: absolute;
        left: 10px;
        font-weight: 700;
    }
    .row2 .shoprow:nth-child(2):before {
        content: "Maximalgewicht";
        font-weight: 700;
        position: absolute;
        left: 15px;
    }
    .row2 .shoprow:nth-child(3):before {
        content: "Gebührenfrei ab";
        font-weight: 700;
        position: absolute;
        left: 15px;
    }
    .row2 .shoprow:last-child:before {
        content: "Gebühr";
        font-weight: 700;
        position: absolute;
        left: 15px;
    }
    /*Medien*/
    head .eachrow:nth-child(2) {
        width: 35%;
    }
    .head .eachrow:nth-child(3) {
        width: 32%;
        text-align: right;
    }
    .head .eachrow:nth-child(4) {
        display: none;
    }
    .head .eachrow:nth-child(5) {
        float: right;
        text-align: right;
        margin-right: 10px;
    }
    .row2 .eachrow, .homerow2 .eachrow {
        width: 89%;
        padding-left: 0px;
    }
    .listrow .eachrow:nth-child(3) {
        width: 28.5%;
        padding-left: 0px;
    }
    .listrow .eachrow:nth-child(4) {
        width: 20%;
        text-align: right;
    }
    .listrow .eachrow:nth-child(5) {
        display: none;
    }
    .listrow .eachrow:last-child {
        width: 28.2%;
        text-align: right;
        padding-right: 10px;
        float: right;
    }
    .head .eachrow:nth-child(2) {
        width: 36%;
    }
    .eachrow {
        width: 15%;
    }
    #page .login-content .login-social {
        margin-bottom: 10px;
        padding-bottom: 20px;
        border-right: 0;
        border-bottom: 0;
    }
    #access .login-social, .regForm {width: 100%}
    .regdivider span {
        top: -8px;
        left: -8px;
        padding: 0px 6px;
        left: 45%;
    }
    .regdivider {
        height: 1px;
        width: 100%;
        margin: 30px 0;
    }
    /*Shop*/
    #shop #bestelTable .row1, #shop_payment .row3, #shop_payment .row1 {
        float: left;
        width: 100%;
    }
    #bestelTable tbody, #shop_payment tbody {
        float: left;
    }
    #shop table#bestelTable tr.row3 {
        float: left;
        width: 100%;
        padding-left: 0;
    }
    #bestelTable .row3 td {
        padding-left: 0;
        width: 33%;
        word-wrap: break-word;
    }
    #shop #bestelTable .row1.price td, #shop #bestelTable .row1.tax td {
        padding-left: 0;
        width: 50%;
        text-align: left;
        padding-left: 10px;
    }
    #shop #bestelTable .row1.price, #shop #bestelTable .row1.tax {
        width: 100%;
    }
    #shop #bestelTable .row1.price td:before, #shop #bestelTable .row1.tax td:before {
        content: none;
    }
    #bestelTable .row3.total td {
        width: 50%;
        text-align: left;
        padding-left: 10px;
    }
    #bestelTable th, #shop_payment th {
        display: none;
    }
    #bestelTable td {
        float: left;
        width: 100%;
        padding-left: 50%;
        text-align: right;
    }
    #shop div.message p label {
        width: 260px;
    }
    #bestelTable .row1 td:nth-of-type(1):before {
        content: "ID";
        position: absolute;
        left: 22px;
    }
    #bestelTable .row1 td:nth-of-type(2):before {
        content: "Produkt";
        position: absolute;
        left: 22px;
    }
    #bestelTable .row1 td:nth-of-type(3):before {
        content: "Stückpreis";
        position: absolute;
        left: 22px;
    }
    #bestelTable .row1 td:nth-of-type(4):before {
        content: "Menge";
        position: absolute;
        left: 22px;
    }
    #bestelTable .row1 td:nth-of-type(5):before {
        content: "inkl. MwSt.";
        position: absolute;
        left: 22px;
    }
    #bestelTable .row1 td:nth-of-type(7):before {
        content: "Total";
        position: absolute;
        left: 22px;
    }
    /*shop*/
    #shop_payment .row1:first-child td {
        width: 100%;
        float: left;
        text-align: left !important;
    }
    #shop div.message p {
        padding-left: 0;
        min-height: 45px;
    }
    #shop #head td {
        float: left;
        width: 100%;
        text-align: left !important;
    }
    #shop .shop-price td {
        width: 50%;
    }
    #shop .shop-price td:nth-of-type(2) {
        text-align: right !important;
    }
    #profile-left {
        margin-left: 0px;
    }
    #subnavigation {display: none;}
    #profile-left-button {
        padding-left: 0;
    }
    .login-content .login-bottom > div {
        padding-left: 0;
    }
    .employee-left, .employee-middle, .employee-right {padding-bottom: 20px;}
    #page #gallery div.show_image img , #page #gallery div.category_image img, #page #gallery div.category_images img{width: auto;}
    #page #shop div.description{width: 100%;}
    /**/
    /*MediaDir Edit Start*/
    .mediadirSelector .mediadirSelectorCenter {
        padding: 5px 65px 0 !important;
        width: 100%;
        margin: 10px 0;
    }
    /*MediaDir Edit End*/
    .row .image img {
        width: auto;
        height: auto;
    }
    .fields .selectorCenter{
        padding: 20px 10px 5px;
        float: none;
        height: auto;
    }
    #sociallogin {
        border-bottom: 1px solid #D8DCE0;
        padding-bottom: 30px;
    }
    .reg #sociallogin {
        border-bottom: 0;
        padding-bottom: 10px;
    }
    /*Forum*/
    #page #forum div.notification_center {
        padding: 20px 0px 20px 0px;
    }
    /*new custom*/
    .col-sm-4.col-md-4,p #captcha {
        float: left;
        width: 100% !important;
    }
    .container form p , .container select.form-control, #shop .menu select[name="catId"], #shop .menu input[type="text"] {
        width: 100% !important;
        padding-left: 0;
        margin-bottom: 10px;
    }
    #shop_acc_data input.btn.btn-default {
        margin-bottom: 10px;
    }
    .order input {
        word-wrap: break-word;
        width: 100% !important;
        float: left !important;
    }
    input.contactFormClass_button.btn.btn-default {
        margin-left: 0;
        margin-bottom: 10px;
    }
    .row, .thumbnails {
        margin: 0 !important;
    }
    .login-bottom a, .searchform .checkbox {
        padding-left: 0;
    }
    #mediadir .mediadirSearchForm .mediadirButtonSearch {
        margin-left: 0;
        margin-top: 10px;
    }
    .member_list td {
        float: left;
        width: 100% !important;
    }
    input.searchbox, input#forward, .questionBlock_button input {
        margin-bottom: 10px;
    }
    input[type="file"], #guestbook div.date, #guestbook div.location, #mediadir .mapLarge {

        width: 100%;
    }
    #forum div.anchor, #forum div.anchor-polo {
        padding-left: 0;
        padding-right: 0;
    }
    #forum div.notification_center {
        padding: 20px 0px 20px 0px;
        width: 100%;
        height: auto;
    }
    .search_form select[name="id"] {
        margin-bottom: 10px;
        margin-top: 10px;
    }
    .mediadirSelector .col-md-offset-3 > div {
        float: left;
        width: 100%;
        padding: 0;
    }
    select#podcast_category_menu {
        margin-bottom: 10px;
    }
    #livecam img, #shop div.images, #shop div.details, #shop div.short-description {
        width: 100%;
        height: auto;
        margin-bottom: 5px;
    }
    #shop .menu input[type="submit"] {
        margin-bottom: 10px;
        margin-left: -10px;
    }
    .overview > div > div, .overview.container-fluid, #downloads, #shop, .info-item, .categories .container-fluid {
        padding: 0 !important;
    }
    .voting label {
        width: 80%;
    }
    .questionBlock label {
        word-break: break-all;
        height: auto;
    }
    .directorySearch input[name='term'], #regkey, #podcast_category_menu {
        width: 52%;
    }
    #media_div .table-responsive, .entries, .doc_list {
        width: 100%;
        margin-bottom: 15px;
        overflow-y: hidden;
        overflow-x: auto;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid #ddd;
        -webkit-overflow-scrolling: touch;
    }
    #shop figure a .categorie-image-wrapper {height: auto;}
    input[type="file"], .container #mediadir .employee-middle, .container #mediadir .employee-left, .container #newsletter form select, body input[type="text"], body input[type="password"], body input[type="number"], body select, body form select, body textarea {width: 100% !important;}
}
@media (min-width: 768px) and (max-width: 979px) {
    #home-page {padding: 0 15px;}
    .home-box.col-md-4 {width: 100%;margin-bottom: 30px;}
    #content-wrapper {
        padding-bottom: 168px;
    }
    .container form p, .container select.form-control, #shop .menu select[name="catId"], #shop .menu input[type="text"] {
        width: 100% !important;
        padding-left: 0;
        margin-bottom: 10px;
    }
    .search_form select[name="id"] {
        margin-bottom: 10px;
        margin-top: 10px;
    }
    #mediadir .mediadirSearchForm .mediadirButtonSearch {
        margin-left: 0;
        margin-top: 10px;
    }
    #forum div.notification_center {
        padding: 20px 0px 20px 0px;
        width: 100%;
        height: auto;
    }
    #livecam img {
        width: 100%;
        height: auto;
        margin-bottom: 5px;
    }
    #media_div .table-responsive, .entries {
        width: 100%;
        margin-bottom: 15px;
        overflow-y: hidden;
        overflow-x: auto;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid #ddd;
        -webkit-overflow-scrolling: touch;
    }
    #page #forum div.notification_center {
        padding: 20px 0px 20px 0px;
    }
    .fields .selectorCenter{
        padding: 20px 10px 20px;
        float: none;
        height: auto;
    }
    .row .image img {
        width: auto;
        height: auto;
    }
    .adminlist.table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow-y: hidden;
        overflow-x: auto;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid #ddd;
        -webkit-overflow-scrolling: touch;
    }
    /*MediaDir Edit Start*/
    .mediadirSelector .mediadirSelectorCenter {
        padding: 5px 65px 0 !important;
    }
    #page #mediadir .mediadirSelector, #page #mediadir .mediadirGoogleMap {padding-left: 0; margin-top: 0;}
    .mediadirSelector div {
        float: left;
        clear: both;
        width: 100%;
        padding: 0;
    }
    /*MediaDir Edit End*/
    .container #mediadir .reference {
        margin-bottom: 20px;
        height: auto;
        padding: 30px;
    }
    .employee-left, .employee-middle, .employee-right {padding-bottom: 20px;}
    #page #gallery div.show_image img , #page #gallery div.category_image img, #page #gallery div.category_images img{width: auto;}
    #page #shop div.description{width: 100%;}
    .news-image {
        margin-right: 0;
        width: 100%;
        padding-right: 15px;
        margin-bottom: 10px;
    }
    #home-boxes {
        padding: 0;
        float: left;
    }
    #home-boxes .box1, #home-boxes .box2 {
        padding: 0;
    }
    #home-boxes .first .home-box {
        width: 100%;
    }
    #home-boxes .middlebox .home-box {margin-left: 0;}
    #home-boxes .first, #home-boxes .middlebox, #home-boxes .lastbox {
        padding-left: 0;
        padding-right: 0;
    }
    .social-foot {
        float: none;
        width: 30%;
        margin-top: 3px;
    }
    #shop div.message p {
        min-height: 50px;
    }
    #footer-bottom .footer-left {
        float: none;
        width: 50%;
    }
    #home-block {padding: 15px;}
    .footer-right {
        width: 77%;
        float: none;
    }
    #home-page-wrapper {padding: 20px 0;}
    .col-sm-9 {width: 72.7%;}
    .contact-web a {word-wrap: break-word;}
    input[name="downloads_search_keyword"] {
        width: 82%;
    }
    .login-content #login {
        width: 100%;
        padding: 0px;
        border-right: 0;
    }
    .login-content .login-bottom > div {
        padding-left: 15px;
    }
    #page .login-content .login-social {
        margin-bottom: 10px;
        padding-bottom: 20px;
        border-right: 0;
        border-bottom: 0;
    }
    #sociallogin {
        border-bottom: 1px solid #D8DCE0;
        padding-bottom: 30px;
    }
    .reg #sociallogin {
        border-bottom: 0;
        padding-bottom: 10px;
    }
    #shop {
        font-size: 13px;
    }
    .sidebar-block.contact-us a {
        padding: 7% 0 0 13%;
        font-size: 13px;
    }
    .head .eachrow:nth-child(3) {width: 24%;}
    .head .eachrow:nth-child(2) {width: 46%;}
    .row2 .eachrow, .homerow2 .eachrow {width: 93%;}
    .listrow .eachrow:nth-child(3) {width: 42.5%;}
    #shop div.short-description, #shop div.details {width: 100%;}
    #page.col-md-9 {width: 75.3%;}
    #cartlist #th_bg .cartrow:first-child,#cartlist #th_bg2 .cartrow:first-child {width: 26%;}
    #cartlist #th_bg .cartrow:nth-child(2) {width: 21%;}
    .cartrow {width: 23%;}
    #shop #th_bg .a_right.cartrow {width: 13%;}
    #cartlist #th_bg .cartrow:nth-child(3) {width: 17%;}
    #cartlist #th_bg2 .cartrow:nth-child(2) {width: 18%;}
    #cartlist #th_bg2 .cartrow:nth-child(3) {width: 16%;}
    #cartlist #th_bg2 .cartrow {width: 11%;}
    #shop #th_bg2 .a_right {
        width: 15%;
        word-wrap: break-word;
        margin-left: 11px;
        padding-right: 5px;
    }
    #access .login-social, .regForm {width: 100%}
    .regdivider span {
        top: -8px;
        left: -8px;
        padding: 0px 6px;
        left: 45%;
    }
    .regdivider {
        height: 1px;
        width: 100%;
        margin: 30px 0;
    }
    #profile-left {
        margin-left: 0px;
    }
    #profile-left-button {
        padding-left: 0;
    }
    #page {
        width: 72.7%;
    }
    #sidebar {
        width: 25%;
    }
    form .contactFormGroup, .container #checkout form, #page #gallery div.category_image img {width: 100%;}
    #subnavigation {
        display: none;
    }
}
@media (min-width: 980px) and (max-width: 1199px) {
    .home-box.col-md-4 {width: 31.4%;margin-right: 28px;}
    #content-wrapper {
        padding-bottom: 168px;
    }
    form p {
        padding-left: 0;
    }
    form .contactFormGroup {width: 100%;}
    #shop div.message p label {
        min-height: 40px;
    }
    #mediadir .mediadirSearchForm .mediadirButtonSearch {
        margin-left: 0;
        margin-top: 10px;
    }
    #page {
        width: 75.9%;
    }
    #sidebar {
        width: 22.566667%;
    }
    .social-foot {
        float: none;
        width: 24%;
        margin-top: 3px;
    }
    #shop div.message p {
        min-height: 40px;
    }
    #footer-bottom .footer-left {
        float: none;
        width: 50%;
    }
    .footer-right {
        width: 58%;
        float: none;
    }
    .col-md-9_5 {
        width: 75.9%;
    }
    input[name="downloads_search_keyword"] {
        width: 87%;
    }
    .listrow .eachrow:nth-child(3) {width: 44.5%;}
    .listrow .eachrow:last-child {width: 22.2%;}
    .row2 .eachrow, .homerow2 .eachrow {width: 93%;}
    #page.col-md-9 {
        width: 77.3%;
    }
    #sidebar.col-md-3 {
        width: 20.5%;
    }
    .shopterms {
        font-size: 13px;
    }
    .sidebar-block.contact-us a {
        padding: 5% 0 0 12%;
        font-size: 14px;
    }
    .regdivider {
        margin: 0 27px;
    }
    #cartlist {
        font-size: 12px;
    }
    #profile-left-button {
        padding-left: 35.5%;
    }
    #subnavigation {display: none;}
}
@media (min-width: 1200px) {
    body .container {
        width: 1200px;
    }
}
@media (min-width: 768px) {
    .row .navbar-header {
        float: right;
    }
    .navbar-header .navbar-toggle {
        display: block;
    }
    .navbar-collapse.collapse {
        display: none !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
    }
    .modal .modal-dialog {
        width: 917px;
        margin: 30px auto;
        margin-top: 60px;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-nav {
        margin: 0;
    }
}








/*****************************************/
/*****************************************/
/**** Landingpage Styles (LP) ************/
/*****************************************/
/*****************************************/

/* ====== Basis / Bühne ====== */
#landing.landing-page{
  background:#0f2d57;
  padding:40px 0;
}

/* Einheitliche Seitenbreite */
#landing.landing-page .container{
  max-width:1100px;
}

/* ====== Ebene 2: Deck / Inhaltsfläche ====== */
#landing.landing-page .lp-deck{
  max-width:1140px;                 /* leicht breiter als Karten */
  margin:0 auto;
  /*padding:22px 0 28px;*/
  border-radius:18px;
  background:#153a6a;               /* zweites Blau */
  box-shadow:0 18px 40px rgba(0,0,0,0.20);
}

/* ====== Topbar (separates weisses Band) ====== */
#landing.landing-page .lp-topbar{
  /*max-width:1100px;*/
  margin:0 auto 18px;
  padding:0 18px;               /* Innenrand zur Kartenkante */
  background:#ffffff;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,0.10);
}

#landing.landing-page .lp-topbar-inner{
  height:64px;                  /* ähnliche Höhe wie Bild */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

#landing.landing-page .lp-brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:inherit;
}

#landing.landing-page .lp-logo{
  height:34px;
  width:auto;
  display:block;
}

#landing.landing-page .lp-brand-text{
  font-weight:700;
  letter-spacing:0.08em;
  font-size:13px;
}

/* rechter Link-Bereich (optional) */
#landing.landing-page .lp-topnav{
  display:flex;
  align-items:center;
  gap:26px;
}

#landing.landing-page .lp-topnav a{
  text-decoration:none;
  color:#2b3a4a;
  font-weight:600;
  font-size:14px;
  opacity:0.9;
}

#landing.landing-page .lp-topnav a:hover{
  opacity:1;
}

/* "Gespräch buchen" als dezent hervorgehobener Link */
#landing.landing-page .lp-topnav .lp-nav-cta{
  padding:10px 14px;
  border-radius:10px;
  background:rgba(15,45,87,0.06);
}

/* Mobile: rechts ausblenden oder unter Logo stapeln */
@media (max-width: 800px){
  #landing.landing-page .lp-topbar-inner{
    justify-content:center;
  }
  #landing.landing-page .lp-topnav{
    display:none;
  }
}

/* ====== Primary CTA im Landing ====== */
#landing.landing-page .btn.btn-primary{
  background:#0f2d57;
  border-color:#0f2d57;
  box-shadow:0 10px 22px rgba(0,0,0,0.22);
}

#landing.landing-page .btn.btn-primary:hover{
  background:#0c2446;
  border-color:#0c2446;
}

/* ====== HERO (Sonderpanel mit Hintergrundbild) ====== */
#landing.landing-page .lp-hero{
  max-width:1100px;
  margin:18px auto;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,0.12);
  overflow:hidden;
  color:#fff;

  background-image:url("/themes/lava/images/lp-hero-bg.png");
  background-position:center bottom;
  background-repeat:no-repeat;
  background-size:cover;

  padding:70px 0 30px;
  position:relative;
}

/* Text/Content im Hero */
#landing.landing-page .lp-hero .container{
  padding-left:30px;
  padding-right:30px;
}

#landing.landing-page .lp-hero h1{
  margin:0 0 18px;
  color:#fff;
}

#landing.landing-page .lp-hero .lp-lead{
  font-size:18px;
  line-height:1.6;
  max-width:900px;
  margin:0 0 22px;
  color:rgba(255,255,255,0.85);
}

#landing.landing-page .lp-hero .lp-cta{ margin:0; }

#landing.landing-page .lp-hero .btn{
  box-shadow:0 8px 18px rgba(0,0,0,0.25);
}

/* ====== Hero Highlight Strip (3 Icons) ====== */
#landing.landing-page .lp-hero-strip{
  max-width: calc(1100px - 60px); /* Hero-Container links/rechts 30px */
  margin:26px auto 0;
  /*background:rgba(255,255,255,0.92);*/
  border-radius:14px;
  padding:18px;
  color:#1d2b3a;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  box-shadow:0 10px 30px rgba(0,0,0,0.10);
}
/* Mobile: Strip untereinander */
@media (max-width: 900px){
  #landing.landing-page .lp-hero-strip{
    grid-template-columns:1fr;
  }
}

/* ====== Panel-Logik (alle Sections als Karten) ======
Hero bleibt Sonderfall */
#landing.landing-page .lp-context,
#landing.landing-page .lp-role,
#landing.landing-page .lp-decision,
#landing.landing-page .lp-attitude,
#landing.landing-page .lp-final{
  max-width:1100px;
  margin:18px auto;
  /*background:rgba(255,255,255,0.96);*/
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,0.10);
  padding:0;
  position:relative;
  overflow:hidden;
}

/* Innenabstand in Panels über Container */
#landing.landing-page .lp-context .container,
#landing.landing-page .lp-role .container,
#landing.landing-page .lp-decision .container,
#landing.landing-page .lp-attitude .container,
#landing.landing-page .lp-final .container{
  padding-left:30px;
  padding-right:30px;
}

/* Soft-Wave Overlay in Panels */
#landing.landing-page .lp-context:before,
#landing.landing-page .lp-role:before,
#landing.landing-page .lp-decision:before,
#landing.landing-page .lp-attitude:before,
#landing.landing-page .lp-final:before{
  content:"";
  position:absolute;
  inset:-40px -40px auto -40px;
  height:220px;
  background:radial-gradient(1200px 180px at 50% 0%, rgba(21,58,106,0.10), rgba(255,255,255,0) 70%);
  pointer-events:none;
}

/* ====== Section Spacing ====== */
#landing.landing-page .lp-context{ padding:50px 0; }
#landing.landing-page .lp-role{ padding:55px 0; }
#landing.landing-page .lp-decision{ padding:55px 0; }
#landing.landing-page .lp-attitude{ padding:55px 0; }
#landing.landing-page .lp-final{ padding:60px 0 70px; text-align:center; }

/* ====== Decision Cards ====== */
#landing.landing-page .lp-card{
  display:block;
  padding:26px 24px;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:10px;
  text-decoration:none;
  color:inherit;
  height:100%;
  background:rgba(255,255,255,0.90);
}
#landing.landing-page .lp-card:hover{ border-color:rgba(0,0,0,0.18); }
#landing.landing-page .lp-card p{ line-height:1.6; margin-bottom:14px; }
#landing.landing-page .lp-card-link{ font-weight:600; }

/* ====== Footer (nur Landing) ====== */
#landing.landing-page #bottom{ padding:18px 0; }
#landing.landing-page #bottom hr{ display:none; }
#landing.landing-page #footer{ padding:12px 0; }
#landing.landing-page #footer p{ margin:0; opacity:.7; }




/* ===== Ebene 2 als EIN gemeinsamer Block: Topbar + Hero ===== */
#landing.landing-page .lp-deck{
  max-width:1100px;
  margin:0 auto;
}

/* Gemeinsame “Header-Card” */
#landing.landing-page .lp-topbar,
#landing.landing-page .lp-hero{
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
}

/* Topbar: nur oben rund, kein eigener Shadow */
#landing.landing-page .lp-topbar{
  background:rgba(255,255,255,0.92);
  height:72px;
  display:flex;
  align-items:center;
  justify-content:center;

  margin:0;                       /* kein Spalt */
  border-radius:14px 14px 0 0;     /* nur oben rund */
  box-shadow:none;                /* wichtig: kein “zweite Karte” Effekt */
  border-bottom:1px solid rgba(0,0,0,0.06);
}

/* Brand mittig */
#landing.landing-page .lp-brand{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  text-decoration:none;
  color:#0f2d57;
  width:100%;
}

#landing.landing-page .lp-logo{
  height:44px;
  width:auto;
  display:block;
}

#landing.landing-page .lp-brand-text{
  font-weight:400;
  letter-spacing:0.10em;
  font-size:22px;
}

/* Hero: nur unten rund, direkt an Topbar “geklebt” */
#landing.landing-page .lp-hero{
  border-radius:0 0 14px 14px;     /* nur unten rund */
  margin:0 0 18px;                 /* Abstand NACH dem gesamten Header-Block */
  overflow:hidden;

  /* EIN Shadow für die ganze Ebene 2: gib ihn dem Hero,
     weil er unten abschliesst (Topbar bleibt clean). */
  box-shadow:0 16px 42px rgba(0,0,0,0.22);

  background-image:url("/themes/lava/images/lp-hero-bg.png");
  background-position:center top;
  background-repeat:no-repeat;
  background-size:cover;

  color:#fff;
  padding:28px 0 26px;             /* Content im Hero */
}

/* Hero-Container Innenabstand */
#landing.landing-page .lp-hero .container{
  padding-left:30px;
  padding-right:30px;
}


/* === HERO: unten gerade, Content zentriert === */
#landing.landing-page .lp-hero{
  border-radius: 0;                 /* unten keine Rundung */
  padding: 42px 0 28px;
  text-align: center;               /* alles im Hero zentrieren */
}

/* Container im Hero: zentriert + begrenzt */
#landing.landing-page .lp-hero .container{
  max-width: 980px;
  margin: 0 auto;
}

/* Headline/Lead zentrieren */
#landing.landing-page .lp-hero h1{
  text-align:center;
  margin:0 0 18px;
}

#landing.landing-page .lp-hero .lp-lead{
  margin:0 auto 22px;               /* zentriert */
  max-width: 860px;
}

/* CTA Button zentriert */
#landing.landing-page .lp-hero .lp-cta{
  display:flex;
  justify-content:center;
  margin: 0;
}

/* === Strip: zentriert + Items sauber ausgerichtet === */
#landing.landing-page .lp-hero-strip{
  margin: 26px auto 0;              /* Strip zentriert */
  max-width: 980px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;

  text-align:center;
  align-items:center;
  justify-items:center;

  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 12px;
  padding: 18px 18px;

  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
  backdrop-filter: blur(6px);
}

/* Strip-Item Inhalt zentrieren (Icon + Text) */
#landing.landing-page .lp-strip-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 8px;
}

/* Optional: falls deine Icons zu klein/gross wirken */
#landing.landing-page .lp-strip-item img{
  height: 44px;
  width: auto;
  display:block;
}

/* ===== BLOCK_49 – Experten ===== */
#landing.landing-page .lp-experts{
  padding: 70px 0 80px;
  background: transparent;
  text-align: center;
}

.lp-experts-head h2{
  color:#fff;
  margin-bottom:12px;
}

.lp-experts-head p{
  color:rgba(255,255,255,0.85);
  margin-bottom:50px;
  font-size:17px;
}

.lp-experts-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:28px;
}

.lp-expert-box{
  background:#ffffff;
  border-radius:14px;
  padding:28px 26px 32px;
  text-align:left;
  box-shadow:0 18px 40px rgba(0,0,0,0.25);
  position:relative;
  overflow:hidden;
}
/* ===== BLOCK_49 – Boxen mit Wellen ===== */
#landing.landing-page .lp-context .row > [class*="col"]{
  background:#ffffff;
  border-radius:18px;
  padding:34px 30px 38px;
  box-shadow:0 22px 46px rgba(0,0,0,0.18);
  position:relative;
  overflow:hidden;
}

/* dunklere, tiefer liegende Welle */
#landing.landing-page .lp-context .row > [class*="col"]::before{
  content:"";
  position:absolute;
  left:-25%;
  right:-25%;
  bottom:-45%;
  height:85%;
  background:
    radial-gradient(
      90% 55% at 50% 25%,
      rgba(15,45,87,0.18),
      rgba(255,255,255,0) 70%
    );
  transform: rotate(-4deg);
  pointer-events:none;
  z-index:0;
}

/* helle, obere Welle */
#landing.landing-page .lp-context .row > [class*="col"]::after{
  content:"";
  position:absolute;
  left:-30%;
  right:-30%;
  bottom:-55%;
  height:95%;
  background:
    radial-gradient(
      85% 50% at 50% 20%,
      rgba(255,255,255,0.85),
      rgba(255,255,255,0) 68%
    );
  transform: rotate(6deg);
  pointer-events:none;
  z-index:0;
}

/* Inhalt immer über den Wellen */
#landing.landing-page .lp-context .row > [class*="col"] > *{
  position:relative;
  z-index:1;
}
/* ===== BLOCK_49 / lp-experts: Boxen mit Wellen ===== */
#landing.landing-page .lp-experts{
  /* Optional: damit die Section wie in der Referenz "Bühne" wirkt */
  color:#fff;
  padding: 70px 0 80px;
  text-align: center;
}

/* Grid */
#landing.landing-page .lp-experts-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 36px;
}

/* Box-Grundlayout */
#landing.landing-page .lp-expert-box{
  background:#fff;
  border-radius: 16px;
  padding: 34px 30px 38px;
  text-align: left;
  color:#1d2b3a;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(0,0,0,0.20);
}

/* Welle 1 (tiefer, blau) */
#landing.landing-page .lp-expert-box::before{
  content:"";
  position:absolute;
  left:-35%;
  right:-35%;
  bottom:-55%;
  height: 95%;
  background: radial-gradient(
    85% 55% at 50% 20%,
    rgba(15,45,87,0.20),
    rgba(255,255,255,0) 70%
  );
  transform: rotate(-6deg);
  z-index: 0;
  pointer-events: none;
}

/* Welle 2 (hell, darüber) */
#landing.landing-page .lp-expert-box::after{
  content:"";
  position:absolute;
  left:-40%;
  right:-40%;
  bottom:-62%;
  height: 105%;
  background: radial-gradient(
    90% 55% at 50% 18%,
    rgba(255,255,255,0.95),
    rgba(255,255,255,0) 65%
  );
  transform: rotate(7deg);
  z-index: 0;
  pointer-events: none;
}

/* Inhalt immer über den Wellen */
#landing.landing-page .lp-expert-box > *{
  position: relative;
  z-index: 1;
}

/* Typo etwas wie Referenz */
#landing.landing-page .lp-expert-box h3{
  margin: 0 0 14px;
  font-size: 26px;
  line-height: 1.05;
  font-weight: 500;
  color: #58636f;
}
#landing.landing-page .lp-expert-box p{
  margin: 0;
  line-height: 1.6;
  color: rgba(88,99,111,0.75);
}
/* Wellen allgemein stärker */
#landing.landing-page .lp-expert-box::before{
  background: radial-gradient(
    90% 60% at 50% 18%,
    rgba(15,45,87,0.32),
    rgba(255,255,255,0) 72%
  );
}

#landing.landing-page .lp-expert-box::after{
  background: radial-gradient(
    95% 60% at 50% 16%,
    rgba(255,255,255,0.98),
    rgba(255,255,255,0) 64%
  );
}

/* Pro Box eine farbige Boden-Welle (wie Vorlage) */
#landing.landing-page .lp-expert-green::before{
  background: radial-gradient(
    90% 60% at 50% 18%,
    rgba(120,160,80,0.40),
    rgba(255,255,255,0) 72%
  );
}

#landing.landing-page .lp-expert-blue::before{
  background: radial-gradient(
    90% 60% at 50% 18%,
    rgba(30,80,140,0.40),
    rgba(255,255,255,0) 72%
  );
}

#landing.landing-page .lp-expert-teal::before{
  background: radial-gradient(
    90% 60% at 50% 18%,
    rgba(40,140,160,0.40),
    rgba(255,255,255,0) 72%
  );
}

/* Optional: Buttons später pro Box einfärben (wenn du in den Boxen Buttons ergänzt) */
#landing.landing-page .lp-expert-green .btn{ background: rgba(120,160,80,0.95); border-color: rgba(120,160,80,0.95); }
#landing.landing-page .lp-expert-blue  .btn{ background: rgba(30,80,140,0.95); border-color: rgba(30,80,140,0.95); }
#landing.landing-page .lp-expert-teal  .btn{ background: rgba(40,140,160,0.95); border-color: rgba(40,140,160,0.95); }


/******************************
/*** ROLE (Block_50) – wie Experts
/*****************************/

/* Section-Hülle (falls noch nicht durch Panel-Logik abgedeckt) */
#landing.landing-page .lp-role{
  position: relative;
}

/* Headline + Subline */
#landing.landing-page .lp-role-head{
  text-align: center;
  max-width: 900px;
  margin: 0 auto 34px;
}

#landing.landing-page .lp-role-head h2{
  margin: 0 0 10px;
}

#landing.landing-page .lp-role-head p{
  margin: 0;
  line-height: 1.6;
  opacity: 0.95;
}

/* Grid */
#landing.landing-page .lp-role-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

/* Box – tolerant: greift auf .lp-role-box und (falls drin) .lp-expert-box in dieser Section */
#landing.landing-page .lp-role .lp-role-box,
#landing.landing-page .lp-role .lp-expert-box{
  position: relative;
  background: rgba(255,255,255,0.98);
  border-radius: 14px;
  padding: 26px 24px 24px;
  box-shadow: 0 14px 28px rgba(0,0,0,0.16);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
  min-height: 190px;
}

/* Typo in den Boxen */
#landing.landing-page .lp-role .lp-role-box h3,
#landing.landing-page .lp-role .lp-expert-box h3{
  margin: 0 0 10px;
}

#landing.landing-page .lp-role .lp-role-box p,
#landing.landing-page .lp-role .lp-expert-box p{
  margin: 0;
  line-height: 1.6;
  opacity: 0.9;
}

/* „Wellen“-Overlay: sichtbar, aber sauber */
#landing.landing-page .lp-role .lp-role-box:before,
#landing.landing-page .lp-role .lp-expert-box:before{
  content:"";
  position:absolute;
  left:-40%;
  top: 52%;
  width: 180%;
  height: 140px;
  transform: rotate(-6deg);
  background: linear-gradient(90deg,
    rgba(15,45,87,0.00) 0%,
    rgba(15,45,87,0.10) 45%,
    rgba(15,45,87,0.00) 100%
  );
  opacity: 0.55;
  pointer-events:none;
}

/* Untere Farbwelle (je Box anders, wie Vorlage) */
#landing.landing-page .lp-role .lp-role-box:after,
#landing.landing-page .lp-role .lp-expert-box:after{
  content:"";
  position:absolute;
  left:-30%;
  bottom:-70px;
  width: 160%;
  height: 180px;
  border-radius: 50%;
  filter: blur(0px);
  opacity: 0.55;
  pointer-events:none;
}

/* Farbvarianten – du nutzt bereits lp-role-green/blue/teal */
#landing.landing-page .lp-role .lp-role-green:after,
#landing.landing-page .lp-role .lp-role-green.lp-expert-box:after{
  background: radial-gradient(circle at 35% 35%,
    rgba(137, 175, 118, 0.55),
    rgba(137, 175, 118, 0.00) 65%
  );
}

#landing.landing-page .lp-role .lp-role-blue:after,
#landing.landing-page .lp-role .lp-role-blue.lp-expert-box:after{
  background: radial-gradient(circle at 35% 35%,
    rgba(94, 132, 181, 0.55),
    rgba(94, 132, 181, 0.00) 65%
  );
}

#landing.landing-page .lp-role .lp-role-teal:after,
#landing.landing-page .lp-role .lp-role-teal.lp-expert-box:after{
  background: radial-gradient(circle at 35% 35%,
    rgba(90, 186, 196, 0.55),
    rgba(90, 186, 196, 0.00) 65%
  );
}

/* Hover – leicht „lift“ */
#landing.landing-page .lp-role .lp-role-box:hover,
#landing.landing-page .lp-role .lp-expert-box:hover{
  transform: translateY(-2px);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  box-shadow: 0 18px 36px rgba(0,0,0,0.18);
  border-color: rgba(0,0,0,0.10);
}

/* Responsive */
@media (max-width: 980px){
  #landing.landing-page .lp-role-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  #landing.landing-page .lp-role .lp-role-box,
  #landing.landing-page .lp-role .lp-expert-box{
    min-height: auto;
  }
}

/* =======================================
   LP Decision (Block_51) – Fokus-Kacheln
   ======================================= */

#landing.landing-page .lp-decision{
  padding: 70px 0;
}

#landing.landing-page .lp-decision-head{
  text-align: center;
  margin: 0 auto 34px;
  max-width: 900px;
}

#landing.landing-page .lp-decision-head h2{
  margin: 0 0 10px;
}

#landing.landing-page .lp-decision-head p{
  margin: 0;
  line-height: 1.6;
  opacity: .9;
}

/* Grid spacing (Bootstrap cols) */
#landing.landing-page .lp-decision-grid > [class*="col-"]{
  margin-bottom: 18px;
}

/* Card Base */
#landing.landing-page .lp-decision .lp-card{
  position: relative;
  display: block;
  height: 100%;
  padding: 26px 26px 22px;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;

  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);

  overflow: hidden; /* wichtig für Wellen */
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

#landing.landing-page .lp-decision .lp-card:hover{
  transform: translateY(-3px);
  border-color: rgba(0,0,0,0.16);
  box-shadow: 0 16px 38px rgba(0,0,0,0.16);
}

#landing.landing-page .lp-decision .lp-card h3{
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.25;
}

#landing.landing-page .lp-decision .lp-card p{
  margin: 0 0 16px;
  line-height: 1.6;
  color: rgba(29,43,58,0.72);
  max-width: 32ch;
}

/* Wave layer (sichtbarer als vorher) */
#landing.landing-page .lp-decision .lp-card::after{
  content:"";
  position: absolute;
  left: -10%;
  right: -10%;
  top: 52%;
  height: 60%;
  border-radius: 999px;
  transform: rotate(-6deg);
  opacity: .55;                /* <- Sichtbarkeit */
  filter: blur(0px);
  pointer-events: none;
}

/* Farbvarianten der Wellen */
#landing.landing-page .lp-decision .lp-card-green::after{
  background: radial-gradient(700px 220px at 35% 20%,
    rgba(150,185,110,0.55),
    rgba(150,185,110,0.00) 70%);
}

#landing.landing-page .lp-decision .lp-card-blue::after{
  background: radial-gradient(700px 220px at 35% 20%,
    rgba(70,120,190,0.45),
    rgba(70,120,190,0.00) 70%);
}

#landing.landing-page .lp-decision .lp-card-teal::after{
  background: radial-gradient(700px 220px at 35% 20%,
    rgba(70,185,190,0.45),
    rgba(70,185,190,0.00) 70%);
}

/* Button-Look in Card (je Farbe) */
#landing.landing-page .lp-decision .lp-card-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
  border: 1px solid rgba(0,0,0,0.10);
  position: relative;
  z-index: 2; /* über der Welle */
}

/* Button-Farben */
#landing.landing-page .lp-decision .lp-card-green .lp-card-btn{
  background: #6f8753;
  color: #fff;
  border-color: rgba(0,0,0,0.12);
}
#landing.landing-page .lp-decision .lp-card-blue .lp-card-btn{
  background: #0f2d57;
  color: #fff;
  border-color: rgba(0,0,0,0.12);
}
#landing.landing-page .lp-decision .lp-card-teal .lp-card-btn{
  background: #2f7f8a;
  color: #fff;
  border-color: rgba(0,0,0,0.12);
}

/* Hover: Button minimal heller */
#landing.landing-page .lp-decision .lp-card:hover .lp-card-btn{
  filter: brightness(1.06);
}



/* =======================================
   LP Attitude (Block_52) – 2 Karten (verbessert)
   - Wellen sichtbar
   - Wellen bleiben IN der Card (clipping)
   ======================================= */

#landing.landing-page .lp-attitude{
  padding: 70px 0;
}

#landing.landing-page .lp-attitude h2{
  text-align: center;
  margin: 0 0 34px;
}

/* Abstand zwischen den beiden Cards */
#landing.landing-page .lp-attitude-grid{
  margin-top: 10px;
}

#landing.landing-page .lp-attitude-grid > [class*="col-"]{
  margin-bottom: 18px;
}

/* Jede Spalte wird zur Card */
#landing.landing-page .lp-attitude-grid .col-md-6{
  position: relative;
  border-radius: 14px;
  overflow: hidden;               /* << wichtig: clippt die Welle */
  padding: 28px 28px 26px;

  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}

/* Subtiler „Top Glow“ wie in den anderen Panels */
#landing.landing-page .lp-attitude-grid .col-md-6::before{
  content:"";
  position:absolute;
  left:-20%;
  right:-20%;
  top:-40px;
  height: 180px;
  background: radial-gradient(900px 180px at 50% 0%,
    rgba(21,58,106,0.12),
    rgba(255,255,255,0) 70%);
  pointer-events:none;
}

/* Welle (sichtbar, aber nicht „knallig“) */
#landing.landing-page .lp-attitude-grid .col-md-6::after{
  content:"";
  position:absolute;
  left:-25%;
  right:-25%;
  top: 55%;
  height: 70%;
  transform: rotate(-7deg);
  border-radius: 999px;
  opacity: 0.75;                  /* << stärker als vorher */
  pointer-events:none;
}

/* Linke Card = grüner Touch */
#landing.landing-page .lp-attitude-grid .col-md-6:first-child::after{
  background: radial-gradient(900px 260px at 35% 25%,
    rgba(120,160,90,0.45),
    rgba(120,160,90,0.00) 72%);
}

/* Rechte Card = teal Touch */
#landing.landing-page .lp-attitude-grid .col-md-6:last-child::after{
  background: radial-gradient(900px 260px at 35% 25%,
    rgba(70,185,190,0.45),
    rgba(70,185,190,0.00) 72%);
}

/* Inhalt über den Layern */
#landing.landing-page .lp-attitude-grid .col-md-6 > *{
  position: relative;
  z-index: 2;
}

/* Typografie */
#landing.landing-page .lp-attitude-grid h3{
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.25;
}

#landing.landing-page .lp-attitude-grid p{
  margin: 0;
  line-height: 1.6;
  color: rgba(29,43,58,0.74);
  max-width: 60ch;
}

/* =======================================
   LP Attitude – einfache Cards (ohne Bootstrap Grid)
   ======================================= */

#landing.landing-page .lp-attitude{
  padding: 70px 0;
  color: #fff;
}

/* Head */
#landing.landing-page .lp-attitude-head{
  text-align: center;
  margin-bottom: 34px;
}
#landing.landing-page .lp-attitude-head h2{
  margin: 0 0 10px;
  color: #fff;
}
#landing.landing-page .lp-attitude-sub{
  max-width: 820px;
  margin: 0 auto;
  color: rgba(255,255,255,0.78);
  font-size: 16px;
  line-height: 1.6;
}

/* Cards Grid */
#landing.landing-page .lp-attitude-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin-top: 24px;
}

@media (max-width: 991px){
  #landing.landing-page .lp-attitude-cards{
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* Single Card */
#landing.landing-page .lp-attitude-card{
  position: relative;
  background: rgba(255,255,255,0.96);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.10);
  padding: 26px 26px 28px;
  overflow: hidden;
  color: #2b3a4b;
  min-height: 170px;
}

#landing.landing-page .lp-attitude-card h3{
  margin: 0 0 10px;
  font-size: 20px;
  color: #2b3a4b;
}

#landing.landing-page .lp-attitude-card p{
  margin: 0;
  line-height: 1.6;
  color: rgba(43,58,75,0.78);
}

/* Wellen-Layer */
#landing.landing-page .lp-attitude-card::after{
  content:"";
  position:absolute;
  left:-20%;
  right:-20%;
  bottom:-55%;
  height: 95%;
  transform: rotate(-6deg);
  pointer-events:none;
  border-radius: 999px;
  opacity: 1;
  background:
    radial-gradient(120% 70% at 20% 40%, rgba(255,255,255,0.75), rgba(255,255,255,0) 60%),
    radial-gradient(120% 70% at 55% 55%, rgba(255,255,255,0.45), rgba(255,255,255,0) 62%),
    radial-gradient(120% 70% at 85% 35%, rgba(255,255,255,0.30), rgba(255,255,255,0) 60%);
}

/* Farb-Akzent je Card */
#landing.landing-page .lp-att-green::after{
  background:
    radial-gradient(120% 70% at 20% 40%, rgba(255,255,255,0.78), rgba(255,255,255,0) 60%),
    radial-gradient(120% 70% at 55% 55%, rgba(255,255,255,0.45), rgba(255,255,255,0) 62%),
    radial-gradient(120% 70% at 85% 35%, rgba(255,255,255,0.30), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, rgba(120,160,90,0.30) 0%, rgba(120,160,90,0.00) 55%);
}

#landing.landing-page .lp-att-blue::after{
  background:
    radial-gradient(120% 70% at 20% 40%, rgba(255,255,255,0.78), rgba(255,255,255,0) 60%),
    radial-gradient(120% 70% at 55% 55%, rgba(255,255,255,0.45), rgba(255,255,255,0) 62%),
    radial-gradient(120% 70% at 85% 35%, rgba(255,255,255,0.30), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, rgba(70,120,190,0.26) 0%, rgba(70,120,190,0.00) 55%);
}

#landing.landing-page .lp-att-teal::after{
  background:
    radial-gradient(120% 70% at 20% 40%, rgba(255,255,255,0.78), rgba(255,255,255,0) 60%),
    radial-gradient(120% 70% at 55% 55%, rgba(255,255,255,0.45), rgba(255,255,255,0) 62%),
    radial-gradient(120% 70% at 85% 35%, rgba(255,255,255,0.30), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, rgba(70,185,190,0.28) 0%, rgba(70,185,190,0.00) 55%);
}

/* Optional: leichtes Hover */
#landing.landing-page .lp-attitude-card:hover{
  box-shadow: 0 14px 36px rgba(0,0,0,0.14);
  transform: translateY(-2px);
  transition: all .18s ease;
}

/* =======================================
   LP CTA – Verstärkter Fokus & Wellen
   ======================================= */

#landing.landing-page .lp-cta-card .lp-cta{
  padding: 90px 0 100px;
}

/* CTA Card */
#landing.landing-page .lp-cta-card{
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  background: rgba(255,255,255,0.97);
  border-radius: 18px;
  padding: 48px 44px 52px;
  box-shadow:
    0 18px 46px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.6);
  position: relative;
  overflow: hidden;
}

/* ===== Wellen – deutlich sichtbar, layered ===== */
#landing.landing-page .lp-cta-card::after{
  content:"";
  position:absolute;
  left:-30%;
  right:-30%;
  bottom:-55%;
  height: 95%;
  transform: rotate(-6deg);
  pointer-events:none;
  border-radius: 999px;

  background:
    /* obere helle Welle */
    radial-gradient(
      120% 70% at 25% 30%,
      rgba(255,255,255,0.95),
      rgba(255,255,255,0) 62%
    ),
    /* mittlere Dynamik-Welle */
    radial-gradient(
      120% 70% at 55% 55%,
      rgba(120,160,220,0.55),
      rgba(120,160,220,0) 68%
    ),
    /* untere Tiefe */
    radial-gradient(
      140% 80% at 80% 65%,
      rgba(70,120,190,0.45),
      rgba(70,120,190,0) 70%
    ),
    /* Grundfarbverlauf */
    linear-gradient(
      135deg,
      rgba(40,90,160,0.35) 0%,
      rgba(40,90,160,0.00) 60%
    );
}

/* Headline */
#landing.landing-page .lp-cta-card h2{
  margin: 0 0 14px;
  font-size: 32px;
  color: #1f3550;
  letter-spacing: -0.01em;
}

/* Text */
#landing.landing-page .lp-cta-card p{
  max-width: 760px;
  margin: 0 auto 30px;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(31,53,80,0.78);
}

/* Buttons */
#landing.landing-page .lp-cta-actions{
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Button Basis */
#landing.landing-page .lp-btn{
  display: inline-block;
  padding: 13px 26px;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: all .18s ease;
}

/* Primary CTA */
#landing.landing-page .lp-btn-primary{
  background: #1f4f8f;
  color: #fff;
  box-shadow:
    0 8px 22px rgba(31,79,143,0.45);
}
#landing.landing-page .lp-btn-primary:hover{
  background: #163d70;
  transform: translateY(-1px);
  box-shadow:
    0 10px 28px rgba(31,79,143,0.55);
}

/* Secondary CTA */
#landing.landing-page .lp-btn-secondary{
  background: rgba(31,79,143,0.10);
  color: #1f4f8f;
}
#landing.landing-page .lp-btn-secondary:hover{
  background: rgba(31,79,143,0.18);
}

/* Mobile */
@media (max-width: 767px){
  #landing.landing-page .lp-cta-card{
    padding: 36px 26px 40px;
  }
  #landing.landing-page .lp-cta-card h2{
    font-size: 25px;
  }
}
/* =======================================
   CTA – Content über Wellen legen
   ======================================= */

/* CTA Card = neuer Stacking Context */
#landing.landing-page .lp-cta-card{
  position: relative;
  z-index: 1;
}

/* Inhalt explizit nach vorne */
#landing.landing-page .lp-cta-card > *{
  position: relative;
  z-index: 3;
}

/* Wellen bewusst nach hinten */
#landing.landing-page .lp-cta-card::after{
  z-index: 1;
}
/* =======================================
   CTA – Abstand zu Ebene darüber korrigieren
   ======================================= */

#landing.landing-page .lp-final{
  padding-bottom: 80px;   /* vorher ca. 60 → jetzt mehr Luft */
}
/* =======================================
   CTA als Bottom-Band (wie inverse Topbar)
   ======================================= */

/* lp-final soll die volle Breite der Ebene 2 einnehmen */
#landing.landing-page .lp-final{
  max-width:1100px;
  margin:18px auto 0;              /* kein zusätzlicher Abstand nach unten */
  border-radius:0 0 14px 14px;      /* oben gerade, unten rund */
  background:rgba(255,255,255,0.96);
  box-shadow:0 10px 30px rgba(0,0,0,0.10);
  overflow:hidden;
  padding:60px 0 70px;
}

/* Falls lp-final vorher über deine "Panel-Logik" auch ein ::before Wellen-Overlay kriegt:
   oben gerade lassen und nur unten wirken lassen */
#landing.landing-page .lp-final:before{
  inset:auto -40px -40px -40px;    /* nach unten schieben */
  height:260px;
}

/* Buttons garantiert nach vorne */
#landing.landing-page .lp-final .lp-final-actions{
  position:relative;
  z-index:2;
}
/* =======================================
   LP CTA – Abschlussband (Ebene 2)
   ======================================= */

/* Section selbst – kein Abstand nach unten */
#landing.landing-page .lp-cta{
  padding:0;
  margin-top:18px;
}

/* Eigener Container statt Bootstrap */
#landing.landing-page .container-lp-cta{
  max-width:1100px;
  margin:0 auto;
}

/* CTA-Band */
#landing.landing-page .lp-cta-card{
  position:relative;
  background:rgba(255,255,255,0.97);
  padding:60px 60px 70px;
  text-align:center;

  /* oben gerade, unten rund */
  border-radius:0 0 14px 14px;

  box-shadow:0 10px 30px rgba(0,0,0,0.10);
  overflow:hidden;
}

/* Wellen nur unten */
#landing.landing-page .lp-cta-card::before{
  content:"";
  position:absolute;
  left:-20%;
  right:-20%;
  bottom:-45%;
  height:85%;
  transform:rotate(-4deg);
  pointer-events:none;
  z-index:1;

  background:
    radial-gradient(120% 70% at 20% 40%, rgba(255,255,255,0.65), rgba(255,255,255,0) 60%),
    radial-gradient(120% 70% at 55% 55%, rgba(255,255,255,0.35), rgba(255,255,255,0) 62%),
    radial-gradient(120% 70% at 85% 35%, rgba(255,255,255,0.20), rgba(255,255,255,0) 60%),
    linear-gradient(135deg,
      rgba(60,110,180,0.22) 0%,
      rgba(60,110,180,0.00) 60%);
}

/* Text & Buttons immer über den Wellen */
#landing.landing-page .lp-cta-card > *{
  position:relative;
  z-index:2;
}

/* Headline */
#landing.landing-page .lp-cta-card h2{
  margin-bottom:14px;
}

/* Text */
#landing.landing-page .lp-cta-card p{
  max-width:760px;
  margin:0 auto 28px;
  line-height:1.6;
}

/* Buttons */
#landing.landing-page .lp-cta-actions{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}
/* =======================================
   Landing Footer – ruhige Bühne (Landing-only)
   ======================================= */
#landing.landing-page ~ #footer,
#landing.landing-page ~ #bottom,
#landing.landing-page ~ footer.landing-footer{
  background:#0f2d57 !important;
  color:rgba(255,255,255,0.65) !important;
}

#landing.landing-page ~ #bottom{
  padding:18px 0 !important;
  border-top:1px solid rgba(255,255,255,0.08);
}

#landing.landing-page ~ #footer{
  padding:10px 0 18px !important;
}

#landing.landing-page ~ #footer a,
#landing.landing-page ~ #bottom a{
  color:rgba(255,255,255,0.70) !important;
  text-decoration:none;
}

#landing.landing-page ~ #footer a:hover,
#landing.landing-page ~ #bottom a:hover{
  color:#ffffff !important;
  text-decoration:underline;
}

/* Falls das Theme ein HR reinwirft */
#landing.landing-page ~ #bottom hr{ display:none !important; }