/* =========================================================
   MOBILE: Desktop-Slider sofort unterdrücken
   ========================================================= */

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

    #cteFader66 {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;

        /* Höhe passend zu deinem mobilen Hero */
        aspect-ratio: 5 / 4 !important;
        height: auto !important;

        /* Damit während des Ladens kein Desktopbild sichtbar wird */
        background-color: #fcf3f6 !important;
    }

    /* Alle normalen Sliderbilder sofort ausblenden */
    #cteFader66 img,
    #cteFader66 picture,
    #cteFader66 video {
        display: none !important;
    }

    /* Nur den ersten mobilen Slide verwenden */
    #cteFader66 .slide {
        display: none !important;
    }

    #cteFader66 .slide1 {
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;

        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
    }

    /* Sliderpunkte und Pfeile ausblenden */
    #cteFader66 .pagination,
    #cteFader66 .controls,
    #cteFader66 .prev,
    #cteFader66 .next,
    #cteFader66 .slider-control {
        display: none !important;
    }
}


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

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box !important;
    }

    #wrapper,
    #container,
    #main,
    #left,
    #right {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    img {
        max-width: 100% !important;
        height: auto;
    }
}

/*
 * Sonalea – vollständige mobile Grundfassung
 * Stand: 26.07.2026
 *
 * Diese Datei ist für die leere new.css der Originalseite bestimmt.
 * Alle Regeln gelten ausschließlich bis 768 px.
 */

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

    :root {
        --sonalea-wine: #86163e;
        --sonalea-rose: #c9909f;
        --sonalea-rose-dark: #b65f7d;
        --sonalea-rose-light: #fcf3f6;
        --sonalea-rose-border: #e7c4cf;
        --sonalea-text: #68424f;
        --sonalea-muted: #8a6871;
        --sonalea-green: #81ab87;
        --sonalea-busy: #a0838b;
        --sonalea-button: #a0838b;
    }

    html,
    body {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    body {
        background: #fff !important;
        color: var(--sonalea-text) !important;
        font-family: "Segoe UI", Arial, sans-serif !important;
        -webkit-text-size-adjust: 100%;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box !important;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    #wrapper,
    #header,
    #container,
    #footer {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* ==================================================
       HEADER UND LOGO
       ================================================== */

    #header {
        height: auto !important;
        padding: 0 !important;
        background: #fff !important;
    }

    #header > .inside {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #header .logo {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 92px !important;
        margin: 0 !important;
        padding: 12px 18px !important;
        background: #fff !important;
    }

    #header .logo a {
        display: block !important;
        width: min(76%, 350px) !important;
        margin: 0 auto !important;
    }

    #header .logo img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    #header .toptext,
    #header .mobile_menu,
    #header .mobile_login,
    #header .menu_close {
        display: none !important;
    }

    /* Menü bleibt sichtbar – kein Hamburger */
    #header .nav.mod_simplenav {
        position: static !important;
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: rgba(201, 144, 159, 0.94) !important;
        transform: none !important;
        opacity: 1 !important;
    }

    #header .nav nav {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    #header .nav nav::-webkit-scrollbar {
        display: none;
    }

    #header .nav ul.level_1 {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: max-content !important;
        min-width: 100% !important;
        margin: 0 !important;
        padding: 0 8px !important;
    }

    #header .nav ul.level_1 > li {
        float: none !important;
        flex: 1 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    #header .nav ul.level_1 > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 50px !important;
        padding: 10px 14px !important;
        color: #fff !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 22px !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }

    

    #container {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        padding: 0 !important;
        background: #fff !important;
    }

    #left,
    #left > .inside,
    #main,
    #main > .inside {
        display: contents !important;
    }

    #left > .inside > .block {
        display: none !important;
    }

    #left > .inside > .mod_login {
        order: 2 !important;
        display: block !important;
    }

    #cteFader66 {
        order: 1 !important;
    }


    #main form#tabnav {
        order: 4 !important;
    }

    #main .agentlist {
        order: 5 !important;
    }

    #main .pagination {
        order: 6 !important;
    }

    #main .cte_tariffs {
        order: 7 !important;
    }

    #main > .inside > h1,
    #main > .inside > .cte_text {
        order: 8 !important;
    }

    #main > .inside > .clear,
    #container > .clear {
        display: none !important;
    }



    /* ==================================================
       LOGIN DIREKT UNTER DEM BANNER
       ================================================== */

    #left .mod_login {
        width: calc(100% - 24px) !important;
        margin: 14px 12px !important;
        padding: 12px !important;
        border: 1px solid var(--sonalea-rose-border) !important;
        border-radius: 10px !important;
        background: var(--sonalea-rose-light) !important;
        box-shadow: none !important;
    }

    #left .mod_login form {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 9px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    #left .mod_login input.text {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 46px !important;
        margin: 0 !important;
        padding: 0 13px !important;
        border: 1px solid #ddbac5 !important;
        border-radius: 7px !important;
        background: #fff !important;
        color: var(--sonalea-text) !important;
        font-size: 16px !important;
    }

    #left .mod_login input.submit {
        grid-column: 1 / -1 !important;
        display: block !important;
        width: 100% !important;
        height: 48px !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 7px !important;
        background: var(--sonalea-rose-dark) !important;
        color: #fff !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
    }

    #left .mod_login .pwlink {
        grid-column: 1 / -1 !important;
        display: block !important;
        margin: 0 !important;
        color: var(--sonalea-muted) !important;
        font-size: 14px !important;
        line-height: 20px !important;
        text-align: center !important;
    }


/* ==================================================
   MOBILE – KUNDENBEREICH: TAGESBOTSCHAFT
   ================================================== */

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

    html body:has(#left .mod_logout)
    #main#main .cte_text:has(a[href="tagesbotschaft"]) {
        display: block !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 0 30px !important;
        padding: 26px !important;
        border: 1px solid #e7c4cf !important;
        border-radius: 10px !important;
        background: #fffafb !important;
        box-shadow: 0 5px 14px rgba(104, 66, 79, 0.10) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    html body:has(#left .mod_logout)
    #main#main .cte_text:has(a[href="tagesbotschaft"]) table {
        display: table !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        table-layout: fixed !important;
        box-sizing: border-box !important;
    }

    html body:has(#left .mod_logout)
    #main#main .cte_text:has(a[href="tagesbotschaft"]) tbody,
    html body:has(#left .mod_logout)
    #main#main .cte_text:has(a[href="tagesbotschaft"]) tr {
        width: 100% !important;
        height: auto !important;
    }

    html body:has(#left .mod_logout)
    #main#main .cte_text:has(a[href="tagesbotschaft"]) td {
        height: auto !important;
        padding: 16px !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
    }

    html body:has(#left .mod_logout)
    #main#main .cte_text:has(a[href="tagesbotschaft"]) td:first-child {
        width: 60% !important;
    }

    html body:has(#left .mod_logout)
    #main#main .cte_text:has(a[href="tagesbotschaft"]) td:last-child {
        width: 40% !important;
        text-align: center !important;
    }

    html body:has(#left .mod_logout)
    #main#main .cte_text:has(a[href="tagesbotschaft"]) p {
        margin: 0 !important;
        padding: 0 !important;
        color: #68424f !important;
        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 26px !important;
        font-weight: 400 !important;
        line-height: 1.55 !important;
        text-align: center !important;
    }

    html body:has(#left .mod_logout)
    #main#main .cte_text:has(a[href="tagesbotschaft"]) p span,
    html body:has(#left .mod_logout)
    #main#main .cte_text:has(a[href="tagesbotschaft"]) p strong {
        font-family: inherit !important;
        font-size: inherit !important;
        line-height: inherit !important;
    }

    html body:has(#left .mod_logout)
    #main#main .cte_text:has(a[href="tagesbotschaft"])
    p span[style*="color: #ed60a0"] {
        color: #bc5377 !important;
        font-size: 28px !important;
        font-weight: 700 !important;
    }

    html body:has(#left .mod_logout)
    #main#main .cte_text:has(a[href="tagesbotschaft"]) a {
        display: block !important;
        width: 100% !important;
        text-decoration: none !important;
    }

    html body:has(#left .mod_logout)
    #main#main .cte_text:has(a[href="tagesbotschaft"]) img {
        display: block !important;
        width: 100% !important;
        max-width: 310px !important;
        height: auto !important;
        margin: 0 auto !important;
        border-radius: 9px !important;
        box-shadow: 0 5px 13px rgba(104, 66, 79, 0.14) !important;
    }

    html body:has(#left .mod_logout)
    #main#main .cte_text:has(a[href="tagesbotschaft"]) > .clear {
        display: none !important;
    }
}

/* ==================================================
   MOBILE – KUNDENBEREICH: ÜBERSCHRIFTEN UND GUTHABEN
   ================================================== */

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

    html body:has(#left .mod_logout)
    #main#main h2.bh {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 66px !important;
        margin: 0 0 24px !important;
        padding: 11px 20px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #c9909f !important;
        color: #ffffff !important;
        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 31px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    html body:has(#left .mod_logout)
    #main#main .cte_recent > h2.bh {
        margin-bottom: 24px !important;
        background: #bc5377 !important;
    }

    html body:has(#left .mod_logout)
    #main#main .block > p,
    html body:has(#left .mod_logout)
    #main#main .block > span {
        color: #68424f !important;
        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 23px !important;
        line-height: 1.5 !important;
    }

    html body:has(#left .mod_logout)
    #main#main .ajax-credit,
    html body:has(#left .mod_logout)
    #main#main .ajax-credit span {
        color: #bc5377 !important;
        font-size: 27px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
    }

    html body:has(#left .mod_logout)
    #main#main a[href*="guthaben"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 330px !important;
        min-height: 64px !important;
        margin: 15px 0 25px !important;
        padding: 12px 24px !important;
        border: 0 !important;
        border-radius: 7px !important;
        background: #bc5377 !important;
        color: #ffffff !important;
        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 25px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: center !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }

    html body:has(#left .mod_logout)
    #main#main .cte_text:has(a[href="tagesbotschaft"]) {
        margin-bottom: 24px !important;
    }

    html body:has(#left .mod_logout)
    #main#main .cte_text:has(img[src*="Kundenwerbung-Small"]) {
        display: block !important;
        clear: both !important;
        width: 100% !important;
        height: auto !important;
        margin: 20px 0 28px !important;
        padding: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    html body:has(#left .mod_logout)
    #main#main .cte_text:has(img[src*="Kundenwerbung-Small"]) > p {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body:has(#left .mod_logout)
    #main#main .cte_text:has(img[src*="Kundenwerbung-Small"]) br {
        display: none !important;
    }

    html body:has(#left .mod_logout)
    #main#main .cte_text:has(img[src*="Kundenwerbung-Small"])
    > p:not(:has(img)) {
        display: none !important;
    }

    html body:has(#left .mod_logout)
    #main#main .cte_text:has(img[src*="Kundenwerbung-Small"]) img {
        display: block !important;
        width: 100% !important;
        max-width: 900px !important;
        height: auto !important;
        margin: 0 auto !important;
        border-radius: 9px !important;
        box-sizing: border-box !important;
    }

    html body:has(#left .mod_logout)
    #main#main .cte_text:has(img[src*="Kundenwerbung-Small"]) > .clear {
        display: none !important;
    }
}

    /* ==================================================
       BERATERFILTER – ZWEI FELDER PRO REIHE
       ================================================== */

    #main form#tabnav {
        display: block !important;
        width: calc(100% - 24px) !important;
        height: auto !important;
        margin: 0 12px 18px !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    #main form#tabnav ul.tabnav {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-rows: minmax(58px, auto) !important;
        gap: 9px !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    #main form#tabnav ul.tabnav > li {
        float: none !important;
        display: block !important;
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 58px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    #main form#tabnav li:nth-child(1) { order: 1 !important; }
    #main form#tabnav li:nth-child(4) { order: 2 !important; }
    #main form#tabnav li:nth-child(2) { order: 3 !important; }
    #main form#tabnav li:nth-child(3) { order: 4 !important; }
    #main form#tabnav li:nth-child(5) { order: 5 !important; }
    #main form#tabnav li:nth-child(6) { order: 6 !important; }

    #main form#tabnav ul.tabnav > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 58px !important;
        margin: 0 !important;
        padding: 8px !important;
        border-radius: 8px !important;
        background: var(--sonalea-rose-light) !important;
        color: var(--sonalea-muted) !important;
        font-size: clamp(17px, 4.7vw, 26px) !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        text-align: center !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }

    #main form#tabnav ul.tabnav > li.active > a {
        background: var(--sonalea-rose) !important;
        color: #fff !important;
    }

    #main form#tabnav input.search {
        display: block !important;
        width: 100% !important;
        height: 58px !important;
        margin: 0 !important;
        padding: 0 40px 0 12px !important;
        border: 1px solid #d7a7b1 !important;
        border-radius: 8px !important;
        background: #fff !important;
        color: var(--sonalea-text) !important;
        font-size: clamp(17px, 4.7vw, 26px) !important;
        line-height: 58px !important;
    }

    #main form#tabnav input.search::placeholder {
        color: var(--sonalea-muted) !important;
        opacity: 1 !important;
    }

    #main form#tabnav li.last .fa-search {
        position: absolute !important;
        top: 19px !important;
        right: 13px !important;
        color: var(--sonalea-muted) !important;
        font-size: 20px !important;
        pointer-events: none !important;
    }

    /* ==================================================
       BERATERLISTE UND BERATERKACHELN
       ================================================== */

    #main .agentlist.agentlist {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 8px !important;
        overflow: visible !important;
        background: #fff !important;
    }

    #main .agentlist.agentlist > div.profile {
        position: relative !important;
        display: grid !important;
        grid-template-columns: clamp(112px, 31vw, 160px) minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto auto auto !important;
        gap: 13px 14px !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 0 14px !important;
        padding: 14px !important;
        overflow: visible !important;
        border: 1px solid var(--sonalea-rose-border) !important;
        border-radius: 9px !important;
        background: #fff !important;
        box-shadow: 0 2px 8px rgba(113, 35, 64, 0.08) !important;
    }

    #main .agentlist.agentlist > div.profile > .center {
        display: contents !important;
    }

    #main .agentlist.agentlist > div.profile > .clear {
        display: none !important;
    }

    /* Bild, Sterne, Bewertungen und Gespräche */
    #main .agentlist.agentlist > div.profile > .left {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
        display: grid !important;
        grid-template-columns: auto auto !important;
        grid-template-rows: auto auto auto !important;
        justify-content: center !important;
        align-content: start !important;
        align-items: center !important;
        gap: 6px 4px !important;
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    #main .agentlist.agentlist > div.profile > .left > a:not(.rating) {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 101 / 121 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border-radius: 7px !important;
    }

    #main .agentlist.agentlist > div.profile > .left img.pic,
    #main .agentlist.agentlist > div.profile > .left img.img.pic {
        position: static !important;
        display: block !important;
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 7px !important;
        object-fit: cover !important;
        object-position: center top !important;
    }

    #main .agentlist.agentlist > div.profile > .left > a.rating {
        position: static !important;
        grid-column: 1 !important;
        grid-row: 2 !important;
        display: block !important;
        visibility: visible !important;
        width: auto !important;
        height: 25px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    #main .agentlist.agentlist > div.profile .rating .stars {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        height: 25px !important;
        background: none !important;
        font-size: 0 !important;
        line-height: 25px !important;
    }

    #main .agentlist.agentlist > div.profile .rating .stars::before {
        display: block !important;
        content: "★★★★★" !important;
        color: var(--sonalea-rose) !important;
        font-size: clamp(15px, 3.9vw, 20px) !important;
        line-height: 25px !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
    }

    #main .agentlist.agentlist > div.profile > .left > ul.infos {
        display: contents !important;
        visibility: visible !important;
    }

    #main .agentlist.agentlist > div.profile > .left li.pin {
        display: none !important;
    }

    #main .agentlist.agentlist > div.profile > .left li.ratings {
        grid-column: 2 !important;
        grid-row: 2 !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--sonalea-muted) !important;
        font-size: clamp(11px, 3vw, 14px) !important;
        line-height: 25px !important;
        white-space: nowrap !important;
    }

    #main .agentlist.agentlist > div.profile > .left li.calls {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--sonalea-text) !important;
        font-size: clamp(13px, 3.6vw, 16px) !important;
        font-weight: 600 !important;
        line-height: 22px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    /* Name über dem Profiltext, beides neben dem Bild */
    #main .agentlist.agentlist > div.profile .center h3 {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: end !important;
        width: 100% !important;
        margin: 0 0 7px !important;
        padding: 0 !important;
        text-align: center !important;
    }

    #main .agentlist.agentlist > div.profile .center h3 a {
        display: block !important;
        width: 100% !important;
        color: var(--sonalea-wine) !important;
        font-size: clamp(23px, 6vw, 30px) !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: center !important;
        text-decoration: none !important;
    }

    #main .agentlist.agentlist > div.profile .center .teaser {
        grid-column: 2 !important;
        grid-row: 2 !important;
        align-self: start !important;
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        color: var(--sonalea-text) !important;
        font-size: clamp(15px, 4.2vw, 20px) !important;
        font-weight: 400 !important;
        line-height: 1.48 !important;
        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        -webkit-line-clamp: unset !important;
    }

    /* Aktueller Hinweis */
    #main .agentlist.agentlist > div.profile > .notice {
        position: static !important;
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        display: block !important;
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 12px 14px !important;
        border: 0 !important;
        border-radius: 7px !important;
        background: rgba(210, 116, 148, 0.18) !important;
        color: var(--sonalea-text) !important;
        font-size: clamp(15px, 4vw, 18px) !important;
        font-weight: 400 !important;
        line-height: 1.48 !important;
        text-align: center !important;
    }

    #main .agentlist.agentlist > div.profile > .notice::before {
        display: block !important;
        content: "Aktueller Hinweis" !important;
        margin: 0 0 5px !important;
        color: var(--sonalea-wine) !important;
        font-size: clamp(17px, 4.5vw, 20px) !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    /* Preise und Aktionsbuttons */
    #main .agentlist.agentlist > div.profile > .right {
        position: static !important;
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: auto auto auto !important;
        align-items: stretch !important;
        gap: 8px 10px !important;
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    #main .agentlist.agentlist > div.profile > .right > div.chat {
        display: contents !important;
    }

    #main .agentlist.agentlist > div.profile > .right > * {
        position: static !important;
        float: none !important;
        clear: none !important;
        box-sizing: border-box !important;
    }

    #main .agentlist.agentlist > div.profile > .right small.tariff.disable {
        display: none !important;
    }

    #main .agentlist.agentlist > div.profile > .right > small.tariff:not(.disable) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    #main .agentlist.agentlist > div.profile > .right > div.chat >
    small.tariff:not(.disable) {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    #main .agentlist.agentlist > div.profile > .right small.tariff:not(.disable) {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 27px !important;
        margin: 0 !important;
        padding: 2px 3px !important;
        color: var(--sonalea-busy) !important;
        font-size: clamp(14px, 3.8vw, 18px) !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    #main .agentlist.agentlist > div.profile > .right > a.button.click2call {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    #main .agentlist.agentlist > div.profile > .right > div.chat > a.button.chat,
    #main .agentlist.agentlist > div.profile > .right > a.button.chat {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    #main .agentlist.agentlist > div.profile > .right > a.button.pm {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    #main .agentlist.agentlist > div.profile > .right > a.button.email,
    #main .agentlist.agentlist > div.profile > .right > a.button.mail {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }

    #main .agentlist.agentlist > div.profile > .right a.button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 50px !important;
        margin: 0 !important;
        padding: 9px 7px !important;
        border: 1px solid var(--sonalea-button) !important;
        border-radius: 6px !important;
        background: var(--sonalea-button) !important;
        color: #fff !important;
        font-size: clamp(15px, 4vw, 19px) !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        text-align: center !important;
        text-decoration: none !important;
        box-shadow: none !important;
    }

    #main .agentlist.agentlist > div.profile.status_online >
    .right a.button.click2call,
    #main .agentlist.agentlist > div.profile.status_online >
    .right a.button.chat:not(.offline) {
        border-color: var(--sonalea-green) !important;
        background: var(--sonalea-green) !important;
    }

    #main .agentlist.agentlist > div.profile.status_busy >
    .right a.button.click2call,
    #main .agentlist.agentlist > div.profile.status_busy >
    .right a.button.chat {
        border-color: var(--sonalea-busy) !important;
        background: var(--sonalea-busy) !important;
    }

    #main .agentlist.agentlist > div.profile > .right a.button.offline {
        border-color: #a9a9a9 !important;
        background: #a9a9a9 !important;
    }

    /* Letzte Bewertung unter Hinweis und Buttons */
    #main .agentlist.agentlist > div.profile .center .last_rating {
        grid-column: 1 / -1 !important;
        grid-row: 5 !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 13px 14px !important;
        overflow: visible !important;
        border: 0 !important;
        border-top: 1px solid #ead1d8 !important;
        border-radius: 0 !important;
        background: #fff9fb !important;
        color: var(--sonalea-wine) !important;
        font-size: 0 !important;
        line-height: 0 !important;
        text-align: center !important;
    }

    #main .agentlist.agentlist > div.profile .center .last_rating::before {
        display: block !important;
        width: 100% !important;
        margin: 0 0 6px !important;
        content: "Letzte Bewertung" !important;
        color: var(--sonalea-wine) !important;
        font-size: clamp(18px, 4.8vw, 21px) !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        letter-spacing: 0 !important;
        text-align: center !important;
    }

    #main .agentlist.agentlist > div.profile .center .last_rating br {
        display: none !important;
    }

    #main .agentlist.agentlist > div.profile .center .last_rating p {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        color: var(--sonalea-text) !important;
        font-size: clamp(16px, 4.2vw, 19px) !important;
        font-weight: 400 !important;
        line-height: 1.48 !important;
        text-align: center !important;
        white-space: normal !important;
        text-overflow: clip !important;
    }

    /* ==================================================
       WEITERE HAUPTINHALTE UND FOOTER
       ================================================== */

    #main .pagination,
    #main .cte_tariffs,
    #main > .inside > h1,
    #main > .inside > .cte_text {
        width: calc(100% - 24px) !important;
        margin-right: 12px !important;
        margin-left: 12px !important;
    }

    #footer {
        padding: 18px 14px !important;
        overflow: hidden !important;
    }

    #footer > .inside {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #footer img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* Sehr schmale Smartphones */
@media screen and (max-width: 390px) {

    #header .nav ul.level_1 > li > a {
        min-height: 46px !important;
        padding: 9px 11px !important;
        font-size: 15px !important;
    }

    #left .mod_login form {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #main .agentlist.agentlist > div.profile {
        grid-template-columns: 108px minmax(0, 1fr) !important;
        gap: 11px 12px !important;
        padding: 12px !important;
    }
}

/* ==================================================
   MOBILER HEADER: HAMBURGER – LOGO – LOGIN
   ================================================== */

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

    #header > .inside {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 60px minmax(0, 1fr) 60px !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;

        width: 100% !important;
        min-height: 100px !important;
        padding: 0 !important;
        background: #ffffff !important;
    }

    /* Logo mittig */
    #header .logo {
        grid-column: 2 !important;
        grid-row: 1 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 100px !important;
        margin: 0 !important;
        padding: 12px 5px !important;
    }

    #header .logo a {
        display: block !important;
        width: min(100%, 260px) !important;
        margin: 0 auto !important;
    }

    #header .logo img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    #header .toptext {
        display: none !important;
    }

    /* Hamburger links */
    #header .mobile_menu {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: center !important;
        justify-self: center !important;

        position: static !important;
        display: flex !important;
        visibility: visible !important;
        align-items: center !important;
        justify-content: center !important;

        width: 46px !important;
        height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;

        border: 1px solid #e4c4ce !important;
        border-radius: 50% !important;
        background: #fcf3f6 !important;
        color: #9a5069 !important;

        font-size: 0 !important;
        cursor: pointer !important;
        z-index: 20 !important;
    }

    #header .mobile_menu::before {
        content: "☰" !important;
        display: block !important;
        color: #9a5069 !important;
        font-size: 28px !important;
        font-weight: 400 !important;
        line-height: 42px !important;
    }

    /* Login rechts */
    #header .mobile_login {
        grid-column: 3 !important;
        grid-row: 1 !important;
        align-self: center !important;
        justify-self: center !important;

        position: static !important;
        display: flex !important;
        visibility: visible !important;
        align-items: center !important;
        justify-content: center !important;

        width: 46px !important;
        height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;

        border: 1px solid #e4c4ce !important;
        border-radius: 50% !important;
        background: #fcf3f6 !important;
        color: #9a5069 !important;

        font-size: 20px !important;
        text-decoration: none !important;
        z-index: 20 !important;
    }

    #header .mobile_login .fa-lock {
        color: #9a5069 !important;
        font-size: 20px !important;
    }

    /* Menü zunächst geschlossen */
    #header .nav.mod_simplenav {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        position: static !important;
        display: none !important;
        visibility: hidden !important;

        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 8px 0 !important;

        background: #c9909f !important;
        opacity: 1 !important;
        transform: none !important;
        z-index: 30 !important;
    }

    /*
     * Mögliche Öffnungsklassen des vorhandenen Systems.
     * Die tatsächlich verwendete Klasse prüfen wir nach dem Klick.
     */
    #header .nav.mod_simplenav.active,
    #header .nav.mod_simplenav.open,
    #header .nav.mod_simplenav.show,
    body.menu_open #header .nav.mod_simplenav,
    body.menu-open #header .nav.mod_simplenav {
        display: block !important;
        visibility: visible !important;
    }

    #header .nav ul.level_1 {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #header .nav ul.level_1 > li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #header .nav ul.level_1 > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 48px !important;
        padding: 10px 15px !important;

        border-bottom: 1px solid rgba(255, 255, 255, 0.28) !important;
        color: #ffffff !important;

        font-size: 19px !important;
        font-weight: 600 !important;
        line-height: 26px !important;
        text-align: center !important;
        text-decoration: none !important;
    }

    #header .nav ul.level_1 > li:last-child > a {
        border-bottom: 0 !important;
    }
}

/* ==================================================
   MOBILER HEADER – KONSOLIDIERTE FASSUNG
   ================================================== */

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

    :root {
        --mobile-header-height: clamp(115px, 12vw, 155px);
        --mobile-icon-size: clamp(60px, 7vw, 88px);
    }

    /* Feststehender Header */
    #header {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        z-index: 9999 !important;

        display: block !important;
        width: 100% !important;
        height: var(--mobile-header-height) !important;
        min-height: var(--mobile-header-height) !important;
        max-height: var(--mobile-header-height) !important;

        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;

        background: rgba(255, 255, 255, 0.98) !important;
        box-shadow: 0 4px 14px rgba(112, 65, 81, 0.18) !important;
    }

    /* Platz unter dem festen Header */
    #container {
        margin-top: var(--mobile-header-height) !important;
    }

    #header > .inside {
        position: relative !important;
        display: grid !important;
        grid-template-columns:
            clamp(80px, 11vw, 125px)
            minmax(0, 1fr)
            clamp(80px, 11vw, 125px) !important;
        grid-template-rows: var(--mobile-header-height) auto !important;
        align-items: center !important;

        width: 100% !important;
        height: var(--mobile-header-height) !important;
        min-height: var(--mobile-header-height) !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 clamp(14px, 3vw, 34px) !important;
        overflow: visible !important;
        background: #ffffff !important;
    }

    #header .toptext {
        display: none !important;
    }

    /* Logo groß und mittig */
    #header .logo {
        grid-column: 2 !important;
        grid-row: 1 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        height: var(--mobile-header-height) !important;
        min-height: 0 !important;
        max-height: var(--mobile-header-height) !important;

        margin: 0 !important;
        padding: 8px 10px !important;
    }

    #header .logo a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: clamp(280px, 38vw, 470px) !important;
        max-width: 100% !important;
        height: calc(var(--mobile-header-height) - 16px) !important;

        margin: 0 auto !important;
        padding: 0 !important;
    }

    #header .logo img {
        display: block !important;
        width: 100% !important;
        max-width: 470px !important;
        height: 100% !important;
        max-height: calc(var(--mobile-header-height) - 20px) !important;

        margin: 0 auto !important;
        object-fit: contain !important;
    }

    /* Hamburger links */
    #header .mobile_menu {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: center !important;
        justify-self: start !important;

        position: static !important;
        display: flex !important;
        visibility: visible !important;
        align-items: center !important;
        justify-content: center !important;

        width: var(--mobile-icon-size) !important;
        height: var(--mobile-icon-size) !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 3px solid #dfb6c3 !important;
        border-radius: 50% !important;
        background: #fcf3f6 !important;
        color: #9a5069 !important;

        font-size: 0 !important;
        cursor: pointer !important;
        z-index: 20 !important;
    }

    #header .mobile_menu::before {
        display: block !important;
        content: "☰" !important;

        color: #9a5069 !important;
        font-size: clamp(34px, 4vw, 48px) !important;
        font-weight: 400 !important;
        line-height: 1 !important;
    }

    /* Login rechts */
    #header .mobile_login {
        grid-column: 3 !important;
        grid-row: 1 !important;
        align-self: center !important;
        justify-self: end !important;

        position: static !important;
        display: flex !important;
        visibility: visible !important;
        align-items: center !important;
        justify-content: center !important;

        width: var(--mobile-icon-size) !important;
        height: var(--mobile-icon-size) !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 3px solid #dfb6c3 !important;
        border-radius: 50% !important;
        background: #fcf3f6 !important;
        color: #9a5069 !important;

        text-decoration: none !important;
        z-index: 20 !important;
    }

    #header .mobile_login .fa-lock {
        color: #9a5069 !important;
        font-size: clamp(28px, 3.2vw, 40px) !important;
    }

    /* Menü geschlossen */
    #header .nav.mod_simplenav {
        position: absolute !important;
        top: var(--mobile-header-height) !important;
        right: 0 !important;
        left: 0 !important;

        display: none !important;
        visibility: hidden !important;

        width: 100% !important;
        max-height: calc(100vh - var(--mobile-header-height)) !important;

        margin: 0 !important;
        padding: 8px 0 !important;
        overflow-y: auto !important;

        background: #c9909f !important;
        opacity: 1 !important;
        transform: none !important;
        z-index: 10000 !important;
    }

    /* Menü geöffnet */
    #header .nav.mod_simplenav.active,
    #header .nav.mod_simplenav.open,
    #header .nav.mod_simplenav.show,
    body.menu_open #header .nav.mod_simplenav,
    body.menu-open #header .nav.mod_simplenav {
        display: block !important;
        visibility: visible !important;
    }

    #header .nav ul.level_1 {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    #header .nav ul.level_1 > li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #header .nav ul.level_1 > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 58px !important;
        padding: 12px 16px !important;

        border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
        color: #ffffff !important;

        font-size: clamp(19px, 2.4vw, 27px) !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        text-align: center !important;
        text-decoration: none !important;
    }
}

/* ===== Header nochmals größer ===== */
@media screen and (max-width: 1400px) {

    :root {
        --mobile-header-height: clamp(135px, 14vw, 185px);
        --mobile-icon-size: clamp(70px, 8vw, 104px);
    }

    /* Logo deutlich größer */
    #header .logo {
        overflow: visible !important;
    }

    #header .logo a {
        width: clamp(330px, 48vw, 600px) !important;
        max-width: none !important;
        overflow: visible !important;
    }

    #header .logo img {
        width: 125% !important;
        max-width: none !important;
        height: 100% !important;
        max-height: calc(var(--mobile-header-height) - 15px) !important;

        object-fit: contain !important;
        transform: scale(1.12) !important;
        transform-origin: center center !important;
    }

    /* Hamburger größer */
    #header .mobile_menu::before {
        font-size: clamp(40px, 4.8vw, 58px) !important;
    }

    /* Login-Schloss größer */
    #header .mobile_login .fa-lock {
        font-size: clamp(32px, 3.8vw, 47px) !important;
    }
}

/* Logo groß, aber vollständig sichtbar */
@media screen and (max-width: 1400px) {

    #header .logo a {
        width: clamp(360px, 52vw, 650px) !important;
        max-width: none !important;
        overflow: visible !important;
    }

    #header .logo img {
        width: 145% !important;
        max-width: none !important;
        height: auto !important;
        max-height: calc(var(--mobile-header-height) - 28px) !important;

        object-fit: contain !important;
        transform: translateY(12px) scale(1.22) !important;
        transform-origin: center center !important;
    }
}

/* ===== Logo in Mitbewerber-Größe ===== */
@media screen and (max-width: 1400px) {

    #header .logo {
        overflow: visible !important;
        padding: 4px 0 !important;
    }

    #header .logo a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: clamp(300px, 50vw, 670px) !important;
        max-width: none !important;
        height: calc(var(--mobile-header-height) - 8px) !important;

        margin: 0 auto !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    #header .logo img {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: calc(var(--mobile-header-height) - 12px) !important;

        margin: 0 auto !important;
        object-fit: contain !important;

        /* Keine starke Skalierung mehr */
        transform: translateY(5px) !important;
        transform-origin: center center !important;
    }
}

/* ===== Eigenes statisches Mobilbanner ===== */
@media screen and (max-width: 1400px) {

    #cteFader66 .slide {
        display: none !important;
    }

  #cteFader66 .slide1 {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 5 / 3 !important;

    background-image:
        url("/files/layout/img/Mobil/Mobilbanner.png") !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}
   /* Alle Sliderbewegungen abschalten */
#cteFader66 .sliderContainer,
#cteFader66 .mask,
#cteFader66 .mover {
    position: relative !important;
    top: auto !important;
    left: auto !important;

    width: 100% !important;
    height: auto !important;

    transform: none !important;
    transition: none !important;
    animation: none !important;
}

/* Nur das neue Mobilbild anzeigen */
#cteFader66 .slide:not(.slide1) {
    display: none !important;
}

/* Pfeile und Punkte entfernen */
#cteFader66 > .btn,
#cteFader66 > ul.nav {
    display: none !important;
}

/* Alten Loginbereich unter dem Banner mobil entfernen */
@media screen and (max-width: 1400px) {

    #left .mod_login,
    #left > .inside > .mod_login {
        display: none !important;
    }
}


}

/* ==================================================
   BERATERFILTER – SUCHE OBEN, ALLES VOLLE BREITE
   ================================================== */

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

    #main form#tabnav {
        display: block !important;

        width: calc(100% - 28px) !important;
        height: auto !important;

        margin: 18px 14px 24px !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    #main form#tabnav ul.tabnav {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    #main form#tabnav ul.tabnav > li {
        float: none !important;
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 62px !important;

        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    /* Reihenfolge */
    #main form#tabnav li.last {
        order: 1 !important;
    }

    #main form#tabnav li:nth-child(1) {
        order: 2 !important;
    }

    #main form#tabnav li:nth-child(2) {
        order: 3 !important;
    }

    #main form#tabnav li:nth-child(3) {
        order: 4 !important;
    }

    #main form#tabnav li:nth-child(4) {
        order: 5 !important;
    }

    #main form#tabnav li:nth-child(5) {
        order: 6 !important;
    }

    /* Alle Filter über die gesamte Breite */
    #main form#tabnav ul.tabnav > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        height: 64px !important;

        margin: 0 !important;
        padding: 10px 15px !important;

        border: 1px solid #efdbe1 !important;
        border-radius: 8px !important;
        background: #fcf3f6 !important;
        color: #8a6871 !important;

        font-size: clamp(22px, 2.8vw, 30px) !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        text-align: center !important;
        text-decoration: none !important;
        white-space: normal !important;
    }

    /* Aktiver Filter */
    #main form#tabnav ul.tabnav > li.active > a {
        border-color: #c9909f !important;
        background: #c9909f !important;
        color: #ffffff !important;
    }

    /* Suchfeld ganz oben */
    #main form#tabnav li.last {
        position: relative !important;
        width: 100% !important;
        margin-bottom: 5px !important;
    }

    #main form#tabnav input.search {
        display: block !important;

        width: 100% !important;
        height: 68px !important;

        margin: 0 !important;
        padding: 0 56px 0 18px !important;

        border: 2px solid #d7a7b1 !important;
        border-radius: 9px !important;
        background: #ffffff !important;
        color: #68424f !important;

        font-size: clamp(23px, 3vw, 31px) !important;
        line-height: 68px !important;
    }

    #main form#tabnav input.search::placeholder {
        color: #8a6871 !important;
        opacity: 1 !important;
    }

    #main form#tabnav li.last .fa-search {
        position: absolute !important;
        top: 21px !important;
        right: 18px !important;

        color: #a0838b !important;
        font-size: 26px !important;
        pointer-events: none !important;
    }
}

/* ===== Beraterfilter kompakte Anordnung ===== */
@media screen and (max-width: 1400px) {

    #main form#tabnav ul.tabnav {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    /* Beratersuche: erste Reihe, volle Breite */
    #main form#tabnav li.last {
        grid-column: 1 / -1 !important;
        order: 1 !important;
        width: 100% !important;
    }

    /* Alle Berater: zweite Reihe, volle Breite */
    #main form#tabnav li:nth-child(1) {
        grid-column: 1 / -1 !important;
        order: 2 !important;
        width: 100% !important;
    }

    /* Chatberater: dritte Reihe links */
    #main form#tabnav li:nth-child(2) {
        grid-column: 1 !important;
        order: 3 !important;
    }

    /* Mailberater: dritte Reihe rechts */
    #main form#tabnav li:nth-child(3) {
        grid-column: 2 !important;
        order: 4 !important;
    }

    /* Neue Berater: vierte Reihe links */
    #main form#tabnav li:nth-child(4) {
        grid-column: 1 !important;
        order: 5 !important;
    }

    /* Aktionsberater: vierte Reihe rechts */
    #main form#tabnav li:nth-child(5) {
        grid-column: 2 !important;
        order: 6 !important;
    }

    #main form#tabnav ul.tabnav > li {
        width: 100% !important;
        min-width: 0 !important;
    }

    #main form#tabnav ul.tabnav > li > a {
        width: 100% !important;
        min-width: 0 !important;
        padding-right: 8px !important;
        padding-left: 8px !important;
    }
}

/* ===== Beratersuche mittig und Lupe deutlicher ===== */
@media screen and (max-width: 1400px) {

    #main form#tabnav input.search {
        padding-right: 62px !important;
        padding-left: 62px !important;

        font-weight: 600 !important;
        text-align: center !important;
    }

    #main form#tabnav input.search::placeholder {
        color: #80636c !important;
        font-weight: 600 !important;
        text-align: center !important;
        opacity: 1 !important;
    }

    #main form#tabnav li.last .fa-search {
        position: absolute !important;
        top: 50% !important;
        right: 20px !important;

        color: #a44063 !important;
        font-size: 32px !important;

        transform: translateY(-50%) !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        z-index: 5 !important;
    }
}

/* ===== Berater finden mit funktionierender Lupe ===== */
@media screen and (max-width: 1400px) {

    #main form#tabnav li.last {
        position: relative !important;
    }

    #main form#tabnav input.search {
        padding-right: 64px !important;
        padding-left: 64px !important;

        color: #68424f !important;
        font-weight: 400 !important;
        text-align: center !important;
    }

    #main form#tabnav input.search::placeholder {
        color: #80636c !important;
        font-weight: 400 !important;
        text-align: center !important;
        opacity: 1 !important;
    }

    /* Sichtbare Lupe */
    #main form#tabnav li.last .fa-search {
        position: absolute !important;
        top: 50% !important;
        right: 20px !important;
        z-index: 3 !important;

        color: #a44063 !important;
        font-size: 32px !important;

        transform: translateY(-50%) !important;
        pointer-events: none !important;
    }

    /*
     * Unsichtbarer echter Absende-Button liegt
     * über der Lupe und macht sie anklickbar.
     */
    #main form#tabnav input.go {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        z-index: 4 !important;

        display: block !important;
        width: 68px !important;
        height: 68px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-radius: 0 9px 9px 0 !important;
        background: transparent !important;

        opacity: 0 !important;
        cursor: pointer !important;
    }
}

/* ===== Aufklappmenü: größere Schrift ===== */
@media screen and (max-width: 1400px) {

    #header .nav ul.level_1 > li > a {
        min-height: 72px !important;
        padding: 16px 20px !important;

        color: #ffffff !important;
        font-size: clamp(25px, 3.2vw, 34px) !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }
}

/* ===== Aufklappmenü linksbündig und kompakter ===== */
@media screen and (max-width: 1400px) {

    #header .nav ul.level_1 > li > a {
        justify-content: flex-start !important;

        min-height: 54px !important;
        padding: 10px 24px !important;

        font-size: clamp(23px, 2.8vw, 31px) !important;
        line-height: 1.25 !important;
        text-align: left !important;
    }

    #header .nav ul.level_1 > li {
        min-height: 0 !important;
        height: auto !important;
    }
}

/* ===== Aufklappmenü schmaler und links positioniert ===== */
@media screen and (max-width: 1400px) {

    #header .nav.mod_simplenav {
        right: auto !important;
        left: 14px !important;

        width: min(72%, 430px) !important;
        max-width: 430px !important;

        border-radius: 0 0 8px 8px !important;
        box-shadow: 0 6px 16px rgba(91, 47, 63, 0.22) !important;
    }

    #header .nav ul.level_1 {
        width: 100% !important;
    }

    #header .nav ul.level_1 > li,
    #header .nav ul.level_1 > li > a {
        width: 100% !important;
    }
}

/* ===== Menü noch schmaler, Schrift größer ===== */
@media screen and (max-width: 1400px) {

    #header .nav.mod_simplenav {
        width: min(54%, 340px) !important;
        max-width: 340px !important;
    }

    #header .nav ul.level_1 > li > a {
        min-height: 58px !important;
        padding: 11px 18px !important;

        font-size: clamp(26px, 3.2vw, 35px) !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
    }
}

/* ===== Menü transparent über dem Banner ===== */
@media screen and (max-width: 1400px) {

    #header .nav.mod_simplenav {
        background: rgba(185, 103, 130, 0.78) !important;
        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;
    }

    #header .nav ul.level_1,
    #header .nav ul.level_1 > li,
    #header .nav ul.level_1 > li > a {
        background: transparent !important;
    }

    #header .nav ul.level_1 > li > a {
        border-bottom: 1px solid rgba(255, 255, 255, 0.28) !important;
        color: #ffffff !important;
        text-shadow: 0 1px 2px rgba(92, 42, 61, 0.28) !important;
    }
}

/* ===== Menü heller mit gut lesbarer Schrift ===== */
@media screen and (max-width: 1400px) {

    #header .nav.mod_simplenav {
        background: rgba(239, 219, 225, 0.9) !important;
        backdrop-filter: blur(3px) !important;
        -webkit-backdrop-filter: blur(3px) !important;
    }

    #header .nav ul.level_1 > li > a {
        background: transparent !important;
        border-bottom: 1px solid rgba(132, 72, 92, 0.22) !important;

        color: #75354d !important;
        font-weight: 700 !important;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.55) !important;
    }
}

/* ===== Menü links und oben bündig ===== */
@media screen and (max-width: 1400px) {

    #header .nav.mod_simplenav {
        top: var(--mobile-header-height) !important;
        right: auto !important;
        left: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        border-radius: 0 0 8px 0 !important;
    }

    #header .nav ul.level_1 {
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ===== Menü direkt bündig unter dem Header ===== */
@media screen and (max-width: 1400px) {

    #header .nav.mod_simplenav {
        grid-column: auto !important;
        grid-row: auto !important;
        grid-area: auto !important;

        position: absolute !important;
        top: 100% !important;
        right: auto !important;
        bottom: auto !important;
        left: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }
}

/* ===== Gesamten mobilen Header etwas vergrößern ===== */
@media screen and (max-width: 1400px) {

    :root {
        --mobile-header-height: clamp(145px, 15vw, 205px);
        --mobile-icon-size: clamp(76px, 8.5vw, 114px);
    }

    /* Logo größer */
    #header .logo a {
        width: clamp(330px, 55vw, 740px) !important;
        max-width: none !important;
    }

    #header .logo img {
        width: 100% !important;
        max-width: none !important;
        max-height: calc(var(--mobile-header-height) - 14px) !important;
    }

    /* Hamburger-Symbol größer */
    #header .mobile_menu::before {
        font-size: clamp(43px, 5vw, 62px) !important;
    }

    /* Schloss größer */
    #header .mobile_login .fa-lock {
        font-size: clamp(36px, 4.1vw, 51px) !important;
    }
}

/* ===== Mobiler Header nochmals größer ===== */
@media screen and (max-width: 1400px) {

    :root {
        --mobile-header-height: clamp(165px, 17vw, 230px);
        --mobile-icon-size: clamp(88px, 9.5vw, 128px);
    }

    #header .logo a {
        width: clamp(380px, 62vw, 830px) !important;
        max-width: none !important;
    }

    #header .logo img {
        width: 100% !important;
        max-width: none !important;
        max-height: calc(var(--mobile-header-height) - 16px) !important;
    }

    #header .mobile_menu::before {
        font-size: clamp(50px, 5.6vw, 70px) !important;
    }

    #header .mobile_login .fa-lock {
        font-size: clamp(42px, 4.7vw, 58px) !important;
    }
}

/* ==================================================
   MOBILE BERATERKACHELN – NEUE DARSTELLUNG
   ================================================== */

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

    /* Gesamte Kachel */
    #main .agentlist.agentlist > div.profile {
        display: grid !important;
        grid-template-columns: 230px minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto auto auto !important;
        gap: 18px 24px !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 0 24px !important;
        padding: 24px !important;

        overflow: visible !important;
        border: 2px solid #eccbd7 !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        box-shadow: 0 3px 10px rgba(113, 35, 64, 0.09) !important;
    }

    #main .agentlist.agentlist > div.profile > .center {
        display: contents !important;
    }

    #main .agentlist.agentlist > div.profile > .clear {
        display: none !important;
    }

    /* ==============================================
       PROFILBILD UND ZAHLEN
       ============================================== */

    #main .agentlist.agentlist > div.profile > .left {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;

        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto auto !important;
        align-content: start !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px 6px !important;

        position: static !important;
        float: none !important;

        width: 230px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    /* Profilbild */
    #main .agentlist.agentlist > div.profile >
    .left > a:not(.rating) {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;

        display: block !important;
        width: 210px !important;
        height: 252px !important;

        margin: 0 auto 4px !important;
        padding: 0 !important;

        overflow: hidden !important;
        border-radius: 8px !important;
    }

    #main .agentlist.agentlist > div.profile >
    .left img.pic {
        display: block !important;

        width: 210px !important;
        min-width: 210px !important;
        max-width: 210px !important;

        height: 252px !important;
        min-height: 252px !important;
        max-height: 252px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-radius: 8px !important;

        object-fit: cover !important;
        object-position: center top !important;
    }

    /* Sterne unter das Bild verschieben */
    #main .agentlist.agentlist > div.profile >
    .left > a.rating {
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        grid-column: 1 !important;
        grid-row: 2 !important;

        display: block !important;
        visibility: visible !important;

        width: auto !important;
        height: 34px !important;

        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    #main .agentlist.agentlist > div.profile .rating .stars {
        display: block !important;
        width: auto !important;
        height: 34px !important;

        background: none !important;
        font-size: 0 !important;
        line-height: 34px !important;
    }

    #main .agentlist.agentlist >
    div.profile .rating .stars::before {
        display: block !important;
        content: "★★★★★" !important;

        color: #c98aa0 !important;
        font-size: 27px !important;
        line-height: 34px !important;
        letter-spacing: 1px !important;
        white-space: nowrap !important;
    }

    /* Informationen wieder sichtbar */
    #main .agentlist.agentlist > div.profile >
    .left > ul.infos {
        display: contents !important;
        visibility: visible !important;
    }

    #main .agentlist.agentlist > div.profile >
    .left li.pin {
        display: none !important;
    }

    /* Anzahl der Bewertungen hinter den Sternen */
    #main .agentlist.agentlist > div.profile >
    .left li.ratings {
        grid-column: 2 !important;
        grid-row: 2 !important;

        display: block !important;
        margin: 0 !important;
        padding: 0 !important;

        color: #80666e !important;
        font-size: 19px !important;
        line-height: 34px !important;
        white-space: nowrap !important;
    }

    /* Gespräche darunter */
    #main .agentlist.agentlist > div.profile >
    .left li.calls {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;

        display: block !important;
        margin: 0 !important;
        padding: 0 !important;

        color: #68424f !important;
        font-size: 21px !important;
        font-weight: 600 !important;
        line-height: 30px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    /* ==============================================
       NAME UND PROFILTEXT NEBEN DEM BILD
       ============================================== */

    #main .agentlist.agentlist > div.profile h3 {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: end !important;

        width: 100% !important;
        margin: 0 0 10px !important;
        padding: 0 !important;

        text-align: center !important;
    }

    #main .agentlist.agentlist > div.profile h3 a {
        display: block !important;
        width: 100% !important;

        color: #86163e !important;
        font-size: 36px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: center !important;
        text-decoration: none !important;
    }

    #main .agentlist.agentlist > div.profile p.teaser {
        grid-column: 2 !important;
        grid-row: 2 !important;
        align-self: start !important;

        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 10px !important;
        overflow: visible !important;

        color: #653647 !important;
        font-size: 26px !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    /* ==============================================
       AKTUELLER HINWEIS
       ============================================== */

    #main .agentlist.agentlist > div.profile > .notice {
        position: static !important;
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;

        display: block !important;
        float: none !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 18px 20px !important;

        border: 0 !important;
        border-radius: 8px !important;
        background: rgba(210, 116, 148, 0.18) !important;

        color: #68424f !important;
        font-size: 23px !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }

    #main .agentlist.agentlist >
    div.profile > .notice::before {
        display: block !important;
        content: "Aktueller Hinweis" !important;

        margin: 0 0 7px !important;

        color: #86163e !important;
        font-size: 27px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    /* ==============================================
       PREISE UND BUTTONS
       ============================================== */

    #main .agentlist.agentlist > div.profile > .right {
        position: static !important;
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;

        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: auto auto auto !important;
        gap: 10px 14px !important;

        float: none !important;
        width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    #main .agentlist.agentlist >
    div.profile > .right > div.chat {
        display: contents !important;
    }

    #main .agentlist.agentlist >
    div.profile > .right small.tariff.disable {
        display: none !important;
    }

    /* Telefonpreis */
    #main .agentlist.agentlist > div.profile >
    .right > small.tariff:not(.disable) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    /* Chatpreis */
    #main .agentlist.agentlist > div.profile >
    .right > div.chat > small.tariff:not(.disable) {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    #main .agentlist.agentlist > div.profile >
    .right small.tariff:not(.disable) {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 38px !important;

        margin: 0 !important;
        padding: 3px 6px !important;

        color: #a62958 !important;
        font-size: 23px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    #main .agentlist.agentlist > div.profile >
    .right > a.button.click2call {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    #main .agentlist.agentlist > div.profile >
    .right > div.chat > a.button.chat {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    #main .agentlist.agentlist > div.profile >
    .right > a.button.pm {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    #main .agentlist.agentlist > div.profile >
    .right > a.button.email,
    #main .agentlist.agentlist > div.profile >
    .right > a.button.mail {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }

    #main .agentlist.agentlist > div.profile >
    .right a.button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 68px !important;

        margin: 0 !important;
        padding: 13px 16px !important;

        border-radius: 7px !important;

        color: #ffffff !important;
        font-size: 25px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        text-align: center !important;
        text-decoration: none !important;
    }

    /* ==============================================
       LETZTE BEWERTUNG GANZ UNTEN
       ============================================== */

    #main .agentlist.agentlist >
    div.profile .last_rating {
        grid-column: 1 / -1 !important;
        grid-row: 5 !important;

        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;

        margin: 0 !important;
        padding: 18px 20px !important;

        border: 0 !important;
        border-top: 1px solid #ead1d8 !important;
        border-radius: 0 !important;
        background: #fff9fb !important;

        color: #86163e !important;
        font-size: 0 !important;
        line-height: 0 !important;
        text-align: center !important;
    }

    #main .agentlist.agentlist >
    div.profile .last_rating::before {
        display: block !important;
        content: "Letzte Bewertung" !important;

        margin: 0 0 8px !important;

        color: #86163e !important;
        font-size: 27px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        letter-spacing: 0 !important;
    }

    #main .agentlist.agentlist >
    div.profile .last_rating br {
        display: none !important;
    }

    #main .agentlist.agentlist >
    div.profile .last_rating p {
        display: block !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #68424f !important;
        font-size: 23px !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
        text-align: center !important;
        white-space: normal !important;
    }
}

/* ==================================================
   BERATERKACHELN – KORREKTUR UND GRÖSSEN
   Gilt für Testseite und Originalseite
   ================================================== */

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

    /* Testseite #agents580 / Originalseite #agents271 */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile {
        grid-template-columns: 250px minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto auto !important;
        gap: 20px 26px !important;
        padding: 26px !important;
    }

    /* ==============================================
       Bild, Sterne, Bewertungen und Beratungen
       ============================================== */

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .left {
        grid-column: 1 !important;
        grid-row: 1 !important;

        width: 250px !important;
        align-self: start !important;
    }

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .left > a:not(.rating) {
        width: 230px !important;
        height: 276px !important;
    }

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .left img.pic {
        width: 230px !important;
        min-width: 230px !important;
        max-width: 230px !important;

        height: 276px !important;
        min-height: 276px !important;
        max-height: 276px !important;

        object-fit: cover !important;
        object-position: center top !important;
    }

    /* Sterne sicher unter dem Bild */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .left > a.rating {
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        grid-column: 1 !important;
        grid-row: 2 !important;

        display: block !important;
        visibility: visible !important;

        width: auto !important;
        height: 42px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile .rating .stars {
        width: auto !important;
        height: 42px !important;
        background: none !important;
        font-size: 0 !important;
        line-height: 42px !important;
    }

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile .rating .stars::before {
        display: block !important;
        content: "★★★★★" !important;

        color: #c98aa0 !important;
        font-size: 34px !important;
        line-height: 42px !important;
        letter-spacing: 2px !important;
        white-space: nowrap !important;
    }

    /* Bewertungsanzahl neben den Sternen */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .left li.ratings {
        grid-column: 2 !important;
        grid-row: 2 !important;

        display: block !important;

        color: #76505c !important;
        font-size: 24px !important;
        line-height: 42px !important;
        white-space: nowrap !important;
    }

    /* Gespräche/Beratungen darunter */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .left li.calls {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;

        display: block !important;

        color: #68424f !important;
        font-size: 26px !important;
        font-weight: 600 !important;
        line-height: 36px !important;
        text-align: center !important;
    }

    /* ==============================================
       Name und Profiltext oben neben dem Bild
       ============================================== */

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile h3 {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: start !important;

        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile h3 a {
        font-size: 38px !important;
        line-height: 48px !important;
    }

    /*
     * Profiltext liegt in derselben Rasterzeile wie das Bild.
     * Der obere Abstand lässt Platz für den Beraternamen.
     */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile p.teaser {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: start !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 62px 10px 0 !important;

        font-size: 24px !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }

    /* ==============================================
       Hinweis ohne zusätzliche Überschrift
       ============================================== */

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .notice {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        padding: 22px 24px !important;

        font-size: 28px !important;
        font-weight: 500 !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }

    /* Text „Aktueller Hinweis“ entfernen */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .notice::before {
        display: none !important;
        content: none !important;
    }

    /* ==============================================
       Preise und Buttons: zwei Spalten
       ============================================== */

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;

        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: auto auto auto !important;
        gap: 12px 16px !important;

        width: 100% !important;
    }

    /* Telefonpreis links */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right > small.tariff:not(.disable) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    /* Chatpreis rechts */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right > div.chat
    > small.tariff:not(.disable) {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right small.tariff:not(.disable) {
        min-height: 44px !important;

        color: #a62958 !important;
        font-size: 27px !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
    }

    /* Anrufen links, Chatten rechts */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right > a.button.click2call {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right > div.chat > a.button.chat,
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right > a.button.chat {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    /* Nachricht links, E-Mail rechts */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right > a.button.pm {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right > a.button.email,
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right > a.button.mail {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right a.button {
        min-height: 82px !important;
        padding: 16px 18px !important;

        font-size: 30px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
    }

    /* ==============================================
       Letzte Bewertung über die gesamte Breite
       ============================================== */

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile .last_rating {
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 22px 26px !important;

        text-align: center !important;
    }

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile .last_rating::before {
        display: block !important;
        content: "Letzte Bewertung" !important;

        margin-bottom: 10px !important;

        color: #86163e !important;
        font-size: 30px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
    }

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile .last_rating p {
        width: 100% !important;
        margin: 0 !important;

        color: #68424f !important;
        font-size: 28px !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }
}

/*
 * Sonalea – bereinigter Zusatz für mobile Beraterkacheln
 *
 * Ersetzt den vollständigen Inhalt aus „Eingefügter Text(32).txt“.
 * Während der Desktop-Testphase gilt 1400 px.
 * Vor der Veröffentlichung auf 768 px zurückstellen.
 */

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

    /* ==================================================
       PROFILTEXT UND STATISTIK
       ================================================== */

    /* Bewertungssterne und Bewertungsanzahl oben entfernen */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .left > a.rating,
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .left li.ratings {
        display: none !important;
        visibility: hidden !important;
    }

    /* Gesprächszahl mittig unter dem Bild */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .left li.calls {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        display: block !important;
        width: 100% !important;
        margin: 8px 0 0 !important;
        padding: 0 !important;

        color: #68424f !important;
        font-size: 27px !important;
        font-weight: 600 !important;
        line-height: 38px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    /* Profiltext groß und vollständig sichtbar */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile p.teaser {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding-top: 64px !important;
        overflow: visible !important;

        color: #653647 !important;
        font-size: 32px !important;
        font-weight: 400 !important;
        line-height: 1.55 !important;
        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    /* ==================================================
       EINZIGES BUTTONRASTER
       ================================================== */

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right {
        position: static !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: auto auto auto !important;
        grid-auto-flow: row !important;
        grid-auto-rows: auto !important;
        gap: 12px 16px !important;

        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    /* Chat-Inhalte nehmen direkt am Raster teil */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right > div.chat {
        display: contents !important;
    }

    /* Alte oder künstliche Leerzellen entfernen */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right::before,
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right::after {
        display: none !important;
        content: none !important;
    }

    /* Deaktivierten Normalpreis ausblenden */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right small.tariff.disable {
        display: none !important;
    }

    /* Gemeinsame Preisgestaltung */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right small.tariff:not(.disable) {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 3px 6px !important;

        color: #a62958 !important;
        font-size: 27px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    /* Telefonpreis immer links über „Jetzt anrufen“ */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right > small.tariff:not(.disable) {
        grid-column: 1 !important;
        grid-row: 1 !important;
        order: initial !important;
    }

    /* Chatpreis immer rechts über Online-/Offline-Chat */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right > div.chat
    > small.tariff:not(.disable) {
        grid-column: 2 !important;
        grid-row: 1 !important;
        order: initial !important;
    }

    /* Gemeinsame Buttongestaltung */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right a.button,
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right > a.button,
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right > div.chat > a.button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        grid-column: auto !important;
        grid-row: auto !important;
        order: initial !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 84px !important;

        margin: 0 !important;
        padding: 16px 14px !important;

        border-radius: 7px !important;
        color: #fff !important;
        font-size: 30px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        text-align: center !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }

    /*
     * Telefonbutton:
     * Flexcom verwendet nicht immer die Klasse click2call.
     * Deshalb wird jedes direkte Aktionsfeld ausgeschlossen,
     * das eindeutig Chat, E-Mail oder Nachricht ist.
     */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right
    > a.button:not(.pm):not(.email):not(.mail):not(.chat) {
        grid-column: 1 !important;
        grid-row: 2 !important;

        border-color: #869f8ad9 !important;
        background: #869f8ad9 !important;
    }

    /* Chat immer rechts neben Anrufen – auch wenn offline */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right > div.chat > a.button.chat,
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right > a.button.chat {
        grid-column: 2 !important;
        grid-row: 2 !important;

        border-color: #869f8ad9 !important;
        background: #869f8ad9 !important;
    }

    /* Mit Chat: E-Mail links in der unteren Reihe */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right:has(> div.chat) > a.button.email,
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right:has(> div.chat) > a.button.mail {
        grid-column: 1 !important;
        grid-row: 3 !important;

        border-color: #b33a638c !important;
        background: #b33a638c !important;
    }

    /*
     * Ohne Chat: E-Mail rückt direkt rechts neben Anrufen.
     */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right:not(:has(> div.chat)) > a.button.email,
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right:not(:has(> div.chat)) > a.button.mail {
        grid-column: 2 !important;
        grid-row: 2 !important;

        border-color: #b33a638c !important;
        background: #b33a638c !important;
    }

    /* Mit Chat und E-Mail: Nachricht rechts neben E-Mail */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right:has(> div.chat):has(> a.button.email)
    > a.button.pm,
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right:has(> div.chat):has(> a.button.mail)
    > a.button.pm {
        grid-column: 2 !important;
        grid-row: 3 !important;

        border-color: #a0838bcc !important;
        background: #a0838bcc !important;
    }

    /* Mit Chat, aber ohne E-Mail: Nachricht links darunter */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right:has(> div.chat):not(:has(> a.button.email)):not(:has(> a.button.mail))
    > a.button.pm {
        grid-column: 1 !important;
        grid-row: 3 !important;

        border-color: #a0838bcc !important;
        background: #a0838bcc !important;
    }

    /* Ohne Chat, aber mit E-Mail: Nachricht links darunter */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right:not(:has(> div.chat)):has(> a.button.email)
    > a.button.pm,
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right:not(:has(> div.chat)):has(> a.button.mail)
    > a.button.pm {
        grid-column: 1 !important;
        grid-row: 3 !important;

        border-color: #a0838bcc !important;
        background: #a0838bcc !important;
    }

    /* Nur Anrufen und Nachricht: beide nebeneinander */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right:not(:has(> div.chat)):not(:has(> a.button.email)):not(:has(> a.button.mail))
    > a.button.pm {
        grid-column: 2 !important;
        grid-row: 2 !important;

        border-color: #a0838bcc !important;
        background: #a0838bcc !important;
    }

    /* ==================================================
       LETZTE BEWERTUNG MIT DYNAMISCHEN STERNEN
       ================================================== */

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile .last_rating {
        grid-column: 1 / -1 !important;

        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 22px 28px !important;
        overflow: visible !important;

        text-align: center !important;
        box-sizing: border-box !important;
    }

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile .last_rating::before {
        display: block !important;
        width: 100% !important;
        margin: 0 0 12px !important;

        content: "Letzte Bewertung  ★★★★★" !important;
        color: #86163e !important;
        font-size: 31px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        letter-spacing: 1px !important;
        text-align: center !important;
    }

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile:has(.rating .stars.s0) .last_rating::before {
        content: "Letzte Bewertung  ☆☆☆☆☆" !important;
    }

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile:has(.rating .stars.s1) .last_rating::before {
        content: "Letzte Bewertung  ★☆☆☆☆" !important;
    }

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile:has(.rating .stars.s2) .last_rating::before {
        content: "Letzte Bewertung  ★★☆☆☆" !important;
    }

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile:has(.rating .stars.s3) .last_rating::before {
        content: "Letzte Bewertung  ★★★☆☆" !important;
    }

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile:has(.rating .stars.s4) .last_rating::before {
        content: "Letzte Bewertung  ★★★★☆" !important;
    }

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile:has(.rating .stars.s5) .last_rating::before {
        content: "Letzte Bewertung  ★★★★★" !important;
    }

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile .last_rating br {
        display: none !important;
    }

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile .last_rating p {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;

        color: #68424f !important;
        font-size: 28px !important;
        font-weight: 400 !important;
        line-height: 1.55 !important;
        text-align: center !important;
        white-space: normal !important;
        text-overflow: clip !important;
    }
}


/* ===== Größere Button- und Bewertungsschrift ===== */
@media screen and (max-width: 1400px) {

    /* Schrift in allen Aktionsbuttons größer */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right a.button {
        min-height: 92px !important;
        padding: 18px 12px !important;
        font-size: 34px !important;
        line-height: 1.25 !important;
    }

    /* Letzte Bewertung über die gesamte Kachelbreite */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile .last_rating {
        display: block !important;
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 22px 18px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    /* Überschrift „Letzte Bewertung“ und Sterne */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile .last_rating::before {
        font-size: 32px !important;
        line-height: 1.35 !important;
    }

    /* Vollständiger Bewertungstext */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile .last_rating p {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
        text-overflow: clip !important;

        font-size: 32px !important;
        line-height: 1.5 !important;
        text-align: left !important;
        overflow-wrap: anywhere !important;
    }
}

/* ===== Einheitliche Buttonschrift und Statusfarben ===== */
@media screen and (max-width: 1400px) {

    /* Alle Buttons mit exakt gleicher Schrift */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right a.button,

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right > div.chat > a.button {
        font-family: inherit !important;
        font-size: 34px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
    }

    /* Auch enthaltene Texte und Symbole übernehmen die Schriftgröße */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right a.button span,

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right a.button small {
        font-size: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
    }

/* ===== Statusfarben mit höherster Priorität ===== */

/* Pause – Anruf und Chat */
html body #main#main#main#main .button.button.break,
html body #main#main#main#main .break .button.button {
    background: #a0838b !important;
    background-color: #a0838b !important;
    background-image: none !important;
    border-color: #a0838b !important;
    color: #ffffff !important;
}

/* Offline – Anruf und Chat */
html body #main#main#main#main .button.button.offline,
html body #main#main#main#main .offline .button.button {
    background: #a9a9a9 !important;
    background-color: #a9a9a9 !important;
    background-image: none !important;
    border-color: #a9a9a9 !important;
    color: #ffffff !important;
}


}

/* ==================================================
   ECKBANNER DER BERATERKACHELN
   ================================================== */

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

    /* Kachel als Bezugspunkt */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile {
        position: relative !important;
        overflow: hidden !important;
    }

    /* Gemeinsames Design aller diagonalen Eckbanner */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile::before,

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile::after {
        position: absolute !important;
        z-index: 20 !important;

        display: none;
        align-items: center !important;
        justify-content: center !important;

        width: 190px !important;
        height: 48px !important;
        padding: 0 !important;
        margin: 0 !important;

        background-image: none !important;
        border: 0 !important;
        box-shadow: 0 2px 6px rgba(80, 40, 55, 0.2) !important;

        color: #ffffff !important;
        font-family: inherit !important;
        font-size: 21px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        letter-spacing: 0.5px !important;
        text-align: center !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;

        box-sizing: border-box !important;
        pointer-events: none !important;
    }

    /* ==================================================
       VIP – immer links oben
       ================================================== */

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile.vip::before {
        content: "VIP" !important;
        display: flex !important;

        top: 24px !important;
        left: -59px !important;
        right: auto !important;

        transform: rotate(-45deg) !important;
        background: #b33a63 !important;
    }

    /* ==================================================
       NEU – rechts oben, während der ersten 60 Tage
       ================================================== */

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile.new::after {
        content: "NEU" !important;
        display: flex !important;

        top: 24px !important;
        right: -59px !important;
        left: auto !important;

        transform: rotate(45deg) !important;
        background: #ca8c99 !important;
    }

    /* ==================================================
       SILBER – rechts oben
       ================================================== */

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile.silber::after {
        content: "SILBER" !important;
        display: flex !important;

        top: 24px !important;
        right: -59px !important;
        left: auto !important;

        transform: rotate(45deg) !important;
        background: #a9a9a9 !important;
    }

    /* ==================================================
       GOLD – rechts oben
       ================================================== */

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile.gold::after {
        content: "GOLD" !important;
        display: flex !important;

        top: 24px !important;
        right: -59px !important;
        left: auto !important;

        transform: rotate(45deg) !important;
        background: #a17b7be3 !important;
    }

    /* ==================================================
       PREMIUM – rechts oben
       ================================================== */

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile.premium::after {
        content: "PREMIUM" !important;
        display: flex !important;

        top: 24px !important;
        right: -59px !important;
        left: auto !important;

        transform: rotate(45deg) !important;
        background: #a7657d !important;
    }

    /* ==================================================
       TOP – rechts oben
       ================================================== */

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile.top::after {
        content: "TOP" !important;
        display: flex !important;

        top: 24px !important;
        right: -59px !important;
        left: auto !important;

        transform: rotate(45deg) !important;
        background: #b33a6391 !important;
    }

    /* ==================================================
       BERATER DES TAGES
       Ersetzt das rechte Eckbanner
       ================================================== */

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile.campagent::after {
        content: none !important;
        display: none !important;
    }

/* ===== Berater des Tages oberhalb des Namens ===== */

#main :is(#agents580#agents580, #agents271#agents271)
> div.profile.campagent .center h3 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    gap: 9px !important;
    text-align: center !important;
}

/* Beratername unterhalb des Hinweises */
#main :is(#agents580#agents580, #agents271#agents271)
> div.profile.campagent .center h3 > a {
    order: 2 !important;
    display: block !important;
    margin: 0 !important;
}

/* Hinweis oberhalb des Beraternamens */
#main :is(#agents580#agents580, #agents271#agents271)
> div.profile.campagent .center h3::after {
    content: "Berater des Tages" !important;
    order: 1 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 230px !important;
    max-width: 90% !important;
    margin: 0 auto !important;
    padding: 10px 20px !important;

    border: 0 !important;
    border-radius: 7px !important;
    background: #d895aa !important;
    box-shadow: none !important;

    color: #ffffff !important;
    font-family: inherit !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-transform: none !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* Platz für Banner und Beratername reservieren */
#main :is(#agents580#agents580, #agents271#agents271)
> div.profile.campagent .center p.teaser {
    padding-top: 125px !important;
}

/* Beraterkachel „Berater des Tages“ hervorheben */
#main :is(#agents580#agents580, #agents271#agents271)
> div.profile.campagent {
    border: 4px solid #d895aa !important;
    border-radius: 10px !important;
    background-color: #fffafb !important;

    box-shadow:
        0 0 0 2px rgba(216, 149, 170, 0.15),
        0 5px 16px rgba(134, 22, 62, 0.16) !important;

    box-sizing: border-box !important;
}

/* Bewertungstext etwas weiter rechts beginnen lassen */
#main :is(#agents580#agents580, #agents271#agents271)
> div.profile .last_rating p {
    width: 100% !important;
    padding-left: 45px !important;
    padding-right: 20px !important;
    text-align: left !important;
    box-sizing: border-box !important;
}


}

/* ==================================================
   MOBILE BERATERDETAILSEITE – OBERER PROFILBEREICH
   ================================================== */

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

    /* Gesamter oberer Beraterbereich */
    #main .article[id^="ddi"] {
        display: grid !important;
        grid-template-columns: 220px minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto auto auto !important;
        gap: 16px 24px !important;

        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 0 28px !important;
        padding: 28px !important;

        border: 2px solid #e7c4cf !important;
        border-radius: 10px !important;
        background: #ffffff !important;

        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Beratername über die gesamte Breite */
    #main .article[id^="ddi"] > h1 {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;

        width: 100% !important;
        margin: 0 0 8px !important;
        padding: 0 !important;

        color: #86163e !important;
        font-size: 38px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    /* Panel-Inhalte in das äußere Raster übernehmen */
    #main .article[id^="ddi"] > .panel {
        display: contents !important;
    }

    /* Profilbild links */
    #main .article[id^="ddi"] > .left {
        grid-column: 1 !important;
        grid-row: 2 !important;

        display: block !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    #main .article[id^="ddi"] > .left img {
        display: block !important;
        width: 200px !important;
        max-width: 100% !important;
        height: 240px !important;

        margin: 0 auto !important;
        border-radius: 8px !important;
        object-fit: cover !important;
    }

    /* Kurzbeschreibung rechts neben dem Profilbild */
    #main .article[id^="ddi"] > .panel > p.teaser {
        grid-column: 2 !important;
        grid-row: 2 !important;
        align-self: center !important;

        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;

        color: #68424f !important;
        font-size: 30px !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    /* Berater-ID unter dem Bild */
    #main .article[id^="ddi"] > .panel > .pin {
        grid-column: 1 !important;
        grid-row: 3 !important;

        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;

        color: #68424f !important;
        font-size: 23px !important;
        line-height: 1.4 !important;
        text-align: center !important;
    }

    /* Alte Trennlinie entfernen */
    #main .article[id^="ddi"] > .panel > .devider,
    #main .article[id^="ddi"] > .panel > .clear {
        display: none !important;
    }

    /* Aktueller Hinweis über die gesamte Breite */
    #main .article[id^="ddi"] > .panel > p.notice {
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;

        display: block !important;
        width: 100% !important;
        height: auto !important;

        margin: 8px 0 0 !important;
        padding: 20px 24px !important;

        border: 0 !important;
        border-radius: 8px !important;
        background: #f8e9ee !important;

        color: #68424f !important;
        font-size: 27px !important;
        font-style: italic !important;
        line-height: 1.5 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* Bereich für Preis und Buttons */
    #main .article[id^="ddi"] > .panel > .right {
        grid-column: 1 / -1 !important;
        grid-row: 5 !important;

        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: auto auto !important;
        gap: 12px 16px !important;

        float: none !important;
        width: 100% !important;
        height: auto !important;

        margin: 4px 0 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Alten durchgestrichenen Preis ausblenden */
    #main .article[id^="ddi"] > .panel > .right
    small.tariff.disable {
        display: none !important;
    }

    /* Aktueller Preis über dem Anrufbutton */
    #main .article[id^="ddi"] > .panel > .right
    small.tariff:not(.disable) {
        grid-column: 1 !important;
        grid-row: 1 !important;

        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;

        color: #b33a63 !important;
        font-size: 27px !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
        text-align: center !important;
    }

    /* Alle Aktionsbuttons */
    #main .article[id^="ddi"] > .panel > .right a.button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 84px !important;
        margin: 0 !important;
        padding: 16px 12px !important;

        border: 0 !important;
        border-radius: 7px !important;

        color: #ffffff !important;
        font-family: inherit !important;
        font-size: 32px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        text-align: center !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }

    /* Anrufbutton links */
    #main .article[id^="ddi"] > .panel > .right
    a.button:first-of-type {
        grid-column: 1 !important;
        grid-row: 2 !important;

        background: #869f8ad9 !important;
        border-color: #869f8ad9 !important;
    }

    /* Nachricht rechts */
    #main .article[id^="ddi"] > .panel > .right
    a.button:last-of-type {
        grid-column: 2 !important;
        grid-row: 2 !important;

        background: #a0838b !important;
        border-color: #a0838b !important;
    }
}

/* ==================================================
   DETAILSEITE – ALTE DESKTOPPOSITIONEN ZURÜCKSETZEN
   ================================================== */

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

    /* Alle Bestandteile wieder normal in das Raster einordnen */
    #main .article[id^="ddi"] > h1,
    #main .article[id^="ddi"] > .left,
    #main .article[id^="ddi"] > .panel,
    #main .article[id^="ddi"] > .panel > .right,
    #main .article[id^="ddi"] > .panel > p.teaser,
    #main .article[id^="ddi"] > .panel > .pin,
    #main .article[id^="ddi"] > .panel > p.notice {
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        float: none !important;
        transform: none !important;
    }

    /* Preis und Buttons ebenfalls aus alter Positionierung lösen */
    #main .article[id^="ddi"] > .panel > .right a.button,
    #main .article[id^="ddi"] > .panel > .right small.tariff {
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        float: none !important;
        clear: none !important;
        transform: none !important;
    }

    /* Profilbild und Kurzbeschreibung in einer gemeinsamen Reihe */
    #main .article[id^="ddi"] > .left {
        grid-column: 1 !important;
        grid-row: 2 !important;
        align-self: start !important;
    }

    #main .article[id^="ddi"] > .panel > p.teaser {
        grid-column: 2 !important;
        grid-row: 2 !important;
        align-self: center !important;
    }

    /* ID unter dem Profilbild */
    #main .article[id^="ddi"] > .panel > .pin {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    /* Hinweis darunter über die gesamte Breite */
    #main .article[id^="ddi"] > .panel > p.notice {
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;
    }

    /* Preis und Buttons ganz unten */
    #main .article[id^="ddi"] > .panel > .right {
        grid-column: 1 / -1 !important;
        grid-row: 5 !important;
        position: static !important;
    }
}

/* ==================================================
   MOBILE BERATERDETAILSEITE – PROFILTEXT
   ================================================== */
/* ===== Profiltext auf Beraterdetailseite ===== */

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

    html body .longtext.longtext {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 30px 32px 40px !important;

        color: #68424f !important;
        background: #ffffff !important;

        font-size: 28px !important;
        line-height: 1.6 !important;
        text-align: left !important;

        overflow: visible !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }

    html body .longtext.longtext p {
        display: block !important;
        width: 100% !important;
        max-width: none !important;

        margin: 0 0 20px !important;
        padding: 0 !important;

        color: #68424f !important;
        font-family: inherit !important;
        font-size: 28px !important;
        font-weight: 400 !important;
        line-height: 1.6 !important;
        text-align: left !important;

        overflow: visible !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    html body .longtext.longtext p:first-child {
        color: #86163e !important;
        font-size: 30px !important;
        font-weight: 600 !important;
    }
}

/* ==================================================
   MOBILE BERATERDETAILSEITE – BEWERTUNGEN
   ================================================== */

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

    /* Gesamter Bewertungsbereich */
    html body #ratings.ratings {
        display: block !important;
        width: 100% !important;
        max-width: none !important;

        margin: 30px 0 0 !important;
        padding: 0 !important;

        background: #ffffff !important;
        box-sizing: border-box !important;
    }

    html body #ratings.ratings > .inside {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Überschrift „Alle Bewertungen“ */
    html body #ratings.ratings h2.bh {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 64px !important;

        margin: 0 !important;
        padding: 12px 20px !important;

        background: #c9909f !important;
        color: #ffffff !important;

        font-family: inherit !important;
        font-size: 31px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: center !important;

        box-sizing: border-box !important;
    }

    /* Einzelne Bewertung als eigene Karte */
    html body #ratings.ratings .rating {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        gap: 10px 18px !important;

        width: calc(100% - 32px) !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 16px !important;
        padding: 22px 24px !important;

        border: 1px solid #e7c4cf !important;
        border-radius: 8px !important;
        background: #fffafb !important;

        overflow: visible !important;
        box-sizing: border-box !important;
    }

    /* Kundenname und Datum */
    html body #ratings.ratings .rating > span.name {
        grid-column: 1 !important;
        grid-row: 1 !important;

        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;

        color: #68424f !important;
        font-size: 24px !important;
        font-weight: 400 !important;
        line-height: 1.4 !important;
        text-align: left !important;
    }

    html body #ratings.ratings .rating > span.name strong {
        color: #86163e !important;
        font-size: inherit !important;
        font-weight: 700 !important;
    }

    /* Alte kleine Sternengrafik zurücksetzen */
    html body #ratings.ratings .rating > .stars {
        grid-column: 2 !important;
        grid-row: 1 !important;

        display: block !important;
        width: auto !important;
        min-width: 170px !important;
        height: auto !important;
        min-height: 38px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: none !important;
        background-image: none !important;

        color: #c98aa0 !important;
        font-size: 31px !important;
        line-height: 1.2 !important;
        letter-spacing: 2px !important;
        text-align: right !important;
    }

    /* Bewertungssterne entsprechend der vorhandenen Klasse */
    html body #ratings.ratings .rating > .stars::before {
        display: block !important;
        color: #c98aa0 !important;
        font-size: 31px !important;
        line-height: 1.2 !important;
        letter-spacing: 2px !important;
        text-align: right !important;
    }

    html body #ratings.ratings .rating > .stars.s0::before {
        content: "☆☆☆☆☆" !important;
    }

    html body #ratings.ratings .rating > .stars.s1::before {
        content: "★☆☆☆☆" !important;
    }

    html body #ratings.ratings .rating > .stars.s2::before {
        content: "★★☆☆☆" !important;
    }

    html body #ratings.ratings .rating > .stars.s3::before {
        content: "★★★☆☆" !important;
    }

    html body #ratings.ratings .rating > .stars.s4::before {
        content: "★★★★☆" !important;
    }

    html body #ratings.ratings .rating > .stars.s5::before {
        content: "★★★★★" !important;
    }

    /* Vollständiger Bewertungstext über die ganze Breite */
    html body #ratings.ratings .rating > p {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #68424f !important;
        font-family: inherit !important;
        font-size: 27px !important;
        font-weight: 400 !important;
        line-height: 1.55 !important;
        text-align: left !important;

        overflow: visible !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        text-overflow: clip !important;
    }

    /* Seitennavigation */
    html body #ratings.ratings .pagination {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;

        width: 100% !important;
        margin: 24px 0 34px !important;
        padding: 0 16px !important;

        font-size: 24px !important;
        box-sizing: border-box !important;
    }

    html body #ratings.ratings .pagination ul {
        display: flex !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body #ratings.ratings .pagination li {
        display: block !important;
        margin: 0 !important;
        list-style: none !important;
    }

    html body #ratings.ratings .pagination a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-width: 48px !important;
        min-height: 48px !important;
        padding: 6px 12px !important;

        border-radius: 6px !important;
        background: #efdbe1 !important;
        color: #86163e !important;

        font-size: 23px !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }

    html body #ratings.ratings .pagination li.active a {
        background: #c9909f !important;
        color: #ffffff !important;
    }

    html body #ratings.ratings .pagination .total {
        color: #68424f !important;
        font-size: 23px !important;
    }
}

/* ===== Name und Kurzprofiltext sauber ausrichten ===== */
@media screen and (max-width: 1400px) {

    /* Profilbild beginnt bereits auf Höhe des Namens */
    html body #main#main .article[id^="ddi"] > .left {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
        align-self: center !important;
    }

    /* Beratername mittig über dem Kurzprofiltext */
    html body #main#main .article[id^="ddi"] > h1 {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: end !important;

        display: block !important;
        width: 100% !important;
        margin: 0 0 12px !important;
        padding: 0 !important;

        text-align: center !important;
    }

    /* Kurzprofiltext auf derselben Mittelachse */
    html body #main#main
    .article[id^="ddi"] > .panel > p.teaser {
        grid-column: 2 !important;
        grid-row: 2 !important;
        align-self: start !important;

        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;

        text-align: center !important;
    }

    /* ID bleibt unter dem Profilbild */
    html body #main#main
    .article[id^="ddi"] > .panel > .pin {
        grid-column: 1 !important;
        grid-row: 3 !important;
        text-align: center !important;
    }
}

/* ===== Überschriftenbalken Profiltext vergrößern ===== */
@media screen and (max-width: 1400px) {

    html body #main#main h2.bh:has(+ .longtext),
    html body #main#main *:has(> .longtext) > h2.bh {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 64px !important;

        margin: 0 !important;
        padding: 12px 20px !important;

        background: #c9909f !important;
        color: #ffffff !important;

        font-family: inherit !important;
        font-size: 31px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: center !important;

        box-sizing: border-box !important;
    }
}

/* ==================================================
   BERATERDETAILSEITE – VOLLSTÄNDIGES BUTTONRASTER
   ================================================== */

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

    /* Gemeinsames Raster */
    html body #main#main .article[id^="ddi"]
    > .panel > .right {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: auto auto auto !important;
        grid-auto-flow: row !important;
        gap: 12px 16px !important;

        width: 100% !important;
        height: auto !important;
    }

    /* Chat-Inhalte direkt in das gemeinsame Raster übernehmen */
    html body #main#main .article[id^="ddi"]
    > .panel > .right > div.chat {
        display: contents !important;
    }

    /* Telefonpreis links oben */
    html body #main#main .article[id^="ddi"]
    > .panel > .right > small.tariff:not(.disable) {
        grid-column: 1 !important;
        grid-row: 1 !important;

        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        text-align: center !important;
    }

    /* Chatpreis rechts oben */
    html body #main#main .article[id^="ddi"]
    > .panel > .right > div.chat > small.tariff:not(.disable) {
        grid-column: 2 !important;
        grid-row: 1 !important;

        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        text-align: center !important;
    }

    /* Anruf immer links */
    html body #main#main .article[id^="ddi"]
    > .panel > .right > a.button:first-of-type {
        grid-column: 1 !important;
        grid-row: 2 !important;

        background: #869f8ad9 !important;
        border-color: #869f8ad9 !important;
    }

    /* Chat immer rechts neben Anrufen */
    html body #main#main .article[id^="ddi"]
    > .panel > .right > div.chat > a.button.chat {
        grid-column: 2 !important;
        grid-row: 2 !important;

        width: 100% !important;
        margin: 0 !important;
        background: #869f8ad9 !important;
        border-color: #869f8ad9 !important;
    }

    /* E-Mail-Beratung mit Chat: links in der unteren Reihe */
    html body #main#main .article[id^="ddi"]
    > .panel > .right:has(> div.chat) > a.button.email {
        grid-column: 1 !important;
        grid-row: 3 !important;

        background: #b33a638c !important;
        border-color: #b33a638c !important;
    }

    /* Nachricht mit Chat und E-Mail: rechts unten */
    html body #main#main .article[id^="ddi"]
    > .panel > .right:has(> div.chat):has(> a.button.email)
    > a.button:not(:first-of-type):not(.email) {
        grid-column: 2 !important;
        grid-row: 3 !important;

        background: #a0838b !important;
        border-color: #a0838b !important;
    }

    /* Nachricht mit Chat, aber ohne E-Mail: links unten */
    html body #main#main .article[id^="ddi"]
    > .panel > .right:has(> div.chat):not(:has(> a.button.email))
    > a.button:not(:first-of-type) {
        grid-column: 1 !important;
        grid-row: 3 !important;

        background: #a0838b !important;
        border-color: #a0838b !important;
    }

    /* Ohne Chat: E-Mail rechts neben Anrufen */
    html body #main#main .article[id^="ddi"]
    > .panel > .right:not(:has(> div.chat)) > a.button.email {
        grid-column: 2 !important;
        grid-row: 2 !important;

        background: #b33a638c !important;
        border-color: #b33a638c !important;
    }

    /* Ohne Chat und ohne E-Mail: Nachricht rechts neben Anrufen */
    html body #main#main .article[id^="ddi"]
    > .panel > .right:not(:has(> div.chat)):not(:has(> a.button.email))
    > a.button:not(:first-of-type) {
        grid-column: 2 !important;
        grid-row: 2 !important;

        background: #a0838b !important;
        border-color: #a0838b !important;
    }

    /* Ohne Chat, aber mit E-Mail: Nachricht links unten */
    html body #main#main .article[id^="ddi"]
    > .panel > .right:not(:has(> div.chat)):has(> a.button.email)
    > a.button:not(:first-of-type):not(.email) {
        grid-column: 1 !important;
        grid-row: 3 !important;

        background: #a0838b !important;
        border-color: #a0838b !important;
    }

    /* Pause-Farben für Anruf und Chat */
    html body #main#main .article[id^="ddi"]
    > .panel > .right .button.break {
        background: #a0838b !important;
        border-color: #a0838b !important;
        color: #ffffff !important;
    }

    /* Offline-Farben für Anruf und Chat */
    html body #main#main .article[id^="ddi"]
    > .panel > .right .button.offline {
        background: #a9a9a9 !important;
        border-color: #a9a9a9 !important;
        color: #ffffff !important;
    }
}

/* ==================================================
   MOBILE BERATERDETAILSEITE – KATEGORIEN
   ================================================== */

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

    /* Gesamter Kategorienbereich */
    html body #main#main .cats.block {
        display: block !important;
        width: 100% !important;
        max-width: none !important;

        margin: 30px 0 !important;
        padding: 0 0 26px !important;

        border: 1px solid #e7c4cf !important;
        border-radius: 9px !important;
        background: #ffffff !important;

        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Überschrift */
    html body #main#main .cats.block > h2 {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 64px !important;

        margin: 0 0 22px !important;
        padding: 12px 20px !important;

        background: #c9909f !important;
        color: #ffffff !important;

        font-family: inherit !important;
        font-size: 31px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: center !important;

        box-sizing: border-box !important;
    }

    /* Kategorien als zweispaltiges Raster */
    html body #main#main .cats.block > ul {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px 16px !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 24px !important;

        list-style: none !important;
        box-sizing: border-box !important;
    }

    html body #main#main .cats.block > ul > li {
        display: block !important;
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }

    /* Einzelne Kategorie als gut lesbare Schaltfläche */
    html body #main#main .cats.block > ul > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 76px !important;
        height: 100% !important;

        margin: 0 !important;
        padding: 14px 16px !important;

        border: 1px solid #e5c8d1 !important;
        border-radius: 8px !important;
        background: #efdbe1 !important;

        color: #68424f !important;
        font-family: inherit !important;
        font-size: 25px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        text-align: center !important;
        text-decoration: none !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
        box-sizing: border-box !important;
    }

    /* Berührung beziehungsweise Mauszeiger */
    html body #main#main .cats.block > ul > li > a:hover,
    html body #main#main .cats.block > ul > li > a:focus {
        background: #d7a7b1 !important;
        color: #ffffff !important;
    }

    html body #main#main .cats.block > .clear {
        display: none !important;
    }
}

/* ==================================================
   MOBILE – E-MAIL-BERATUNGSANGEBOTE
   ================================================== */

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

    /* Gesamter Angebotsbereich */
    html body #main#main .mailcon_articles {
        display: block !important;
        width: 100% !important;
        max-width: none !important;

        margin: 30px 0 !important;
        padding: 0 0 26px !important;

        border: 1px solid #e7c4cf !important;
        border-radius: 9px !important;
        background: #ffffff !important;

        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Überschriftenbalken */
    html body #main#main .mailcon_articles > h2.bh {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 64px !important;

        margin: 0 0 22px !important;
        padding: 12px 20px !important;

        background: #c9909f !important;
        color: #ffffff !important;

        font-family: inherit !important;
        font-size: 31px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: center !important;

        box-sizing: border-box !important;
    }

    html body #main#main .mailcon_articles > h2.bh span {
        color: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
    }

    /* Alte Tabellenbegrenzung entfernen */
    html body #main#main .mailcon_articles .table {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 22px !important;

        overflow: visible !important;
        box-sizing: border-box !important;
    }

    html body #main#main .mailcon_articles table,
    html body #main#main .mailcon_articles tbody {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    /* Alte Tabellenüberschrift mobil ausblenden */
    html body #main#main .mailcon_articles thead {
        display: none !important;
    }

    /* Jedes Angebot als eigene Karte */
    html body #main#main .mailcon_articles tbody > tr {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        gap: 14px 18px !important;

        width: 100% !important;
        margin: 0 0 16px !important;
        padding: 22px 24px !important;

        border: 1px solid #e7c4cf !important;
        border-radius: 8px !important;
        background: #fffafb !important;

        box-sizing: border-box !important;
    }

    /* Bezeichnung über die gesamte Breite */
    html body #main#main .mailcon_articles tbody > tr > td.first {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;

        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;

        color: #68424f !important;
        font-family: inherit !important;
        font-size: 27px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        text-align: left !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    /* Preis links unten */
    html body #main#main .mailcon_articles tbody > tr
    > td:not(.first):not(.last) {
        grid-column: 1 !important;
        grid-row: 2 !important;
        align-self: center !important;

        display: block !important;
        margin: 0 !important;
        padding: 0 !important;

        color: #b33a63 !important;
        font-family: inherit !important;
        font-size: 26px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: left !important;
    }

    html body #main#main .mailcon_articles tbody > tr
    > td:not(.first):not(.last) span {
        color: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
    }

    /* Aktionsfeld rechts unten */
    html body #main#main .mailcon_articles tbody > tr > td.last {
        grid-column: 2 !important;
        grid-row: 2 !important;

        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: right !important;
    }

    /* Anzeigen-Button */
    html body #main#main .mailcon_articles tbody > tr > td.last > a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-width: 180px !important;
        min-height: 58px !important;
        margin: 0 !important;
        padding: 10px 20px !important;

        border: 0 !important;
        border-radius: 7px !important;
        background: #b33a638c !important;

        color: #ffffff !important;
        font-family: inherit !important;
        font-size: 24px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        text-align: center !important;
        text-decoration: none !important;

        box-sizing: border-box !important;
    }

    html body #main#main .mailcon_articles tbody > tr > td.last > a:hover,
    html body #main#main .mailcon_articles tbody > tr > td.last > a:focus {
        background: #b33a63 !important;
    }

    /* Letzte Karte ohne zusätzlichen unteren Abstand */
    html body #main#main .mailcon_articles tbody > tr:last-child {
        margin-bottom: 0 !important;
    }
}

/* ==================================================
   BERATERDETAILSEITE – ECKBANNER
   ================================================== */

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

    /* Oberen Profilbereich für Eckbanner vorbereiten */
    html body #main#main
    .profile:has(> .article[id^="ddi"])
    > .article[id^="ddi"] {
        position: relative !important;
        overflow: hidden !important;
    }

    /* Gemeinsame Gestaltung */
    html body #main#main
    .profile:has(> .article[id^="ddi"])
    > .article[id^="ddi"]::before,

    html body #main#main
    .profile:has(> .article[id^="ddi"])
    > .article[id^="ddi"]::after {
        position: absolute !important;
        z-index: 40 !important;

        display: none;
        align-items: center !important;
        justify-content: center !important;

        width: 190px !important;
        height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        background-image: none !important;
        box-shadow: 0 2px 6px rgba(80, 40, 55, 0.2) !important;

        color: #ffffff !important;
        font-family: inherit !important;
        font-size: 21px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        letter-spacing: 0.5px !important;
        text-align: center !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;

        box-sizing: border-box !important;
        pointer-events: none !important;
    }

    /* VIP immer links oben */
    html body #main#main
    .profile.vip > .article[id^="ddi"]::before {
        content: "VIP" !important;
        display: flex !important;

        top: 24px !important;
        left: -59px !important;
        right: auto !important;

        transform: rotate(-45deg) !important;
        background: #b33a63 !important;
    }

    /* Neu rechts oben */
    html body #main#main
    .profile.new > .article[id^="ddi"]::after {
        content: "NEU" !important;
        display: flex !important;

        top: 24px !important;
        right: -59px !important;
        left: auto !important;

        transform: rotate(45deg) !important;
        background: #ca8c99 !important;
    }

    /* Silber rechts oben */
    html body #main#main
    .profile.silber > .article[id^="ddi"]::after {
        content: "SILBER" !important;
        display: flex !important;

        top: 24px !important;
        right: -59px !important;
        left: auto !important;

        transform: rotate(45deg) !important;
        background: #a9a9a9 !important;
    }

    /* Gold rechts oben */
    html body #main#main
    .profile.gold > .article[id^="ddi"]::after {
        content: "GOLD" !important;
        display: flex !important;

        top: 24px !important;
        right: -59px !important;
        left: auto !important;

        transform: rotate(45deg) !important;
        background: #c5a15a !important;
    }

    /* Premium rechts oben */
    html body #main#main
    .profile.premium > .article[id^="ddi"]::after {
        content: "PREMIUM" !important;
        display: flex !important;

        top: 24px !important;
        right: -59px !important;
        left: auto !important;

        transform: rotate(45deg) !important;
        background: #a7657d !important;
    }

    /* Top rechts oben */
    html body #main#main
    .profile.top > .article[id^="ddi"]::after {
        content: "TOP" !important;
        display: flex !important;

        top: 24px !important;
        right: -59px !important;
        left: auto !important;

        transform: rotate(45deg) !important;
        background: #b33a63 !important;
    }

    /* Berater des Tages ersetzt das rechte Eckbanner */
    html body #main#main
    .profile.campagent > .article[id^="ddi"]::after {
        content: "BERATER DES TAGES" !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 250px !important;
        height: 58px !important;

        top: 38px !important;
        right: -78px !important;
        left: auto !important;

        transform: rotate(45deg) !important;
        background: #d895aa !important;

        color: #ffffff !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    /* Kachel „Berater des Tages“ zusätzlich hervorheben */
    html body #main#main
    .profile.campagent > .article[id^="ddi"] {
        border: 4px solid #d895aa !important;
        border-radius: 10px !important;
        background-color: #fffafb !important;

        box-shadow:
            0 0 0 2px rgba(216, 149, 170, 0.15),
            0 5px 16px rgba(134, 22, 62, 0.16) !important;

        box-sizing: border-box !important;
    }
}

/* ===== Alte System-Eckbanner auf Detailseiten ausblenden ===== */
@media screen and (max-width: 1400px) {

    html body #main#main
    .profile:has(> .article[id^="ddi"])::before,

    html body #main#main
    .profile:has(> .article[id^="ddi"])::after {
        content: none !important;
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background: none !important;
        background-image: none !important;
        box-shadow: none !important;
    }
}

/* ==================================================
   MOBILER FOOTER – GRÖSSERE SCHRIFT
   ================================================== */

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

    /* Gesamter Footer */
    html body #footer#footer,
    html body #footer#footer > .inside {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;

        margin: 0 !important;
        padding: 26px 24px !important;

        color: #68424f !important;
        background: #ffffff !important;

        font-family: inherit !important;
        font-size: 22px !important;
        line-height: 1.5 !important;

        box-sizing: border-box !important;
        overflow: visible !important;
    }

    html body #footer#footer > .inside {
        padding: 0 !important;
    }

    /* Sämtliche Footertexte */
    html body #footer#footer p,
    html body #footer#footer span,
    html body #footer#footer small,
    html body #footer#footer strong,
    html body #footer#footer li,
    html body #footer#footer td,
    html body #footer#footer th {
        color: #68424f !important;
        font-family: inherit !important;
        font-size: 22px !important;
        line-height: 1.5 !important;
    }

    /* Alle Footerlinks */
    html body #footer#footer a {
        color: #68424f !important;
        font-family: inherit !important;
        font-size: 22px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        text-decoration: none !important;
    }

    html body #footer#footer a:hover,
    html body #footer#footer a:focus {
        color: #b33a63 !important;
        text-decoration: underline !important;
    }

    /* Linklisten übersichtlich umbrechen */
    html body #footer#footer ul {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 14px 22px !important;

        width: 100% !important;
        margin: 18px 0 !important;
        padding: 0 !important;

        list-style: none !important;
        box-sizing: border-box !important;
    }

    html body #footer#footer li {
        display: block !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    /* Tabellen und Preisangaben */
    html body #footer#footer table {
        width: 100% !important;
        margin: 18px 0 !important;
        border-collapse: collapse !important;
        table-layout: auto !important;
    }

    html body #footer#footer th,
    html body #footer#footer td {
        padding: 10px 12px !important;
        text-align: left !important;
        vertical-align: top !important;
        white-space: normal !important;
    }

    /* Kleine Hinweise nicht mehr winzig */
    html body #footer#footer small,
    html body #footer#footer .small {
        font-size: 19px !important;
        line-height: 1.45 !important;
    }

    /* Footerbuttons */
    html body #footer#footer .button,
    html body #footer#footer a.button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-height: 52px !important;
        padding: 10px 18px !important;

        border-radius: 6px !important;
        background: #a0838b !important;
        color: #ffffff !important;

        font-size: 21px !important;
        font-weight: 700 !important;
        text-align: center !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }
}

/* ==================================================
   MOBILE TARIFTABELLE – LÄNDER UND TELEFONKOSTEN
   ================================================== */

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

    /* Gesamter Tarifbereich */
    html body .cte_tariffs.cte_tariffs {
        display: block !important;
        width: 100% !important;
        max-width: none !important;

        margin: 26px 0 !important;
        padding: 22px 24px !important;

        border: 1px solid #e7c4cf !important;
        border-radius: 8px !important;
        background: #fffafb !important;

        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Hinweis oberhalb der Tabelle */
    html body .cte_tariffs.cte_tariffs > p {
        display: block !important;
        width: 100% !important;

        margin: 0 0 18px !important;
        padding: 0 !important;

        color: #68424f !important;
        font-family: inherit !important;
        font-size: 20px !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
        text-align: left !important;

        white-space: normal !important;
    }

    /* Tabelle */
    html body .cte_tariffs.cte_tariffs table {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        border-collapse: collapse !important;
        table-layout: fixed !important;
        box-sizing: border-box !important;
    }

    /* Spaltenüberschriften */
    html body .cte_tariffs.cte_tariffs th {
        padding: 14px 12px !important;

        border-bottom: 2px solid #c9909f !important;
        background: #efdbe1 !important;
        color: #86163e !important;

        font-family: inherit !important;
        font-size: 24px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: center !important;
        vertical-align: middle !important;

        white-space: normal !important;
        box-sizing: border-box !important;
    }

    /* Länder und Preise */
    html body .cte_tariffs.cte_tariffs td {
        padding: 13px 12px !important;

        border-bottom: 1px solid #ead5dc !important;
        color: #68424f !important;

        font-family: inherit !important;
        font-size: 23px !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;
        text-align: center !important;
        vertical-align: middle !important;

        white-space: normal !important;
        box-sizing: border-box !important;
    }

    /* Erste Spalte linksbündig */
    html body .cte_tariffs.cte_tariffs th.first,
    html body .cte_tariffs.cte_tariffs td.first {
        width: 38% !important;
        text-align: left !important;
    }

    html body .cte_tariffs.cte_tariffs th:not(.first),
    html body .cte_tariffs.cte_tariffs td:not(.first) {
        width: 31% !important;
    }

    /* „Alle anzeigen“ */
    html body .cte_tariffs.cte_tariffs a.show_all {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-height: 52px !important;
        margin: 8px auto 0 !important;
        padding: 10px 22px !important;

        border-radius: 6px !important;
        background: #a0838b !important;
        color: #ffffff !important;

        font-family: inherit !important;
        font-size: 22px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        text-align: center !important;
        text-decoration: none !important;

        box-sizing: border-box !important;
    }
}

/* ==================================================
   LETZTE BEWERTUNG – RUHIGERE DARSTELLUNG
   ================================================== */

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

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile .last_rating {
        display: block !important;
        grid-column: 1 / -1 !important;

        width: 100% !important;
        max-width: none !important;
        height: auto !important;

        margin: 22px 0 0 !important;
        padding: 24px 28px 26px !important;

        border: 0 !important;
        border-top: 2px solid #e7c4cf !important;
        border-radius: 0 !important;
        background: #fffafb !important;
        box-shadow: none !important;

        text-align: center !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    /* Überschrift und Sterne */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile .last_rating::before {
        display: block !important;
        width: 100% !important;

        margin: 0 0 14px !important;
        padding: 0 !important;

        color: #86163e !important;
        font-size: 30px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        letter-spacing: 1px !important;
        text-align: center !important;
    }

    /* Ursprüngliche Überschrift verbergen */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile .last_rating br {
        display: none !important;
    }

    /* Bewertungstext */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile .last_rating p {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 20px !important;

        color: #68424f !important;
        font-size: 27px !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
        text-align: center !important;

        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        box-sizing: border-box !important;
    }
}

/* ==================================================
   AKTUELLEN HINWEIS UNTER DIE BUTTONS SETZEN
   ================================================== */

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

    /* Preise und Buttons zuerst */
    html body #main#main
    :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;

        margin-top: 16px !important;
        margin-bottom: 0 !important;
    }

    /* Aktueller Hinweis direkt unter den Buttons */
    html body #main#main
    :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .notice {
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;

        width: 100% !important;
        margin: 18px 0 0 !important;
        padding: 18px 22px !important;

        border: 0 !important;
        border-radius: 8px !important;
        background: #f8e9ee !important;

        color: #68424f !important;
        font-size: 27px !important;
        line-height: 1.5 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* Keine zusätzliche Überschrift „Aktueller Hinweis“ */
    html body #main#main
    :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .notice::before {
        content: none !important;
        display: none !important;
    }

    /* Letzte Bewertung bleibt als ruhiger Abschluss */
    html body #main#main
    :is(#agents580#agents580, #agents271#agents271)
    > div.profile .last_rating {
        grid-column: 1 / -1 !important;
        grid-row: 5 !important;
        margin-top: 18px !important;
    }
}

/* ===== Bewertungstext als Kundenzitat ===== */
@media screen and (max-width: 1400px) {

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile .last_rating p::before {
        content: "„" !important;
        display: inline !important;

        margin-right: 3px !important;
        color: #c9909f !important;
        font-size: 34px !important;
        font-weight: 700 !important;
        line-height: 0 !important;
    }

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile .last_rating p::after {
        content: "“" !important;
        display: inline !important;

        margin-left: 3px !important;
        color: #c9909f !important;
        font-size: 34px !important;
        font-weight: 700 !important;
        line-height: 0 !important;
    }
}

/* ===== Nur Sterne – ohne Text „Letzte Bewertung“ ===== */
@media screen and (max-width: 1400px) {

    /* Ursprünglichen Textknoten ausblenden */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile .last_rating {
        font-size: 0 !important;
    }

    /* Nur Sterne anzeigen */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile .last_rating::before {
        content: "★★★★★" !important;

        display: block !important;
        margin: 0 0 14px !important;

        color: #c9909f !important;
        font-size: 31px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        letter-spacing: 3px !important;
        text-align: center !important;
    }

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile:has(.rating .stars.s0) .last_rating::before {
        content: "☆☆☆☆☆" !important;
    }

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile:has(.rating .stars.s1) .last_rating::before {
        content: "★☆☆☆☆" !important;
    }

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile:has(.rating .stars.s2) .last_rating::before {
        content: "★★☆☆☆" !important;
    }

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile:has(.rating .stars.s3) .last_rating::before {
        content: "★★★☆☆" !important;
    }

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile:has(.rating .stars.s4) .last_rating::before {
        content: "★★★★☆" !important;
    }

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile:has(.rating .stars.s5) .last_rating::before {
        content: "★★★★★" !important;
    }

    /* Bewertungstext wieder in normaler Größe */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile .last_rating p {
        font-size: 27px !important;
    }
}

/* ===== Bewertungstext größer und kursiv ===== */
@media screen and (max-width: 1400px) {

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile .last_rating p {
        font-size: 30px !important;
        font-style: italic !important;
        font-weight: 300 !important;
        line-height: 1.55 !important;
        color: #68424f !important;
        text-align: center !important;
    }

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile .last_rating p::before,

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile .last_rating p::after {
        font-size: 38px !important;
        font-style: normal !important;
    }
}

/* ===== Schriftkorrekturen Hinweis und Bewertung ===== */
@media screen and (max-width: 1400px) {

    /* Aktueller Hinweis nicht kursiv */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .notice {
        font-style: normal !important;
        font-weight: 400 !important;
    }

    /* Bewertung kursiv, aber nicht fett */
    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile .last_rating p {
        font-style: italic !important;
        font-weight: 300 !important;
    }

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile .last_rating p strong,

    #main :is(#agents580#agents580, #agents271#agents271)
    > div.profile .last_rating p b {
        font-weight: 300 !important;
    }
}

/* ===== Finale Schriftarten für Hinweis und Bewertung ===== */
@media screen and (max-width: 1400px) {

    /* Aktueller Hinweis: normale Schrift */
    html body #main#main#main#main
    div.profile[id^="ddi"] > .notice,

    html body #main#main#main#main
    div.profile[id^="ddi"] > .notice * {
        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 29px !important;
        font-style: normal !important;
        font-weight: 600 !important;
        line-height: 1.5 !important;
    }

    /* Bewertung: normale Schriftstärke, nur kursiv */
    html body #main#main#main#main
    div.profile[id^="ddi"] .last_rating p,

    html body #main#main#main#main
    div.profile[id^="ddi"] .last_rating p * {
        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 28px !important;
        font-style: italic !important;
        font-weight: 400 !important;
        line-height: 1.55 !important;
    }

    /* Anführungszeichen weiterhin kräftiger */
    html body #main#main#main#main
    div.profile[id^="ddi"] .last_rating p::before,

    html body #main#main#main#main
    div.profile[id^="ddi"] .last_rating p::after {
        font-family: Arial, sans-serif !important;
        font-size: 38px !important;
        font-style: normal !important;
        font-weight: 700 !important;
    }
}

/* ==================================================
   MOBILE LOGINSEITE
   ================================================== */

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

    /* Loginbereich */
    html body .mod_login:has(form[action^="/login"]) {
        display: block !important;
        width: 100% !important;
        max-width: 760px !important;

        margin: 30px auto 40px !important;
        padding: 30px 32px 34px !important;

        border: 1px solid #e7c4cf !important;
        border-radius: 10px !important;
        background: #fffafb !important;

        box-shadow: 0 4px 14px rgba(134, 22, 62, 0.08) !important;
        box-sizing: border-box !important;
    }

    /* Überschrift */
    html body .mod_login:has(form[action^="/login"])::before {
        content: "Willkommen zurück!" !important;

        display: block !important;
        width: 100% !important;

        margin: 0 0 24px !important;
        padding: 0 !important;

        color: #86163e !important;
        font-family: inherit !important;
        font-size: 32px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    /* Formular */
    html body .mod_login form[action^="/login"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Benutzername und Passwort */
    html body .mod_login form[action^="/login"] input.text {
        display: block !important;
        width: 100% !important;
        height: 68px !important;
        min-height: 68px !important;

        margin: 0 !important;
        padding: 12px 20px !important;

        border: 2px solid #dfbdc8 !important;
        border-radius: 7px !important;
        background: #ffffff !important;

        color: #68424f !important;
        font-family: inherit !important;
        font-size: 27px !important;
        font-weight: 400 !important;
        line-height: 1.3 !important;

        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    html body .mod_login form[action^="/login"] input.text::placeholder {
        color: #8a6871 !important;
        opacity: 1 !important;
    }

    html body .mod_login form[action^="/login"] input.text:focus {
        border-color: #c9909f !important;
        outline: 3px solid rgba(201, 144, 159, 0.18) !important;
    }

    /* Loginbutton */
    html body .mod_login form[action^="/login"] input.submit {
        display: block !important;
        width: 100% !important;
        height: 68px !important;
        min-height: 68px !important;

        margin: 4px 0 0 !important;
        padding: 12px 20px !important;

        border: 0 !important;
        border-radius: 7px !important;
        background: #b33a638c !important;

        color: #ffffff !important;
        font-family: inherit !important;
        font-size: 28px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: center !important;

        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    html body .mod_login form[action^="/login"] input.submit:hover,
    html body .mod_login form[action^="/login"] input.submit:focus {
        background: #b33a63 !important;
    }

    /* Passwort vergessen */
    html body .mod_login form[action^="/login"] a.pwlink {
        display: block !important;
        align-self: center !important;

        margin: 4px 0 0 !important;
        padding: 8px 12px !important;

        color: #86163e !important;
        font-family: inherit !important;
        font-size: 23px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        text-align: center !important;
        text-decoration: underline !important;
    }

    /* Schloss im Header auf der Loginseite sichtbar halten */
    html body .mobile_login,
    html body .mobile_login .fas {
        visibility: visible !important;
        opacity: 1 !important;
    }

    html body .mobile_login .fas {
        display: block !important;
        color: #a64c70 !important;
        font-size: 34px !important;
        line-height: 1 !important;
    }
}

/* ==================================================
   LOGINSEITE – NEU BEI SONALEA
   ================================================== */

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

    /* Registrierungsbereich direkt nach dem Login */
    html body #main#main
    .mod_login:has(form[action^="/login"])
    ~ .cte_text:has(> h2.bh) {
        display: block !important;
        width: 100% !important;
        max-width: 760px !important;

        margin: 26px auto 42px !important;
        padding: 0 32px 34px !important;

        border: 1px solid #e7c4cf !important;
        border-radius: 10px !important;
        background: #fffafb !important;

        box-shadow: 0 4px 14px rgba(134, 22, 62, 0.08) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Überschrift */
    html body #main#main
    .mod_login:has(form[action^="/login"])
    ~ .cte_text:has(> h2.bh) > h2.bh {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: calc(100% + 64px) !important;
        min-height: 64px !important;

        margin: 0 -32px 26px !important;
        padding: 12px 20px !important;

        background: #c9909f !important;
        color: #ffffff !important;

        font-family: inherit !important;
        font-size: 31px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: center !important;

        box-sizing: border-box !important;
    }

    /* Leeren Abstand entfernen */
    html body #main#main
    .mod_login:has(form[action^="/login"])
    ~ .cte_text:has(> h2.bh) > p:first-of-type {
        display: none !important;
    }

    /* Absatz mit Registrierungsbutton */
    html body #main#main
    .mod_login:has(form[action^="/login"])
    ~ .cte_text:has(> h2.bh) > p {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    /* Alte verschachtelte Spans neutralisieren */
    html body #main#main
    .mod_login:has(form[action^="/login"])
    ~ .cte_text:has(> h2.bh) p > span.button {
        display: block !important;
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        background: none !important;
        color: inherit !important;

        font-size: inherit !important;
        box-sizing: border-box !important;
    }

    /* Registrierungslink als großer Button */
    html body #main#main
    .mod_login:has(form[action^="/login"])
    ~ .cte_text:has(> h2.bh) p a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 68px !important;

        margin: 0 !important;
        padding: 12px 20px !important;

        border: 0 !important;
        border-radius: 7px !important;
        background: #b33a638c !important;

        color: #ffffff !important;
        font-family: inherit !important;
        font-size: 27px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: center !important;
        text-decoration: none !important;

        box-sizing: border-box !important;
    }

    html body #main#main
    .mod_login:has(form[action^="/login"])
    ~ .cte_text:has(> h2.bh) p a strong,

    html body #main#main
    .mod_login:has(form[action^="/login"])
    ~ .cte_text:has(> h2.bh) p a span {
        color: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
    }

    html body #main#main
    .mod_login:has(form[action^="/login"])
    ~ .cte_text:has(> h2.bh) p a:hover,

    html body #main#main
    .mod_login:has(form[action^="/login"])
    ~ .cte_text:has(> h2.bh) p a:focus {
        background: #b33a63 !important;
    }
}


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


    /* „Neu bei Sonalea?“ auf der Loginseite */
    html body #main#main#main#main
    .mod_login:has(form[action^="/login"])
    ~ .cte_text:has(> h2.bh) > h2.bh {
        background: #bc5377 !important;
        background-color: #bc5377 !important;
        color: #ffffff !important;
    }
}

/* ===== Loginbox, Eingabefelder und Button größer ===== */
@media screen and (max-width: 1400px) {

    /* Größere Loginbox */
    html body .mod_login:has(form[action^="/login"]) {
        width: calc(100% - 40px) !important;
        max-width: 900px !important;

        margin: 36px auto 46px !important;
        padding: 42px 44px 46px !important;
    }

    /* Überschrift größer */
    html body .mod_login:has(form[action^="/login"])::before {
        margin-bottom: 30px !important;
        font-size: 36px !important;
        line-height: 1.3 !important;
    }

    /* Mehr Abstand zwischen den Elementen */
    html body .mod_login form[action^="/login"] {
        gap: 20px !important;
    }

    /* Größere Eingabefelder */
    html body .mod_login form[action^="/login"] input.text {
        width: 100% !important;
        height: 80px !important;
        min-height: 80px !important;

        padding: 14px 24px !important;

        border-width: 2px !important;
        border-radius: 8px !important;

        font-size: 30px !important;
        line-height: 1.3 !important;
    }

    /* Größerer Loginbutton */
    html body .mod_login form[action^="/login"] input.submit {
        width: 100% !important;
        height: 80px !important;
        min-height: 80px !important;

        padding: 14px 24px !important;
        border-radius: 8px !important;

        background: #bc5377 !important;
        font-size: 31px !important;
        line-height: 1.3 !important;
    }

    /* Passwortlink größer */
    html body .mod_login form[action^="/login"] a.pwlink {
        margin-top: 8px !important;
        padding: 10px 14px !important;

        font-size: 26px !important;
        line-height: 1.4 !important;
    }
}

/* ===== Registrierung auf Loginseite vereinfachen ===== */
@media screen and (max-width: 1400px) {

    /* Bereich ohne zusätzliche Box */
    html body #main#main#main
    .mod_login:has(form[action^="/login"])
    ~ .cte_text:has(> h2.bh) {
        max-width: 900px !important;

        margin: 34px auto 46px !important;
        padding: 12px 44px 20px !important;

        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Nur fettgedruckter Text, kein Balken */
    html body #main#main#main
    .mod_login:has(form[action^="/login"])
    ~ .cte_text:has(> h2.bh) > h2.bh {
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;

        margin: 0 0 24px !important;
        padding: 0 !important;

        background: transparent !important;
        background-color: transparent !important;
        color: #86163e !important;

        font-size: 34px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    /* Registrierungsbutton größer */
    html body #main#main#main
    .mod_login:has(form[action^="/login"])
    ~ .cte_text:has(> h2.bh) p a {
        width: 100% !important;
        min-height: 80px !important;

        padding: 15px 24px !important;
        border-radius: 8px !important;

        background: #bc5377 !important;
        color: #ffffff !important;

        font-size: 34px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
    }
}

/* ===== Neu bei Sonalea: pinker Text ohne Balken ===== */
@media screen and (max-width: 1400px) {

    html body #main#main#main#main#main
    .mod_login:has(form[action^="/login"])
    ~ .cte_text:has(> h2.bh) > h2.bh {
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;

        margin: 0 0 24px !important;
        padding: 0 !important;

        border: 0 !important;
        background: none !important;
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;

        color: #bc5377 !important;
        font-size: 36px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }
}

/* ==================================================
   MOBILE KUNDENANMELDUNG
   ================================================== */

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

    /* Überschrift „Neukunde werden“ */
    html body #main#main:has(form#reg) h2.bh {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 68px !important;
        margin: 0 0 26px !important;
        padding: 12px 20px !important;

        background: #c9909f !important;
        color: #ffffff !important;

        font-size: 34px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* Gesamtes Registrierungsformular */
    html body #main#main form#reg {
        display: block !important;
        width: calc(100% - 40px) !important;
        max-width: 900px !important;

        margin: 0 auto 40px !important;
        padding: 34px 40px 42px !important;

        border: 1px solid #e7c4cf !important;
        border-radius: 10px !important;
        background: #fffafb !important;
        box-shadow: 0 4px 14px rgba(134, 22, 62, 0.08) !important;

        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Jede Formularzeile */
    html body #main#main form#reg > .row:not(.check) {
        display: block !important;
        width: 100% !important;
        height: auto !important;

        margin: 0 0 24px !important;
        padding: 0 !important;

        float: none !important;
        clear: both !important;
        box-sizing: border-box !important;
    }

    /* Feldbeschriftungen */
    html body #main#main form#reg > .row:not(.check) > label {
        display: block !important;
        width: 100% !important;

        margin: 0 0 9px !important;
        padding: 0 !important;

        color: #68424f !important;
        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 25px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        text-align: left !important;
    }

    /* Pflichtfeldstern */
    html body #main#main form#reg .asterisk {
        color: #bc5377 !important;
        font-size: inherit !important;
        font-weight: 700 !important;
    }

    /* Texteingaben, Passwörter und Auswahlfelder */
    html body #main#main form#reg input.text,
    html body #main#main form#reg select.select {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: 70px !important;
        min-height: 70px !important;

        margin: 0 !important;
        padding: 12px 18px !important;

        border: 2px solid #dfbdc8 !important;
        border-radius: 7px !important;
        background: #ffffff !important;

        color: #68424f !important;
        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 26px !important;
        font-weight: 400 !important;
        line-height: 1.3 !important;

        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    html body #main#main form#reg input.text:focus,
    html body #main#main form#reg select.select:focus {
        border-color: #c9909f !important;
        outline: 3px solid rgba(201, 144, 159, 0.18) !important;
    }

    /* Passwortcontainer */
    html body #main#main form#reg .pw_input {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    html body #main#main form#reg .pw_input input.text {
        padding-right: 70px !important;
    }

    /* Auge zum Ein-/Ausblenden des Passworts */
    html body #main#main form#reg .pw_toggle {
        position: absolute !important;
        z-index: 5 !important;
        top: 50% !important;
        right: 20px !important;

        display: block !important;
        width: 34px !important;
        height: 34px !important;

        transform: translateY(-50%) !important;
        cursor: pointer !important;
    }

    /* Telefonnummer: Landesvorwahl und Rufnummer */
    html body #main#main form#reg .ctrl_phone > .phone {
        display: grid !important;
        grid-template-columns: 210px minmax(0, 1fr) !important;
        gap: 14px !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body #main#main form#reg .ctrl_phone select,
    html body #main#main form#reg .ctrl_phone input {
        width: 100% !important;
        height: 70px !important;
        min-height: 70px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Hilfetexte */
    html body #main#main form#reg .help {
        display: block !important;
        width: 100% !important;

        margin: 8px 0 0 !important;
        padding: 0 !important;
    }

    html body #main#main form#reg .help p {
        margin: 0 !important;
        padding: 0 !important;

        color: #8a6871 !important;
        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 20px !important;
        font-weight: 400 !important;
        line-height: 1.4 !important;
        text-align: left !important;
    }

    /* Checkboxzeilen */
    html body #main#main form#reg > .row.check {
        display: grid !important;
        grid-template-columns: 38px minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 14px !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 0 20px !important;
        padding: 0 !important;

        float: none !important;
        clear: both !important;
        box-sizing: border-box !important;
    }

    /* Große Checkboxen */
    html body #main#main form#reg > .row.check > input[type="checkbox"] {
        display: block !important;
        width: 30px !important;
        height: 30px !important;

        margin: 3px 0 0 !important;
        padding: 0 !important;

        accent-color: #bc5377 !important;
        cursor: pointer !important;
    }

    /* Checkboxtexte */
    html body #main#main form#reg > .row.check > label {
        display: block !important;
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #68424f !important;
        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 22px !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
        text-align: left !important;
    }

    html body #main#main form#reg > .row.check > label a {
        color: #bc5377 !important;
        font-size: inherit !important;
        font-weight: 700 !important;
        text-decoration: underline !important;
    }

    /* Widerrufsformular */
    html body #main#main form#reg .retraction {
        display: block !important;
        width: 100% !important;

        margin: 24px 0 !important;
        padding: 18px 20px !important;

        border-radius: 7px !important;
        background: #efdbe1 !important;

        color: #68424f !important;
        font-size: 22px !important;
        line-height: 1.5 !important;
        box-sizing: border-box !important;
    }

    html body #main#main form#reg .retraction br {
        display: none !important;
    }

    html body #main#main form#reg .retraction a {
        color: #86163e !important;
        font-size: inherit !important;
        font-weight: 700 !important;
        text-decoration: underline !important;
    }

    /* Pflichtfelderhinweis */
    html body #main#main form#reg > p {
        color: #68424f !important;
        font-size: 21px !important;
        line-height: 1.4 !important;
    }

    /* Registrierungsbutton */
    html body #main#main form#reg > input.submit {
        display: block !important;
        width: 100% !important;
        height: 80px !important;
        min-height: 80px !important;

        margin: 30px 0 0 !important;
        padding: 14px 24px !important;

        border: 0 !important;
        border-radius: 8px !important;
        background: #bc5377 !important;

        color: #ffffff !important;
        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 31px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: center !important;

        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    html body #main#main form#reg > input.submit:hover,
    html body #main#main form#reg > input.submit:focus {
        background: #a63f63 !important;
    }

    /* Bild unter dem Formular responsiv */
    html body #main#main:has(form#reg) .cte_text img {
        display: block !important;
        width: calc(100% - 40px) !important;
        max-width: 900px !important;
        height: auto !important;

        margin: 30px auto !important;
    }
}

/* ===== Hilfehinweise im Registrierungsformular korrigieren ===== */
@media screen and (max-width: 1400px) {

    html body #main#main#main form#reg .help {
        position: static !important;
        display: block !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 8px 0 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;

        overflow: visible !important;
        transform: none !important;
    }

    /* Alte Fragezeichen und Hilfesymbole entfernen */
    html body #main#main#main form#reg .help::before,
    html body #main#main#main form#reg .help::after {
        content: none !important;
        display: none !important;
        background: none !important;
    }

    /* Hilfetext normal anzeigen */
    html body #main#main#main form#reg .help p {
        position: static !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        background: transparent !important;
        color: #8a6871 !important;

        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 20px !important;
        font-weight: 400 !important;
        line-height: 1.4 !important;
        text-align: left !important;

        white-space: normal !important;
        overflow: visible !important;
        transform: none !important;
    }
}

/* ==================================================
   NEUKUNDENBILD OBERHALB DES REGISTRIERUNGSFORMULARS
   ================================================== */

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

    /* Inhaltsbereich der Registrierungsseite sortierbar machen */
    html body #main#main > .inside:has(form#reg) {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* Eventuelle Modulhülle des Formulars auflösen */
    html body #main#main > .inside:has(form#reg)
    > *:has(> form#reg) {
        display: contents !important;
    }

    /* Überschrift zuerst */
    html body #main#main > .inside:has(form#reg) h2.bh {
        order: 1 !important;
    }

    /* Neukundenbild an zweiter Stelle */
    html body #main#main > .inside:has(form#reg)
    .cte_text:has(img[src*="Neukunde-PopUp"]) {
        order: 2 !important;

        display: block !important;
        width: calc(100% - 40px) !important;
        max-width: 900px !important;

        margin: 0 auto 30px !important;
        padding: 0 !important;

        background: transparent !important;
        box-sizing: border-box !important;
    }

    /* Absatz um das Bild zurücksetzen */
    html body #main#main > .inside:has(form#reg)
    .cte_text:has(img[src*="Neukunde-PopUp"]) > p {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    /* Bild groß und vollständig anzeigen */
    html body #main#main > .inside:has(form#reg)
    img[src*="Neukunde-PopUp"] {
        display: block !important;
        width: 100% !important;
        max-width: 900px !important;
        height: auto !important;

        margin: 0 auto !important;
        padding: 0 !important;

        border-radius: 9px !important;
        box-sizing: border-box !important;
    }

    /* Formular nach dem Bild */
    html body #main#main > .inside:has(form#reg) form#reg {
        order: 3 !important;
    }

    /* Weitere Inhalte anschließend */
    html body #main#main > .inside:has(form#reg) > * {
        order: 10;
    }

    /* Reihenfolge für Bild und Formular erneut absichern */
    html body #main#main > .inside:has(form#reg)
    .cte_text:has(img[src*="Neukunde-PopUp"]) {
        order: 2 !important;
    }

    html body #main#main > .inside:has(form#reg) form#reg {
        order: 3 !important;
    }
}

/* ===== Abstand über „Neukunde werden“ ===== */
@media screen and (max-width: 1400px) {

    html body #main#main#main#main
    > .inside:has(form#reg) h2.bh {
        position: relative !important;
        z-index: 2 !important;

        width: 100% !important;
        margin-top: 45px !important;
        margin-bottom: 22px !important;
    }
}

/* ===== Balken „Neukunde werden“ vollständig sichtbar ===== */
@media screen and (max-width: 1400px) {

    html body:has(form#reg) #main#main#main .bh {
        position: relative !important;
        z-index: 5 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 68px !important;

        margin-top: 38px !important;
        margin-bottom: 24px !important;
        padding: 12px 20px !important;

        font-size: 34px !important;
        line-height: 1.3 !important;
        text-align: center !important;

        box-sizing: border-box !important;
        overflow: visible !important;
    }
}

/* ===== Dropdown-Schrift im Registrierungsformular kleiner ===== */
@media screen and (max-width: 1400px) {

    html body #main#main#main form#reg select.select,
    html body #main#main#main form#reg select.select option {
        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 22px !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;
    }

    /* Falls das System „Chosen“ für Dropdowns verwendet */
    html body #main#main#main form#reg .chosen-container,
    html body #main#main#main form#reg .chosen-container *,
    html body #main#main#main form#reg .chosen-results li {
        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 22px !important;
        font-weight: 400 !important;
        line-height: 1.4 !important;
    }
}

/* ==================================================
   MOBILE BERATERARTIKEL
   ================================================== */

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

    /* Seite über das eindeutige Artikelbanner erkennen */
    html body:has(img[src*="BCB37D36"]) #main#main {
        width: 100% !important;
        max-width: none !important;
    }

    /* Leere rosa Punktbalken entfernen */
    html body:has(img[src*="BCB37D36"]) #main#main h5.bh {
        display: none !important;
    }

    /* Oberer Bannerbereich */
    html body:has(img[src*="BCB37D36"]) #main#main
    .cte_text:has(img[src*="BCB37D36"]) {
        display: block !important;
        width: calc(100% - 40px) !important;
        max-width: 920px !important;

        margin: 30px auto 34px !important;
        padding: 0 !important;

        background: transparent !important;
        box-sizing: border-box !important;
    }

    html body:has(img[src*="BCB37D36"]) #main#main
    .cte_text:has(img[src*="BCB37D36"]) p {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Artikelbanner groß anzeigen */
    html body:has(img[src*="BCB37D36"]) #main#main
    img[src*="BCB37D36"] {
        display: block !important;
        width: 100% !important;
        max-width: 920px !important;
        height: auto !important;

        margin: 0 auto !important;
        border-radius: 8px !important;
    }

    /* Tabellen der Artikelübersicht */
    html body:has(img[src*="BCB37D36"]) #main#main table {
        width: calc(100% - 40px) !important;
        max-width: 920px !important;
        height: auto !important;

        margin: 0 auto 28px !important;
        border-collapse: separate !important;
        border-spacing: 16px !important;
        table-layout: fixed !important;

        box-sizing: border-box !important;
    }

    html body:has(img[src*="BCB37D36"]) #main#main tbody,
    html body:has(img[src*="BCB37D36"]) #main#main tr {
        width: 100% !important;
        height: auto !important;
    }

    /* Einzelne Tabellenzellen */
    html body:has(img[src*="BCB37D36"]) #main#main td {
        width: 50% !important;
        height: auto !important;

        padding: 20px 18px !important;

        border: 1px solid #e7c4cf !important;
        border-radius: 9px !important;
        background: #fffafb !important;

        text-align: center !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
    }

    /* Artikelüberschriften */
    html body:has(img[src*="BCB37D36"]) #main#main td h2 {
        margin: 8px 0 14px !important;
        padding: 0 !important;

        color: #86163e !important;
        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 30px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    /* Vorschautexte und Autoren */
    html body:has(img[src*="BCB37D36"]) #main#main td p,
    html body:has(img[src*="BCB37D36"]) #main#main td span:not(.frame),
    html body:has(img[src*="BCB37D36"]) #main#main td em {
        color: #68424f !important;
        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 23px !important;
        line-height: 1.45 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    html body:has(img[src*="BCB37D36"]) #main#main td em {
        display: block !important;
        margin-top: 12px !important;
        color: #8a6871 !important;
        font-size: 21px !important;
    }

    /* Artikelbilder */
    html body:has(img[src*="BCB37D36"]) #main#main td img {
        display: block !important;
        width: 100% !important;
        max-width: 270px !important;
        height: auto !important;

        margin: 12px auto !important;
        border-radius: 8px !important;
    }

    /* „Neu!“-Kennzeichnung */
    html body:has(img[src*="BCB37D36"]) #main#main .frame {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-height: 48px !important;
        padding: 8px 22px !important;

        border-radius: 6px !important;
        background: #73a241 !important;
        color: #ffffff !important;

        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 23px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    /* Verlinkte Artikel */
    html body:has(img[src*="BCB37D36"]) #main#main td a {
        color: #86163e !important;
        text-decoration: none !important;
    }
}

/* ===== Deutlicher Link zu den einzelnen Artikeln ===== */
@media screen and (max-width: 1400px) {

    html body:has(img[src*="BCB37D36"]) #main#main
    td a:has(> img) {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        width: 100% !important;
        margin: 0 !important;

        color: #ffffff !important;
        text-decoration: none !important;
    }

    /* Automatischer Button unter jedem verlinkten Bild */
    html body:has(img[src*="BCB37D36"]) #main#main
    td a:has(> img)::after {
        content: "Artikel lesen" !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: 270px !important;
        min-height: 58px !important;

        margin: 10px auto 0 !important;
        padding: 10px 16px !important;

        border-radius: 7px !important;
        background: #bc5377 !important;
        color: #ffffff !important;

        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 24px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        text-align: center !important;

        box-sizing: border-box !important;
    }
}


/* ==================================================
   PASSWORT VERGESSEN – MOBILE GESAMTFASSUNG
   ================================================== */

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

    /* Gesamte Box */
    html body #main#main .mod_passreset {
        display: block !important;
        width: calc(100% - 40px) !important;
        max-width: 900px !important;

        margin: 40px auto 50px !important;
        padding: 42px 44px 46px !important;

        border: 1px solid #e7c4cf !important;
        border-radius: 10px !important;
        background: #fffafb !important;
        box-shadow: 0 4px 14px rgba(134, 22, 62, 0.09) !important;

        box-sizing: border-box !important;
    }

    /* Überschrift */
    html body #main#main .mod_passreset > h1.bh {
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;

        margin: 0 0 22px !important;
        padding: 0 !important;

        border: 0 !important;
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;

        color: #bc5377 !important;
        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 36px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    /* Erklärung */
    html body #main#main .mod_passreset .formbody::before {
        content: "Bitte wählen Sie Ihren Zugang und geben Sie Ihre E-Mail-Adresse ein." !important;

        display: block !important;
        width: 100% !important;

        margin: 0 0 28px !important;
        padding: 0 !important;

        color: #68424f !important;
        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 25px !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }

    /* Formular */
    html body #main#main .mod_passreset form,
    html body #main#main .mod_passreset .formbody {
        display: block !important;
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    html body #main#main .mod_passreset .row {
        display: block !important;
        width: 100% !important;
        height: auto !important;

        margin: 0 0 20px !important;
        padding: 0 !important;

        float: none !important;
        clear: both !important;
    }

    html body #main#main .mod_passreset .row br {
        display: none !important;
    }

    /* Auswahlfeld und E-Mail */
    html body #main#main .mod_passreset select.select,
    html body #main#main .mod_passreset input.text {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: 78px !important;
        min-height: 78px !important;

        margin: 0 !important;
        padding: 14px 22px !important;

        border: 2px solid #dfbdc8 !important;
        border-radius: 8px !important;
        background: #ffffff !important;

        color: #68424f !important;
        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 28px !important;
        font-weight: 400 !important;
        line-height: 1.3 !important;

        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    /* Dropdown-Auswahl nicht übergroß */
    html body #main#main .mod_passreset select.select option {
        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 22px !important;
        font-weight: 400 !important;
    }

    html body #main#main .mod_passreset select.select:focus,
    html body #main#main .mod_passreset input.text:focus {
        border-color: #c9909f !important;
        outline: 3px solid rgba(201, 144, 159, 0.18) !important;
    }

    /* Unsichtbare Sicherheitszeile erzeugt keinen Abstand */
    html body #main#main .mod_passreset
    .row:has(input[name="website"]) {
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    /* Buttoncontainer */
    html body #main#main .mod_passreset .submit_container {
        display: block !important;
        width: 100% !important;

        margin: 8px 0 0 !important;
        padding: 0 !important;
    }

    /* Button */
    html body #main#main .mod_passreset input.submit {
        display: block !important;
        width: 100% !important;
        height: 82px !important;
        min-height: 82px !important;

        margin: 0 !important;
        padding: 15px 22px !important;

        border: 0 !important;
        border-radius: 8px !important;
        background: #bc5377 !important;

        color: #ffffff !important;
        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 29px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: center !important;

        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    html body #main#main .mod_passreset input.submit:hover,
    html body #main#main .mod_passreset input.submit:focus {
        background: #a63f63 !important;
    }
}

/* ==================================================
   MOBILE GÄSTEBUCH – KOMPLETTER ERSATZ
   ================================================== */

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

    /* ==================================================
       1. KUNDENSTIMMEN UND ERFAHRUNGEN
       ================================================== */

    html body #main#main
    .cte_text:has(> h2.bh):has(> p span u) {
        display: block !important;
        width: calc(100% - 40px) !important;
        max-width: 920px !important;
        height: auto !important;
        margin: 30px auto 44px !important;
        padding: 0 32px 40px !important;

        border: 1px solid #e7c4cf !important;
        border-radius: 9px !important;
        background: #ffffff !important;

        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Überschrift */
    html body #main#main
    .cte_text:has(> h2.bh):has(> p span u)
    > h2.bh {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: calc(100% + 64px) !important;
        min-height: 70px !important;
        margin: 0 -32px 30px !important;
        padding: 13px 22px !important;

        background: #c9909f !important;
        color: #ffffff !important;

        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 34px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: center !important;

        box-sizing: border-box !important;
    }

    /* Texte */
    html body #main#main
    .cte_text:has(> h2.bh):has(> p span u)
    > p,
    html body #main#main
    .cte_text:has(> h2.bh):has(> p span u)
    > p span,
    html body #main#main
    .cte_text:has(> h2.bh):has(> p span u)
    > p strong,
    html body #main#main
    .cte_text:has(> h2.bh):has(> p span u)
    > p em {
        color: #68424f !important;
        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 26px !important;
        font-weight: 400 !important;
        line-height: 1.6 !important;
    }

    html body #main#main
    .cte_text:has(> h2.bh):has(> p span u)
    > p {
        display: block !important;
        width: 100% !important;
        margin: 0 0 18px !important;
        padding: 0 !important;

        text-align: left !important;
        white-space: normal !important;
        overflow: visible !important;
        overflow-wrap: anywhere !important;
    }

    /* Kundin/Kunde schrieb */
    html body #main#main
    .cte_text:has(> h2.bh):has(> p span u)
    > p:has(u) {
        margin: 32px 0 18px !important;
        padding: 16px 20px !important;

        border-left: 6px solid #bc5377 !important;
        border-radius: 6px !important;
        background: #efdbe1 !important;

        color: #86163e !important;
        font-size: 27px !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;

        box-sizing: border-box !important;
    }

    html body #main#main
    .cte_text:has(> h2.bh):has(> p span u)
    > p:has(u) * {
        color: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
        text-decoration: none !important;
    }

    /* Erster Eintrag ohne großen oberen Abstand */
    html body #main#main
    .cte_text:has(> h2.bh):has(> p span u)
    > h2.bh + p {
        margin-top: 0 !important;
    }

    html body #main#main
    .cte_text:has(> h2.bh):has(> p span u)
    > .clear {
        display: none !important;
    }


    /* ==================================================
       2. WEITERE FEEDBACKS UNSERER KUNDEN
       ================================================== */

    html body #main#main
    .cte_text:has(
        > h2.bh + p > span[style*="text-decoration: underline"]
    ) {
        display: block !important;
        width: calc(100% - 40px) !important;
        max-width: 920px !important;
        height: auto !important;
        margin: 32px auto 46px !important;
        padding: 0 32px 40px !important;

        border: 1px solid #e7c4cf !important;
        border-radius: 9px !important;
        background: #ffffff !important;

        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Überschrift */
    html body #main#main
    .cte_text:has(
        > h2.bh + p > span[style*="text-decoration: underline"]
    ) > h2.bh {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: calc(100% + 64px) !important;
        min-height: 72px !important;
        margin: 0 -32px 30px !important;
        padding: 13px 22px !important;

        background: #c9909f !important;
        color: #ffffff !important;

        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 34px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: center !important;

        box-sizing: border-box !important;
    }

    /* Gesamter Feedbacktext */
    html body #main#main
    .cte_text:has(
        > h2.bh + p > span[style*="text-decoration: underline"]
    ) > p,
    html body #main#main
    .cte_text:has(
        > h2.bh + p > span[style*="text-decoration: underline"]
    ) > p span,
    html body #main#main
    .cte_text:has(
        > h2.bh + p > span[style*="text-decoration: underline"]
    ) > p strong,
    html body #main#main
    .cte_text:has(
        > h2.bh + p > span[style*="text-decoration: underline"]
    ) > p em {
        color: #68424f !important;
        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 28px !important;
        font-weight: 400 !important;
        line-height: 1.6 !important;
    }

    html body #main#main
    .cte_text:has(
        > h2.bh + p > span[style*="text-decoration: underline"]
    ) > p {
        display: block !important;
        width: 100% !important;
        margin: 0 0 20px !important;
        padding: 0 !important;

        text-align: left !important;
        white-space: normal !important;
        overflow: visible !important;
        overflow-wrap: anywhere !important;
    }

    /* Kundin/Kunde schrieb */
    html body #main#main
    .cte_text:has(
        > h2.bh + p > span[style*="text-decoration: underline"]
    ) > p:has(
        span[style*="text-decoration: underline"]
    ) {
        margin: 34px 0 18px !important;
        padding: 16px 20px !important;

        border-left: 6px solid #bc5377 !important;
        border-radius: 6px !important;
        background: #efdbe1 !important;

        color: #86163e !important;
        font-size: 28px !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;

        box-sizing: border-box !important;
    }

    html body #main#main
    .cte_text:has(
        > h2.bh + p > span[style*="text-decoration: underline"]
    ) > p:has(
        span[style*="text-decoration: underline"]
    ) * {
        color: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
        text-decoration: none !important;
    }

    /* Erster Eintrag */
    html body #main#main
    .cte_text:has(
        > h2.bh + p > span[style*="text-decoration: underline"]
    ) > h2.bh + p {
        margin-top: 0 !important;
    }

    html body #main#main
    .cte_text:has(
        > h2.bh + p > span[style*="text-decoration: underline"]
    ) > .clear {
        display: none !important;
    }


    /* ==================================================
       3. FEEDBACK SCHREIBEN
       ================================================== */

    html body #main#main
    .cte_text:has(> h2.bh):has(a[href="gaestebuch"]) {
        display: block !important;
        width: calc(100% - 40px) !important;
        max-width: 920px !important;
        margin: 34px auto 46px !important;
        padding: 0 34px 36px !important;

        border: 1px solid #e7c4cf !important;
        border-radius: 9px !important;
        background: #fffafb !important;
        box-shadow: 0 4px 14px rgba(134, 22, 62, 0.08) !important;

        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html body #main#main
    .cte_text:has(> h2.bh):has(a[href="gaestebuch"])
    > h2.bh {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: calc(100% + 68px) !important;
        min-height: 68px !important;
        margin: 0 -34px 28px !important;
        padding: 12px 22px !important;

        background: #c9909f !important;
        color: #ffffff !important;

        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 33px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: center !important;

        box-sizing: border-box !important;
    }

    html body #main#main
    .cte_text:has(> h2.bh):has(a[href="gaestebuch"])
    > p {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 22px !important;

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

        color: #68424f !important;
        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 26px !important;
        font-weight: 600 !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }

    html body #main#main
    .cte_text:has(> h2.bh):has(a[href="gaestebuch"])
    > p > span {
        color: inherit !important;
        font-family: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
    }

    /* Mein-Feedback-Button */
    html body #main#main
    .cte_text:has(> h2.bh):has(a[href="gaestebuch"])
    a[href="gaestebuch"] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 76px !important;
        margin: 0 !important;
        padding: 14px 22px !important;

        border-radius: 8px !important;
        background: #bc5377 !important;
        color: #ffffff !important;

        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 29px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: center !important;
        text-decoration: none !important;

        box-sizing: border-box !important;
    }

    html body #main#main
    .cte_text:has(> h2.bh):has(a[href="gaestebuch"])
    a[href="gaestebuch"] span,
    html body #main#main
    .cte_text:has(> h2.bh):has(a[href="gaestebuch"])
    a[href="gaestebuch"] strong {
        color: inherit !important;
        background: transparent !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
    }

    html body #main#main
    .cte_text:has(> h2.bh):has(a[href="gaestebuch"])
    > .clear {
        display: none !important;
    }


    /* ==================================================
       4. OBERES GÄSTEBUCHBILD
       ================================================== */

    html body #main#main .cte_text img {
        display: block !important;
        width: calc(100% - 40px) !important;
        max-width: 920px !important;
        height: auto !important;
        margin: 24px auto 32px !important;
        border-radius: 8px !important;
    }
}

/* ==================================================
   MOBILE – FEEDBACKS UNSERER BERATER
   ================================================== */

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

    /* Gesamten Berater-Feedbackblock erkennen */
    html body #main#main
    .cte_text:has(
        > h2.bh + p + p span strong
        span[style*="text-decoration: underline"]
    ) {
        display: block !important;
        width: calc(100% - 40px) !important;
        max-width: 920px !important;
        height: auto !important;

        margin: 32px auto 46px !important;
        padding: 0 32px 42px !important;

        border: 1px solid #e7c4cf !important;
        border-radius: 9px !important;
        background: #ffffff !important;
        box-shadow: 0 4px 14px rgba(134, 22, 62, 0.07) !important;

        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Hauptüberschrift */
    html body #main#main
    .cte_text:has(
        > h2.bh + p + p span strong
        span[style*="text-decoration: underline"]
    ) > h2.bh {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: calc(100% + 64px) !important;
        min-height: 76px !important;

        margin: 0 -32px 28px !important;
        padding: 14px 22px !important;

        background: #c9909f !important;
        color: #ffffff !important;

        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 34px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: center !important;

        box-sizing: border-box !important;
    }

    /* Alle normalen Absätze */
    html body #main#main
    .cte_text:has(
        > h2.bh + p + p span strong
        span[style*="text-decoration: underline"]
    ) > p {
        display: block !important;
        width: 100% !important;
        height: auto !important;

        margin: 0 0 20px !important;
        padding: 0 !important;

        color: #68424f !important;
        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 27px !important;
        font-weight: 400 !important;
        line-height: 1.65 !important;
        text-align: left !important;

        white-space: normal !important;
        overflow: visible !important;
        overflow-wrap: anywhere !important;

        box-sizing: border-box !important;
    }

    /* Sämtliche fest eingetragenen 16px überschreiben */
    html body #main#main
    .cte_text:has(
        > h2.bh + p + p span strong
        span[style*="text-decoration: underline"]
    ) > p span,
    html body #main#main
    .cte_text:has(
        > h2.bh + p + p span strong
        span[style*="text-decoration: underline"]
    ) > p strong,
    html body #main#main
    .cte_text:has(
        > h2.bh + p + p span strong
        span[style*="text-decoration: underline"]
    ) > p em {
        font-family: inherit !important;
        font-size: inherit !important;
        line-height: inherit !important;
    }

    /* Überschrift eines neuen Berater-Feedbacks */
    html body #main#main
    .cte_text:has(
        > h2.bh + p + p span strong
        span[style*="text-decoration: underline"]
    ) > p:has(
        span[style*="text-decoration: underline"]
    ) {
        margin: 38px 0 20px !important;
        padding: 17px 20px !important;

        border-left: 6px solid #bc5377 !important;
        border-radius: 6px !important;
        background: #efdbe1 !important;

        color: #86163e !important;
        font-size: 28px !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;

        box-sizing: border-box !important;
    }

    /* Inhalt der Zwischenüberschrift */
    html body #main#main
    .cte_text:has(
        > h2.bh + p + p span strong
        span[style*="text-decoration: underline"]
    ) > p:has(
        span[style*="text-decoration: underline"]
    ) span,
    html body #main#main
    .cte_text:has(
        > h2.bh + p + p span strong
        span[style*="text-decoration: underline"]
    ) > p:has(
        span[style*="text-decoration: underline"]
    ) strong {
        color: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
        text-decoration: none !important;
    }

    /* Unterstreichungen grundsätzlich entfernen */
    html body #main#main
    .cte_text:has(
        > h2.bh + p + p span strong
        span[style*="text-decoration: underline"]
    ) span[style*="text-decoration: underline"] {
        text-decoration: none !important;
    }

    /* Antworten von Sonalea hervorheben */
    html body #main#main
    .cte_text:has(
        > h2.bh + p + p span strong
        span[style*="text-decoration: underline"]
    ) > p:has(em strong) {
        margin: 22px 0 34px !important;
        padding: 18px 20px !important;

        border-radius: 7px !important;
        background: #fff4f7 !important;

        color: #86163e !important;
        font-size: 26px !important;
        font-weight: 600 !important;
        line-height: 1.55 !important;

        box-sizing: border-box !important;
    }

    html body #main#main
    .cte_text:has(
        > h2.bh + p + p span strong
        span[style*="text-decoration: underline"]
    ) > p:has(em strong) * {
        font-size: inherit !important;
        line-height: inherit !important;
    }

    /* Technisches Clear-Element entfernen */
    html body #main#main
    .cte_text:has(
        > h2.bh + p + p span strong
        span[style*="text-decoration: underline"]
    ) > .clear {
        display: none !important;
    }
}

/* ==================================================
   MOBILE – GLÜCKSBOTEN-FEEDBACKS
   ================================================== */

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

    /* Gesamter Glücksbotenblock */
    html body #main#main
    .cte_text:has(> h3.bh):has(
        > p span[style*="font-size: 16px"]
    ) {
        display: block !important;
        width: calc(100% - 40px) !important;
        max-width: 920px !important;
        height: auto !important;

        margin: 32px auto 46px !important;
        padding: 0 30px 38px !important;

        border: 1px solid #e7c4cf !important;
        border-radius: 9px !important;
        background: #ffffff !important;
        box-shadow: 0 4px 14px rgba(134, 22, 62, 0.07) !important;

        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Überschrift */
    html body #main#main
    .cte_text:has(> h3.bh):has(
        > p span[style*="font-size: 16px"]
    ) > h3.bh {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: calc(100% + 60px) !important;
        min-height: 78px !important;

        margin: 0 -30px 28px !important;
        padding: 14px 20px !important;

        background: #c9909f !important;
        color: #ffffff !important;

        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 32px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        text-align: center !important;

        box-sizing: border-box !important;
    }

    /* Jede einzelne Kundenstimme */
    html body #main#main
    .cte_text:has(> h3.bh):has(
        > p span[style*="font-size: 16px"]
    ) > p {
        display: block !important;
        width: 100% !important;
        height: auto !important;

        margin: 0 0 18px !important;
        padding: 18px 20px !important;

        border-left: 5px solid #d895aa !important;
        border-radius: 7px !important;
        background: #fff7f9 !important;

        color: #68424f !important;
        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 27px !important;
        font-weight: 400 !important;
        line-height: 1.55 !important;
        text-align: left !important;

        white-space: normal !important;
        overflow: visible !important;
        overflow-wrap: anywhere !important;

        box-sizing: border-box !important;
    }

    /* Fest eingetragene 16px überschreiben */
    html body #main#main
    .cte_text:has(> h3.bh):has(
        > p span[style*="font-size: 16px"]
    ) > p span,
    html body #main#main
    .cte_text:has(> h3.bh):has(
        > p span[style*="font-size: 16px"]
    ) > p strong,
    html body #main#main
    .cte_text:has(> h3.bh):has(
        > p span[style*="font-size: 16px"]
    ) > p em {
        color: inherit !important;
        font-family: inherit !important;
        font-size: inherit !important;
        line-height: inherit !important;
    }

    /* Abwechselnd leicht unterschiedliche Hintergründe */
    html body #main#main
    .cte_text:has(> h3.bh):has(
        > p span[style*="font-size: 16px"]
    ) > p:nth-of-type(even) {
        background: #fdf1f4 !important;
    }

    /* Leere Absätze ohne Rahmen */
    html body #main#main
    .cte_text:has(> h3.bh):has(
        > p span[style*="font-size: 16px"]
    ) > p:not(:has(span)) {
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        background: transparent !important;
    }

    /* Technisches Clear-Element entfernen */
    html body #main#main
    .cte_text:has(> h3.bh):has(
        > p span[style*="font-size: 16px"]
    ) > .clear {
        display: none !important;
    }
}


/* ==================================================
   MOBILE – ALLE EINZELNEN BERATERARTIKEL
   ================================================== */

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

    /* Hauptüberschrift der Artikel */
    html body #main#main
    .cte_text.block > h2.bh {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 76px !important;
        margin: 0 0 30px !important;
        padding: 14px 22px !important;

        background: #c9909f !important;
        color: #ffffff !important;

        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 34px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: center !important;

        box-sizing: border-box !important;
    }

    /* Alle Absätze nach der Artikelüberschrift */
    html body #main#main
    .cte_text.block > h2.bh ~ p {
        display: block !important;
        width: 100% !important;
        height: auto !important;

        margin: 0 0 22px !important;
        padding: 0 28px !important;

        color: #68424f !important;
        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 28px !important;
        font-weight: 400 !important;
        line-height: 1.65 !important;
        text-align: left !important;

        white-space: normal !important;
        overflow: visible !important;
        overflow-wrap: anywhere !important;

        box-sizing: border-box !important;
    }

    /* Fest im HTML eingetragene 16px überschreiben */
    html body #main#main
    .cte_text.block > h2.bh ~ p span,
    html body #main#main
    .cte_text.block > h2.bh ~ p strong,
    html body #main#main
    .cte_text.block > h2.bh ~ p em {
        color: inherit !important;
        font-family: inherit !important;
        font-size: 28px !important;
        line-height: inherit !important;
    }

    /* Die ersten beiden Einleitungszeilen */
    html body #main#main
    .cte_text.block > h2.bh + p,
    html body #main#main
    .cte_text.block > h2.bh + p + p {
        color: #86163e !important;
        font-size: 30px !important;
        font-weight: 700 !important;
        line-height: 1.45 !important;
        text-align: center !important;
    }

    html body #main#main
    .cte_text.block > h2.bh + p *,
    html body #main#main
    .cte_text.block > h2.bh + p + p * {
        color: inherit !important;
        font-size: 30px !important;
        font-weight: inherit !important;
        line-height: inherit !important;
    }

    /* Bilder in Artikeln */
    html body #main#main
    .cte_text.block > h2.bh ~ p img {
        display: block !important;
        width: 100% !important;
        max-width: 760px !important;
        height: auto !important;

        margin: 26px auto 32px !important;
        border-radius: 8px !important;
    }

    html body #main#main
    .cte_text.block > .clear {
        display: none !important;
    }
}

/* ==================================================
   BERATERFILTER – SUCHE UNTER ALLEN FILTERN
   ================================================== */

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

    #main #tabnav ul.tabnav {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 12px !important;

        box-sizing: border-box !important;
    }

    #main #tabnav ul.tabnav > li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    /* Alle Berater – volle Breite oben */
    #main #tabnav ul.tabnav > li:first-child {
        grid-column: 1 / -1 !important;
    }

    /* Beratersuche – volle Breite unten */
    #main #tabnav ul.tabnav > li.last {
        grid-column: 1 / -1 !important;
        order: 10 !important;
        position: relative !important;

        display: flex !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* Filterbuttons */
    #main #tabnav ul.tabnav > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 62px !important;
        padding: 10px 12px !important;

        box-sizing: border-box !important;
    }

    /* Suchfeld */
    #main #tabnav li.last input.search {
        display: block !important;
        width: 100% !important;
        height: 66px !important;

        margin: 0 !important;
        padding: 10px 70px 10px 18px !important;

        font-size: 25px !important;
        font-weight: 400 !important;
        text-align: center !important;

        box-sizing: border-box !important;
    }

    /* Suchbutton/Lupe */
    #main #tabnav li.last input.go {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;

        display: block !important;
        width: 66px !important;
        height: 66px !important;

        margin: 0 !important;
        padding: 0 !important;

        cursor: pointer !important;
        z-index: 3 !important;
    }
}

/* ===== Spricht – Rückruf: Pink ===== */

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

    html body #main#main#main
    a.button.click2call.busy,

    html body #main#main#main
    a.button.busy {
        background: #d65c8f !important;
        background-color: #d65c8f !important;
        background-image: none !important;
        border-color: #d65c8f !important;
        color: #ffffff !important;
    }
}


/* ==================================================
   SEITENNAVIGATION – GRÖSSERE SCHRIFT
   ================================================== */

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

    #main .pagination.mod_paginator {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 14px !important;

        width: 100% !important;
        margin: 28px 0 !important;
        padding: 16px 12px !important;

        box-sizing: border-box !important;
    }

    #main .pagination.mod_paginator ul {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    #main .pagination.mod_paginator li {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    /* Seitenzahlen und Pfeile */
    #main .pagination.mod_paginator li a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-width: 62px !important;
        height: 62px !important;
        padding: 8px 12px !important;

        border-radius: 7px !important;
        background: #efdbe1 !important;
        color: #86163e !important;

        font-size: 29px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        text-align: center !important;
        text-decoration: none !important;

        box-sizing: border-box !important;
    }

    /* Aktive Seite */
    #main .pagination.mod_paginator li.active a {
        background: #bc5377 !important;
        color: #ffffff !important;
    }

    /* Gesamtanzahl */
    #main .pagination.mod_paginator .total {
        display: block !important;
        width: 100% !important;
        margin-top: 8px !important;

        color: #68424f !important;
        font-size: 26px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }
}


/* ==================================================
   AKTIONSPREISE – TELEFON UND CHAT KORREKT DARSTELLEN
   ================================================== */

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

    /* Chat-Inhalte bleiben Teil des Buttonrasters */
    html body #main#main
    :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right > div.chat {
        display: contents !important;
    }

    /* ==================================================
       NORMALE PREISE OHNE AKTION
       ================================================== */

    /* Normaler Telefonpreis */
    html body #main#main
    :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right
    > small.tariff:not(.disable):not(.campaign) {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: center !important;

        display: flex !important;
        width: 100% !important;

        color: #a62958 !important;
        font-size: 25px !important;
        font-weight: 700 !important;
        text-align: center !important;
    }

    /* Normaler Chatpreis */
    html body #main#main
    :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right > div.chat
    > small.tariff:not(.disable):not(.campaign) {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: center !important;

        display: flex !important;
        width: 100% !important;

        color: #a62958 !important;
        font-size: 25px !important;
        font-weight: 700 !important;
        text-align: center !important;
    }

    /* ==================================================
       TELEFON-AKTIONSPREIS
       ================================================== */

    /* Alter Telefonpreis links innerhalb der Preiszelle */
    html body #main#main
    :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right
    > small.tariff.disable {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: start !important;
        align-self: center !important;

        display: block !important;
        width: auto !important;
        margin: 0 4px !important;
        padding: 0 !important;

        color: #9b858c !important;
        font-size: 21px !important;
        font-weight: 500 !important;
        line-height: 1.35 !important;
        text-align: left !important;
        text-decoration: line-through !important;
        text-decoration-thickness: 2px !important;
        white-space: nowrap !important;
    }

    /* Neuer Telefon-Aktionspreis rechts daneben */
    html body #main#main
    :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right
    > small.tariff.campaign {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        align-self: center !important;

        display: block !important;
        width: auto !important;
        margin: 0 4px !important;
        padding: 0 !important;

        color: #ff5597 !important;
        font-size: 22px !important;
        font-weight: 800 !important;
        line-height: 1.35 !important;
        text-align: right !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }

    /* ==================================================
       CHAT-AKTIONSPREIS – WIE BEI MILA
       ================================================== */

    /* Regulärer Chatpreis links, durchgestrichen */
    html body #main#main
    :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right > div.chat
    > small.tariff.disable {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: start !important;
        align-self: center !important;

        display: block !important;
        width: auto !important;
        margin: 0 4px !important;
        padding: 0 !important;

        color: #9b858c !important;
        font-size: 21px !important;
        font-weight: 500 !important;
        line-height: 1.35 !important;
        text-align: left !important;
        text-decoration: line-through !important;
        text-decoration-thickness: 2px !important;
        white-space: nowrap !important;
    }

    /* Chat-Aktionspreis rechts daneben, kräftig pink */
    html body #main#main
    :is(#agents580#agents580, #agents271#agents271)
    > div.profile > .right > div.chat
    > small.tariff.campaign {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        align-self: center !important;

        display: block !important;
        width: auto !important;
        margin: 0 4px !important;
        padding: 0 !important;

        color: #ff5597 !important;
        font-size: 22px !important;
        font-weight: 800 !important;
        line-height: 1.35 !important;
        text-align: right !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }

    /* Sternchen übernehmen die jeweilige Farbe */
    html body #main#main
    :is(#agents580#agents580, #agents271#agents271)
    > div.profile .right small.tariff .asterisk {
        color: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
    }
}

/* ==================================================
   AKTIONSPREISE – UNABHÄNGIG VON DER BERATERLISTEN-ID
   ================================================== */

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

    /* Ausgeblendeten regulären Preis wieder sichtbar machen */
    html body #main#main#main
    div.profile > div.right small.tariff.disable {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        width: auto !important;
        margin: 0 5px !important;
        padding: 0 !important;

        color: #9b858c !important;
        font-size: 20px !important;
        font-weight: 500 !important;
        line-height: 1.35 !important;
        text-decoration: line-through !important;
        text-decoration-thickness: 2px !important;
        white-space: nowrap !important;
    }

    /* Aktionspreis kräftig pink */
    html body #main#main#main
    div.profile > div.right small.tariff.campaign {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        width: auto !important;
        margin: 0 5px !important;
        padding: 0 !important;

        color: #d65c8f !important;
        font-size: 22px !important;
        font-weight: 800 !important;
        line-height: 1.35 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }

    /* Telefonaktion: beide Preise über dem Anrufbutton */
    html body #main#main#main
    div.profile > div.right
    > small.tariff.disable {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: start !important;
        align-self: center !important;
    }

    html body #main#main#main
    div.profile > div.right
    > small.tariff.campaign {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        align-self: center !important;
    }

    /* Chataktion: beide Preise über dem Chatbutton */
    html body #main#main#main
    div.profile > div.right > div.chat {
        display: contents !important;
    }

    html body #main#main#main
    div.profile > div.right > div.chat
    > small.tariff.disable {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: start !important;
        align-self: center !important;
    }

    html body #main#main#main
    div.profile > div.right > div.chat
    > small.tariff.campaign {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        align-self: center !important;
    }

    /* Sternchen */
    html body #main#main#main
    div.profile > div.right small.tariff .asterisk {
        color: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
    }
}

/* ==================================================
   AKTIONSPREISE – GRÖSSER, DEUTLICHER UND NÄHER ZUSAMMEN
   ================================================== */

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

    /* ==================================================
       STARTSEITE / BERATERKACHELN
       ================================================== */

    /* Regulärer, durchgestrichener Preis */
    html body #main#main#main
    div.profile > div.right small.tariff.disable {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        color: #806b72 !important;
        font-size: 23px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;

        text-decoration: line-through !important;
        text-decoration-thickness: 2px !important;
        white-space: nowrap !important;
    }

    /* Aktionspreis */
    html body #main#main#main
    div.profile > div.right small.tariff.campaign {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        color: #d65c8f !important;
        font-size: 25px !important;
        font-weight: 800 !important;
        line-height: 1.35 !important;

        text-decoration: none !important;
        white-space: nowrap !important;
    }

    /* Telefonpreise näher zusammen */
    html body #main#main#main
    div.profile > div.right
    > small.tariff.disable {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: center !important;

        width: auto !important;
        margin: 0 !important;
        transform: translateX(-55%) !important;
    }

    html body #main#main#main
    div.profile > div.right
    > small.tariff.campaign {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: center !important;

        width: auto !important;
        margin: 0 !important;
        transform: translateX(55%) !important;
    }

    /* Chatpreise näher zusammen */
    html body #main#main#main
    div.profile > div.right > div.chat
    > small.tariff.disable {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: center !important;

        width: auto !important;
        margin: 0 !important;
        transform: translateX(-55%) !important;
    }

    html body #main#main#main
    div.profile > div.right > div.chat
    > small.tariff.campaign {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: center !important;

        width: auto !important;
        margin: 0 !important;
        transform: translateX(55%) !important;
    }


    /* ==================================================
       BERATERDETAILSEITE
       ================================================== */

    html body #main#main#main
    .article[id^="ddi"] > .panel > .right > div.chat {
        display: contents !important;
    }

    /* Regulärer Preis auf der Detailseite */
    html body #main#main#main
    .article[id^="ddi"] > .panel > .right
    small.tariff.disable {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;

        color: #806b72 !important;
        font-size: 23px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;

        text-decoration: line-through !important;
        text-decoration-thickness: 2px !important;
        white-space: nowrap !important;
    }

    /* Aktionspreis auf der Detailseite */
    html body #main#main#main
    .article[id^="ddi"] > .panel > .right
    small.tariff.campaign {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;

        color: #d65c8f !important;
        font-size: 25px !important;
        font-weight: 800 !important;
        line-height: 1.35 !important;

        text-decoration: none !important;
        white-space: nowrap !important;
    }

    /* Telefonaktion auf der Detailseite */
    html body #main#main#main
    .article[id^="ddi"] > .panel > .right
    > small.tariff.disable {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: center !important;
        transform: translateX(-55%) !important;
    }

    html body #main#main#main
    .article[id^="ddi"] > .panel > .right
    > small.tariff.campaign {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: center !important;
        transform: translateX(55%) !important;
    }

    /* Chataktion auf der Detailseite */
    html body #main#main#main
    .article[id^="ddi"] > .panel > .right
    > div.chat > small.tariff.disable {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: center !important;
        transform: translateX(-55%) !important;
    }

    html body #main#main#main
    .article[id^="ddi"] > .panel > .right
    > div.chat > small.tariff.campaign {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: center !important;
        transform: translateX(55%) !important;
    }

    /* Sternchen */
    html body #main#main
    small.tariff .asterisk {
        color: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
    }
}

/* ===== Aktionspreise: größer und enger zusammen ===== */

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

    /* Regulärer Preis deutlicher */
    html body #main#main#main
    small.tariff.disable {
        color: #765f67 !important;
        font-size: 26px !important;
        font-weight: 600 !important;
        text-decoration-thickness: 2px !important;
    }

    /* Aktionspreis größer und kräftiger */
    html body #main#main#main
    small.tariff.campaign {
        color: #e0447d !important;
        font-size: 27px !important;
        font-weight: 800 !important;
    }

    /* Telefonpreise enger zusammen */
    html body #main#main#main
    div.profile > div.right
    > small.tariff.disable,
    html body #main#main#main
    .article[id^="ddi"] > .panel > .right
    > small.tariff.disable {
        transform: translateX(-45%) !important;
    }

    html body #main#main#main
    div.profile > div.right
    > small.tariff.campaign,
    html body #main#main#main
    .article[id^="ddi"] > .panel > .right
    > small.tariff.campaign {
        transform: translateX(45%) !important;
    }

    /* Chatpreise enger zusammen */
    html body #main#main#main
    div.profile > div.right > div.chat
    > small.tariff.disable,
    html body #main#main#main
    .article[id^="ddi"] > .panel > .right
    > div.chat > small.tariff.disable {
        transform: translateX(-45%) !important;
    }

    html body #main#main#main
    div.profile > div.right > div.chat
    > small.tariff.campaign,
    html body #main#main#main
    .article[id^="ddi"] > .panel > .right
    > div.chat > small.tariff.campaign {
        transform: translateX(45%) !important;
    }
}

/* ==================================================
   DETAILSEITE – AKTIONSPREISE MIT AUSREICHEND ABSTAND
   ================================================== */

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

    /* Regulärer Chatpreis links */
    html body #main#main#main
    .article[id^="ddi"] > .panel > .right
    > div.chat > small.tariff.disable {
        justify-self: start !important;
        transform: none !important;

        margin-left: 4px !important;
        margin-right: 0 !important;

        font-size: 21px !important;
    }

    /* Aktionspreis rechts */
    html body #main#main#main
    .article[id^="ddi"] > .panel > .right
    > div.chat > small.tariff.campaign {
        justify-self: end !important;
        transform: none !important;

        margin-left: 0 !important;
        margin-right: 4px !important;

        font-size: 24px !important;
    }

    /* Dasselbe bei Telefonaktionen */
    html body #main#main#main
    .article[id^="ddi"] > .panel > .right
    > small.tariff.disable {
        justify-self: start !important;
        transform: none !important;

        margin-left: 4px !important;
        margin-right: 0 !important;

        font-size: 21px !important;
    }

    html body #main#main#main
    .article[id^="ddi"] > .panel > .right
    > small.tariff.campaign {
        justify-self: end !important;
        transform: none !important;

        margin-left: 0 !important;
        margin-right: 4px !important;

        font-size: 24px !important;
    }
}

/* ==================================================
   BERATERLISTE – AKTIONSPREISE NICHT ABSCHNEIDEN
   ================================================== */

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

    /* Regulärer Chatpreis links */
    html body #main#main#main
    div.profile > div.right > div.chat
    > small.tariff.disable {
        justify-self: start !important;
        transform: none !important;

        margin-left: 10px !important;
        margin-right: 0 !important;

        font-size: 24px !important;
    }

    /* Aktionspreis rechts, aber innerhalb der Kachel */
    html body #main#main#main
    div.profile > div.right > div.chat
    > small.tariff.campaign {
        justify-self: end !important;
        transform: none !important;

        margin-left: 0 !important;
        margin-right: 10px !important;

        font-size: 25px !important;
    }

    /* Telefonaktionen ebenfalls innerhalb der linken Spalte */
    html body #main#main#main
    div.profile > div.right
    > small.tariff.disable {
        justify-self: start !important;
        transform: none !important;

        margin-left: 10px !important;
        margin-right: 0 !important;

        font-size: 24px !important;
    }

    html body #main#main#main
    div.profile > div.right
    > small.tariff.campaign {
        justify-self: end !important;
        transform: none !important;

        margin-left: 0 !important;
        margin-right: 10px !important;

        font-size: 25px !important;
    }
}

/* ==================================================
   SPRICHT / CHATTET – RÜCKRUF: DUNKELPINK
   ================================================== */

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

    html body #main#main#main#main
    a.button.button.busy {
        background: #b33a63 !important;
        background-color: #b33a63 !important;
        background-image: none !important;

        border-color: #b33a63 !important;
        color: #ffffff !important;
    }

    html body #main#main#main#main
    a.button.button.busy span {
        color: #ffffff !important;
    }
}

/* ==================================================
   PROFILTEXT AUF ALLEN BERATERDETAILSEITEN EINHEITLICH
   ================================================== */

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

    /* Gesamter Profiltextbereich */
    html body #main#main#main .longtext {
        display: block !important;
        width: 100% !important;
        height: auto !important;

        padding: 24px 30px 36px !important;

        color: #68424f !important;
        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 27px !important;
        font-weight: 400 !important;
        line-height: 1.65 !important;

        box-sizing: border-box !important;
    }

    /* Alle unterschiedlichen HTML-Formatierungen überschreiben */
    html body #main#main#main .longtext p,
    html body #main#main#main .longtext span,
    html body #main#main#main .longtext strong,
    html body #main#main#main .longtext em,
    html body #main#main#main .longtext li,
    html body #main#main#main .longtext a {
        color: inherit !important;
        font-family: inherit !important;
        font-size: 27px !important;
        line-height: 1.65 !important;
    }

    /* Absätze mit gleichmäßigen Abständen */
    html body #main#main#main .longtext p {
        display: block !important;
        width: 100% !important;

        margin: 0 0 20px !important;
        padding: 0 !important;

        white-space: normal !important;
        overflow: visible !important;
        overflow-wrap: anywhere !important;
    }

    /* Fett und kursiv bleiben erhalten */
    html body #main#main#main .longtext strong {
        font-weight: 700 !important;
    }

    html body #main#main#main .longtext em {
        font-style: italic !important;
    }

    /* Bilder im Profiltext */
    html body #main#main#main .longtext img {
        display: block !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 24px auto !important;
    }
}


/* ==================================================
   MOBILE – KONTAKTSEITE
   ================================================== */

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

    /* Kontaktformular als übersichtliche Box */
    html body #main#main .cte_form.form_1 {
        display: block !important;
        width: calc(100% - 32px) !important;
        max-width: 900px !important;
        margin: 28px auto 36px !important;
        padding: 0 28px 34px !important;

        border: 1px solid #e7c4cf !important;
        border-radius: 10px !important;
        background: #fffafb !important;
        box-sizing: border-box !important;
    }

    /* Überschrift Kontakt */
    html body #main#main .cte_form.form_1 > h1.bh {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: calc(100% + 56px) !important;
        min-height: 62px !important;
        margin: 0 -28px 28px !important;
        padding: 10px 20px !important;

        border-radius: 9px 9px 0 0 !important;
        background: #c9909f !important;
        color: #ffffff !important;

        font-size: 32px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    html body #main#main .cte_form.form_1 form {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Einzelne Formularzeilen */
    html body #main#main .cte_form.form_1 form > .row {
        display: block !important;
        width: 100% !important;
        margin: 0 0 22px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Beschriftungen */
    html body #main#main .cte_form.form_1 .row > label {
        display: block !important;
        width: 100% !important;
        margin: 0 0 8px !important;
        padding: 0 !important;

        color: #68424f !important;
        font-size: 24px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        text-align: left !important;
    }

    html body #main#main .cte_form.form_1 .asterisk {
        color: #bc5377 !important;
        font-size: inherit !important;
    }

    /* Eingabefelder */
    html body #main#main .cte_form.form_1 input.text {
        display: block !important;
        width: 100% !important;
        height: 62px !important;
        margin: 0 !important;
        padding: 10px 16px !important;

        border: 1px solid #d9aeba !important;
        border-radius: 7px !important;
        background: #ffffff !important;
        color: #68424f !important;

        font-family: inherit !important;
        font-size: 24px !important;
        line-height: 1.3 !important;

        box-sizing: border-box !important;
        box-shadow: none !important;
    }

    /* Nachrichtenfeld */
    html body #main#main .cte_form.form_1 .textdiv {
        display: block !important;
        width: 100% !important;
    }

    html body #main#main .cte_form.form_1 textarea.textarea {
        display: block !important;
        width: 100% !important;
        min-height: 300px !important;
        height: 300px !important;
        margin: 0 !important;
        padding: 16px !important;

        border: 1px solid #d9aeba !important;
        border-radius: 7px !important;
        background: #ffffff !important;
        color: #68424f !important;

        font-family: inherit !important;
        font-size: 24px !important;
        line-height: 1.5 !important;
        resize: vertical !important;

        box-sizing: border-box !important;
        box-shadow: none !important;
    }

    /* Fokus bei Eingabe */
    html body #main#main .cte_form.form_1 input.text:focus,
    html body #main#main .cte_form.form_1 textarea.textarea:focus {
        border-color: #bc5377 !important;
        outline: 3px solid rgba(188, 83, 119, 0.14) !important;
    }

    /* Datenschutzzeile */
    html body #main#main .cte_form.form_1 .row.check {
        display: grid !important;
        grid-template-columns: 34px minmax(0, 1fr) !important;
        align-items: start !important;
        column-gap: 13px !important;
        width: 100% !important;
        margin: 8px 0 26px !important;
    }

    html body #main#main .cte_form.form_1 .row.check input.check {
        display: block !important;
        width: 30px !important;
        height: 30px !important;
        margin: 3px 0 0 !important;
        accent-color: #bc5377 !important;
    }

    html body #main#main .cte_form.form_1 .row.check label {
        display: block !important;
        margin: 0 !important;
        color: #68424f !important;
        font-size: 21px !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
    }

    html body #main#main .cte_form.form_1 .row.check a {
        color: #bc5377 !important;
        font-size: inherit !important;
        font-weight: 700 !important;
        text-decoration: underline !important;
    }

    /* Abschicken */
    html body #main#main .cte_form.form_1 .submit_div {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    html body #main#main .cte_form.form_1 input.submit {
        display: block !important;
        width: 100% !important;
        min-height: 68px !important;
        margin: 0 !important;
        padding: 12px 20px !important;

        border: 0 !important;
        border-radius: 7px !important;
        background: #bc5377 !important;
        color: #ffffff !important;

        font-family: inherit !important;
        font-size: 27px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    /* Kontakt-Informationsbanner */
    html body #main#main
    .cte_text:has(+ .cte_form.form_1) {
        width: calc(100% - 32px) !important;
        min-height: 250px !important;
        margin: 28px auto !important;
        padding: 28px 24px !important;

        border-radius: 9px !important;
        background-size: cover !important;
        background-position: center !important;
        box-sizing: border-box !important;
    }

    html body #main#main
    .cte_text:has(+ .cte_form.form_1) p,
    html body #main#main
    .cte_text:has(+ .cte_form.form_1) p span,
    html body #main#main
    .cte_text:has(+ .cte_form.form_1) p strong,
    html body #main#main
    .cte_text:has(+ .cte_form.form_1) p a {
        color: #68424f !important;
        font-size: 23px !important;
        line-height: 1.55 !important;
    }

    /* Bereich „Berater werden“ */
    html body #main#main
    .cte_form.form_1 + .cte_text {
        width: calc(100% - 32px) !important;
        margin: 0 auto 40px !important;
        padding: 26px !important;

        border: 1px solid #e7c4cf !important;
        border-radius: 9px !important;
        background: #fffafb !important;
        box-sizing: border-box !important;
    }

    html body #main#main
    .cte_form.form_1 + .cte_text > h2.bh {
        margin: 0 0 24px !important;
        padding: 0 !important;
        background: transparent !important;
        color: #bc5377 !important;

        font-size: 29px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        text-align: center !important;
    }

    html body #main#main
    .cte_form.form_1 + .cte_text .button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 64px !important;
        padding: 10px 18px !important;

        border-radius: 7px !important;
        background: #bc5377 !important;
        color: #ffffff !important;

        font-size: 25px !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }
}

/* ==================================================
   MOBILE – AUFKLAPPMENÜ EXTRA GROSS
   ================================================== */

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

    /* Menübox – reicht fast bis zur Seitenmitte */
    html body #header#header .nav {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: auto !important;

        width: 48vw !important;
        min-width: 440px !important;
        max-width: 520px !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        background: rgba(239, 219, 225, 0.96) !important;
        border: 0 !important;
        border-radius: 0 0 9px 0 !important;
        box-shadow: 0 8px 20px rgba(104, 66, 79, 0.22) !important;

        overflow: visible !important;
        z-index: 99999 !important;
        box-sizing: border-box !important;
    }

    html body #header#header .nav nav,
    html body #header#header .nav ul.level_1 {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Große Menüzeilen */
    html body #header#header .nav ul.level_1 > li {
        display: block !important;
        float: none !important;

        width: 100% !important;
        height: auto !important;
        min-height: 82px !important;

        margin: 0 !important;
        padding: 0 !important;

        border-bottom: 2px solid rgba(188, 83, 119, 0.14) !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    html body #header#header .nav ul.level_1 > li:last-child {
        border-bottom: 0 !important;
    }

    /* Große, gut lesbare Schrift */
    html body #header#header .nav ul.level_1 > li > a {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        min-height: 82px !important;

        margin: 0 !important;
        padding: 17px 30px !important;

        background: transparent !important;
        color: #7e3650 !important;

        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 34px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: left !important;
        text-decoration: none !important;

        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    /* Aktiver Menüpunkt */
    html body #header#header .nav ul.level_1 > li.active > a,
    html body #header#header .nav ul.level_1 > li > a:hover,
    html body #header#header .nav ul.level_1 > li > a:focus {
        background: rgba(188, 83, 119, 0.16) !important;
        color: #86163e !important;
    }
}

/* ==================================================
   MOBILE – VIP SAUBER UNTER DEM PROFILFOTO
   ================================================== */

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

    /* Alten linken VIP-Eckbanner sicher entfernen */
    html body #main#main
    #agents580#agents580 > div.profile.vip::before,

    html body #main#main
    #agents271#agents271 > div.profile.vip::before {
        content: none !important;
        display: none !important;
        visibility: hidden !important;

        width: 0 !important;
        height: 0 !important;

        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    /* Falsch positionierten VIP-Balken am Bild entfernen */
    html body #main#main
    #agents580#agents580 > div.profile.vip
    > .left > a:has(img.pic)::after,

    html body #main#main
    #agents271#agents271 > div.profile.vip
    > .left > a:has(img.pic)::after {
        content: none !important;
        display: none !important;
    }

    /* Linke Bildspalte */
    html body #main#main
    #agents580#agents580 > div.profile.vip > .left,

    html body #main#main
    #agents271#agents271 > div.profile.vip > .left {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        overflow: visible !important;
    }

    /* Bildlink normal darstellen */
    html body #main#main
    #agents580#agents580 > div.profile.vip
    > .left > a:has(img.pic),

    html body #main#main
    #agents271#agents271 > div.profile.vip
    > .left > a:has(img.pic) {
        display: block !important;
        width: auto !important;
        height: auto !important;

        margin: 0 auto !important;
        padding: 0 !important;

        position: static !important;
        overflow: visible !important;
    }

    /* Informationsbereich direkt unter dem Foto */
    html body #main#main
    #agents580#agents580 > div.profile.vip > .left > ul.infos,

    html body #main#main
    #agents271#agents271 > div.profile.vip > .left > ul.infos {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;

        width: 100% !important;
        height: auto !important;

        margin: 10px 0 0 !important;
        padding: 0 !important;

        overflow: visible !important;
        background: transparent !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    /* Neuer VIP-Balken innerhalb der Informationen */
    html body #main#main
    #agents580#agents580 > div.profile.vip
    > .left > ul.infos::before,

    html body #main#main
    #agents271#agents271 > div.profile.vip
    > .left > ul.infos::before {
        content: "VIP" !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        position: static !important;

        width: 230px !important;
        min-height: 38px !important;

        margin: 0 auto 16px !important;
        padding: 5px 12px !important;

        border: 0 !important;
        border-radius: 5px !important;
        background: #b33a638c !important;
        box-shadow: none !important;

        color: #ffffff !important;
        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 22px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        text-align: center !important;
        text-transform: uppercase !important;

        transform: none !important;
        box-sizing: border-box !important;
    }

    /* Gesprächsanzahl unter dem VIP-Balken */
    html body #main#main
    #agents580#agents580 > div.profile.vip
    > .left > ul.infos > li.calls,

    html body #main#main
    #agents271#agents271 > div.profile.vip
    > .left > ul.infos > li.calls {
        display: block !important;
        position: static !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        color: #68424f !important;

        font-size: 27px !important;
        line-height: 1.35 !important;
        text-align: center !important;

        transform: none !important;
    }
}


/* ==================================================
   BERATERFILTER – SCHRIFT UND FELDER GRÖSSER
   ================================================== */

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

    /* Alle Filterbuttons */
    html body #main#main
    #tabnav ul.tabnav > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-height: 66px !important;
        padding: 12px 18px !important;

        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 27px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: center !important;
        white-space: nowrap !important;

        box-sizing: border-box !important;
    }

    /* Suchfeld */
    html body #main#main
    #tabnav ul.tabnav > li.last input.search {
        display: block !important;

        width: 100% !important;
        height: 66px !important;
        min-height: 66px !important;

        padding: 10px 65px 10px 20px !important;

        border: 1px solid #e7c4cf !important;
        border-radius: 7px !important;
        background: #ffffff !important;
        color: #68424f !important;

        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 25px !important;
        font-weight: 400 !important;
        line-height: 1.25 !important;
        text-align: center !important;

        box-sizing: border-box !important;
    }

    /* Platzhalter „Beratersuche“ */
    html body #main#main
    #tabnav ul.tabnav > li.last input.search::placeholder {
        color: #8a6871 !important;
        font-size: 25px !important;
        font-weight: 400 !important;
        opacity: 1 !important;
    }

    /* Lupe */
    html body #main#main
    #tabnav ul.tabnav > li.last .fas.fa-search {
        position: absolute !important;
        top: 50% !important;
        right: 20px !important;

        color: #bc5377 !important;
        font-size: 29px !important;
        line-height: 1 !important;

        transform: translateY(-50%) !important;
        pointer-events: none !important;
    }

    html body #main#main
    #tabnav ul.tabnav > li.last {
        position: relative !important;
    }
}

/* ==================================================
   MOBILE – ZUGRIFF ERST NACH LOGIN
   ================================================== */

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

    /* Gesamter Hinweisblock */
    html body #main#main
    .cte_text:has(img[src*="st-valentin-mini.png"]) {
        display: block !important;

        width: calc(100% - 32px) !important;
        max-width: 900px !important;

        margin: 28px auto 42px !important;
        padding: 0 30px 38px !important;

        border: 1px solid #e7c4cf !important;
        border-radius: 10px !important;
        background: #ffffff !important;

        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Überschrift */
    html body #main#main
    .cte_text:has(img[src*="st-valentin-mini.png"]) > h2.bh {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: calc(100% + 60px) !important;
        min-height: 72px !important;

        margin: 0 -30px 30px !important;
        padding: 12px 22px !important;

        background: #c9909f !important;
        color: #ffffff !important;

        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 32px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: center !important;

        box-sizing: border-box !important;
    }

    /* Leeren ersten Absatz ausblenden */
    html body #main#main
    .cte_text:has(img[src*="st-valentin-mini.png"])
    > h2.bh + p {
        display: none !important;
    }

    /* Textbereich */
    html body #main#main
    .cte_text:has(img[src*="st-valentin-mini.png"]) > p {
        width: 100% !important;
        margin: 0 0 26px !important;
        padding: 0 !important;

        color: #68424f !important;
        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 28px !important;
        line-height: 1.55 !important;
        text-align: center !important;

        box-sizing: border-box !important;
    }

    /* Sämtliche fest eingetragenen 16/17/18 px überschreiben */
    html body #main#main
    .cte_text:has(img[src*="st-valentin-mini.png"]) > p span,
    html body #main#main
    .cte_text:has(img[src*="st-valentin-mini.png"]) > p strong,
    html body #main#main
    .cte_text:has(img[src*="st-valentin-mini.png"]) > p em {
        font-family: inherit !important;
        font-size: inherit !important;
        line-height: inherit !important;
    }

    /* Erster Hinweistext */
    html body #main#main
    .cte_text:has(img[src*="st-valentin-mini.png"])
    > p:nth-of-type(2) > span:first-child {
        color: #86163e !important;
        font-size: 28px !important;
        font-weight: 700 !important;
    }

    /* „Melde Dich an …“ */
    html body #main#main
    .cte_text:has(img[src*="st-valentin-mini.png"])
    > p:nth-of-type(2) span[style*="color"] {
        display: block !important;

        margin-top: 24px !important;
        padding: 16px 22px !important;

        border-radius: 7px !important;
        background: #fcf3f6 !important;
        color: #bc5377 !important;

        font-size: 29px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        text-align: center !important;
    }

    /* Herzbild */
    html body #main#main
    .cte_text:has(img[src*="st-valentin-mini.png"]) img {
        display: block !important;

        width: 240px !important;
        max-width: 65% !important;
        height: auto !important;

        margin: 24px auto 0 !important;
        padding: 0 !important;
    }

    html body #main#main
    .cte_text:has(img[src*="st-valentin-mini.png"]) > .clear {
        display: none !important;
    }
}

/* ==================================================
   MOBILE – LOGINBUTTON MIT PERSONEN-ICON
   ================================================== */

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

    /* Header als Bezugspunkt */
    html body #wrapper#wrapper
    #header#header > .inside {
        position: relative !important;
    }

    /* Runder Loginbutton oben rechts */
    html body #wrapper#wrapper
    #header#header > .inside
    > a.mobile_btn.mobile_login {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        position: absolute !important;
        top: 32px !important;
        right: 20px !important;
        left: auto !important;
        bottom: auto !important;

        width: 96px !important;
        height: 96px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 2px solid #e6b8c5 !important;
        border-radius: 50% !important;
        background: #fffafb !important;

        transform: none !important;
        overflow: hidden !important;
        z-index: 99999 !important;
        box-sizing: border-box !important;
    }

    /* Altes Font-Awesome-Symbol entfernen */
    html body #wrapper#wrapper
    #header#header > .inside
    > a.mobile_btn.mobile_login > i {
        display: none !important;
        visibility: hidden !important;
    }

    /* Kopf der Person */
    html body #wrapper#wrapper
    #header#header > .inside
    > a.mobile_btn.mobile_login::before {
        content: "" !important;
        display: block !important;
        visibility: visible !important;

        position: absolute !important;
        top: 17px !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;

        width: 32px !important;
        height: 32px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-radius: 50% !important;
        background: #a74868 !important;

        transform: translateX(-50%) !important;
        box-sizing: border-box !important;
    }

    /* Schultern der Person */
    html body #wrapper#wrapper
    #header#header > .inside
    > a.mobile_btn.mobile_login::after {
        content: "" !important;
        display: block !important;
        visibility: visible !important;

        position: absolute !important;
        top: 52px !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;

        width: 58px !important;
        height: 31px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-radius: 30px 30px 8px 8px !important;
        background: #a74868 !important;

        transform: translateX(-50%) !important;
        box-sizing: border-box !important;
    }
}

/* Kopf etwas kleiner */
html body #wrapper#wrapper
#header#header > .inside
> a.mobile_btn.mobile_login::before {
    top: 22px !important;
    width: 27px !important;
    height: 27px !important;
}

/* Schultern etwas kleiner */
html body #wrapper#wrapper
#header#header > .inside
> a.mobile_btn.mobile_login::after {
    top: 52px !important;
    width: 49px !important;
    height: 27px !important;
    border-radius: 26px 26px 7px 7px !important;
}

/* ==================================================
   MOBILE – KUNDENBEREICH: KONTO UND MENÜ
   ================================================== */

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

    /* Kundenbereich erkennen und linke Spalte wieder zeigen */
    html body:has(#left .mod_logout) #container {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        max-width: 100% !important;
        padding: 22px !important;

        box-sizing: border-box !important;
    }

    html body:has(#left .mod_logout) #left {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        float: none !important;
        order: 1 !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 0 28px !important;
        padding: 0 !important;

        position: static !important;
        box-sizing: border-box !important;
    }

    html body:has(#left .mod_logout) #main {
        display: block !important;
        float: none !important;
        order: 2 !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    html body:has(#left .mod_logout) #left > .inside {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ------------------------------
       Mein Konto
       ------------------------------ */

    html body #left#left .mod_logout {
        display: block !important;

        width: 100% !important;
        margin: 0 0 24px !important;
        padding: 0 28px 28px !important;

        border: 1px solid #e7c4cf !important;
        border-radius: 10px !important;
        background: #fffafb !important;
        box-shadow: 0 5px 14px rgba(104, 66, 79, 0.10) !important;

        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    html body #left#left .mod_logout > h3.bh {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: calc(100% + 56px) !important;
        min-height: 68px !important;

        margin: 0 -28px 24px !important;
        padding: 12px 20px !important;

        background: #c9909f !important;
        color: #ffffff !important;

        font-size: 31px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: center !important;

        box-sizing: border-box !important;
    }

    /* Kontoinformationen */
    html body #left#left .mod_logout ul.infos {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;

        width: 100% !important;
        margin: 0 0 22px !important;
        padding: 0 !important;
    }

    html body #left#left .mod_logout ul.infos > li {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;

        min-height: 68px !important;
        margin: 0 !important;
        padding: 12px 15px !important;

        border: 1px solid #efd7de !important;
        border-radius: 7px !important;
        background: #ffffff !important;
        color: #68424f !important;

        font-size: 23px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;

        list-style: none !important;
        box-sizing: border-box !important;
    }

    html body #left#left .mod_logout ul.infos > li i {
        flex: 0 0 auto !important;

        width: 31px !important;
        margin: 0 !important;

        color: #bc5377 !important;
        font-size: 27px !important;
        text-align: center !important;
    }

    html body #left#left .mod_logout ul.infos a {
        color: #86163e !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        text-decoration: none !important;
    }

    /* Kundenbereich-Button */
    html body #left#left .mod_logout > a.button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 66px !important;

        margin: 0 0 13px !important;
        padding: 12px 18px !important;

        border: 0 !important;
        border-radius: 7px !important;
        background: #bc5377 !important;
        color: #ffffff !important;

        font-size: 26px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: center !important;
        text-decoration: none !important;

        box-sizing: border-box !important;
    }

    /* Logout */
    html body #left#left .mod_logout form {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    html body #left#left .mod_logout input.submit {
        display: block !important;

        width: 100% !important;
        min-height: 62px !important;

        margin: 0 !important;
        padding: 12px 18px !important;

        border: 0 !important;
        border-radius: 7px !important;
        background: #a0838b !important;
        color: #ffffff !important;

        font-size: 25px !important;
        font-weight: 700 !important;
        cursor: pointer !important;

        box-sizing: border-box !important;
    }

    /* ------------------------------
       Kundenmenü
       ------------------------------ */

    html body #left#left
    .nav.mod_simplenav {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        position: static !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 28px 28px !important;

        border: 1px solid #e7c4cf !important;
        border-radius: 10px !important;
        background: #fffafb !important;
        box-shadow: 0 5px 14px rgba(104, 66, 79, 0.10) !important;

        transform: none !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html body #left#left
    .nav.mod_simplenav > h3.bh {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: calc(100% + 56px) !important;
        min-height: 68px !important;

        margin: 0 -28px 22px !important;
        padding: 12px 20px !important;

        background: #c9909f !important;
        color: #ffffff !important;

        font-size: 31px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: center !important;

        box-sizing: border-box !important;
    }

    /* Schließen-Symbol hier nicht erforderlich */
    html body #left#left
    .nav.mod_simplenav > .menu_close {
        display: none !important;
    }

    html body #left#left
    .nav.mod_simplenav nav,
    html body #left#left
    .nav.mod_simplenav ul.level_1 {
        display: block !important;
        width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    html body #left#left
    .nav.mod_simplenav ul.level_1 {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    html body #left#left
    .nav.mod_simplenav ul.level_1 > li {
        display: block !important;
        float: none !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        list-style: none !important;
        box-sizing: border-box !important;
    }

    html body #left#left
    .nav.mod_simplenav ul.level_1 > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 72px !important;

        margin: 0 !important;
        padding: 12px 14px !important;

        border: 1px solid #e7c4cf !important;
        border-radius: 7px !important;
        background: #ffffff !important;
        color: #7e3650 !important;

        font-size: 23px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: center !important;
        text-decoration: none !important;

        white-space: normal !important;
        box-sizing: border-box !important;
    }

    html body #left#left
    .nav.mod_simplenav ul.level_1 > li.active > a {
        background: #efdbe1 !important;
        color: #86163e !important;
    }

    /* Guthaben aufladen besonders hervorheben */
    html body #left#left
    .nav.mod_simplenav ul.level_1 > li.last {
        grid-column: 1 / -1 !important;
    }

    html body #left#left
    .nav.mod_simplenav ul.level_1 > li.last > a {
        min-height: 70px !important;
        background: #bc5377 !important;
        color: #ffffff !important;
        font-size: 27px !important;
    }
}


/* ==================================================
   MOBILE – KUNDENBEREICH IM DESKTOP-STIL
   Sichere Struktur ohne display:contents
   ================================================== */

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

    /* Gesamter Seitenbereich */
    html body:has(#left .mod_logout) #container {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 22px !important;

        overflow: visible !important;
        box-sizing: border-box !important;
    }

    /* Linke Desktopspalte wird oberer Kundenbereich */
    html body:has(#left .mod_logout) #left {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        position: static !important;
        float: none !important;
        order: 1 !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 0 26px !important;
        padding: 0 !important;

        overflow: visible !important;
        box-sizing: border-box !important;
    }

    html body:has(#left .mod_logout) #left > .inside {
        display: block !important;
        width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    /* Hauptbereich folgt darunter */
    html body:has(#left .mod_logout) #main {
        display: block !important;
        position: static !important;
        float: none !important;
        order: 2 !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
        box-sizing: border-box !important;
    }

    /* ==================================================
       MEIN KONTO
       ================================================== */

    html body #left#left .mod_logout {
        display: block !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 0 18px !important;
        padding: 0 26px 26px !important;

        border: 1px solid #e7c4cf !important;
        border-radius: 10px !important;
        background: #fffafb !important;
        box-shadow: 0 5px 15px rgba(104, 66, 79, 0.11) !important;

        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html body #left#left .mod_logout > h3.bh {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: calc(100% + 52px) !important;
        min-height: 68px !important;

        margin: 0 -26px 22px !important;
        padding: 11px 20px !important;

        background: #bc5377 !important;
        color: #ffffff !important;

        font-size: 31px !important;
        font-weight: 700 !important;
        font-style: normal !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* Kontodaten als vier übersichtliche Felder */
    html body #left#left .mod_logout ul.infos {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;

        width: 100% !important;
        margin: 0 0 20px !important;
        padding: 0 !important;
    }

    html body #left#left .mod_logout ul.infos > li {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;

        min-height: 70px !important;
        margin: 0 !important;
        padding: 12px 15px !important;

        border: 1px solid #efd7de !important;
        border-radius: 7px !important;
        background: #ffffff !important;
        color: #68424f !important;

        font-size: 23px !important;
        font-weight: 600 !important;
        font-style: normal !important;
        line-height: 1.3 !important;

        list-style: none !important;
        box-sizing: border-box !important;
    }

    html body #left#left .mod_logout ul.infos i {
        flex: 0 0 31px !important;

        width: 31px !important;
        margin: 0 !important;

        color: #bc5377 !important;
        font-size: 27px !important;
        text-align: center !important;
    }

    html body #left#left .mod_logout ul.infos a {
        color: #86163e !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        font-style: normal !important;
        text-decoration: none !important;
    }

    /* Mein Kundenbereich und Logout nebeneinander */
    html body #left#left .mod_logout > a.button,
    html body #left#left .mod_logout form {
        display: inline-block !important;
        vertical-align: top !important;

        width: calc(50% - 7px) !important;
        margin: 0 !important;
    }

    html body #left#left .mod_logout > a.button {
        margin-right: 10px !important;
    }

    html body #left#left .mod_logout > a.button,
    html body #left#left .mod_logout input.submit {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 64px !important;
        padding: 11px 15px !important;

        border: 0 !important;
        border-radius: 7px !important;
        color: #ffffff !important;

        font-size: 24px !important;
        font-weight: 700 !important;
        font-style: normal !important;
        line-height: 1.2 !important;
        text-align: center !important;
        text-decoration: none !important;

        box-sizing: border-box !important;
    }

    html body #left#left .mod_logout > a.button {
        background: #bc5377 !important;
    }

    html body #left#left .mod_logout input.submit {
        background: #a0838b !important;
        cursor: pointer !important;
    }

    /* ==================================================
       REDUZIERTES KUNDENMENÜ
       ================================================== */

    html body #left#left .nav.mod_simplenav {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        position: static !important;
        transform: none !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 24px 24px !important;

        border: 1px solid #e7c4cf !important;
        border-radius: 10px !important;
        background: #fffafb !important;

        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html body #left#left .nav.mod_simplenav > h3.bh {
        width: calc(100% + 48px) !important;
        min-height: 62px !important;

        margin: 0 -24px 18px !important;
        padding: 11px 18px !important;

        background: #c9909f !important;
        color: #ffffff !important;

        font-size: 29px !important;
        font-weight: 700 !important;
        font-style: normal !important;
        text-align: center !important;
    }

    html body #left#left .nav.mod_simplenav .menu_close {
        display: none !important;
    }

    /* Zuerst alle Punkte ausblenden */
    html body #left#left
    .nav.mod_simplenav ul.level_1 > li {
        display: none !important;
    }

    /* Nur drei Punkte anzeigen */
    html body #left#left
    .nav.mod_simplenav li:has(> a[href="kunden-home"]),

    html body #left#left
    .nav.mod_simplenav li:has(> a[href="dein-treuebonus"]),

    html body #left#left
    .nav.mod_simplenav li:has(> a[href="Infos"]) {
        display: block !important;
    }

    html body #left#left
    .nav.mod_simplenav ul.level_1 {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body #left#left
    .nav.mod_simplenav ul.level_1 > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 72px !important;
        padding: 11px 12px !important;

        border: 1px solid #e7c4cf !important;
        border-radius: 7px !important;
        background: #ffffff !important;
        color: #7e3650 !important;

        font-size: 22px !important;
        font-weight: 700 !important;
        font-style: normal !important;
        line-height: 1.25 !important;
        text-align: center !important;
        text-decoration: none !important;
        white-space: normal !important;

        box-sizing: border-box !important;
    }

    /* ==================================================
       HAUPTINHALTE IN DESKTOP-REIHENFOLGE
       ================================================== */

    html body:has(#left .mod_logout)
    #main#main > .inside {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
    }

    /* Tagesbotschaft */
    html body:has(#left .mod_logout)
    #main#main .cte_text:has(a[href="tagesbotschaft"]) {
        order: 1 !important;
        margin: 0 0 26px !important;
    }

    /* Willkommen und letzte Beratungen */
    html body:has(#left .mod_logout)
    #main#main .cte_recent {
        order: 2 !important;
        margin: 0 0 24px !important;
    }

    /* Zu allen Beratern */
    html body:has(#left .mod_logout)
    #main#main .cte_text:has(.all-agents-button) {
        order: 3 !important;
        margin: 0 0 26px !important;
    }

    /* Zusatzminuten */
    html body:has(#left .mod_logout)
    #main#main .freemin {
        order: 4 !important;
        margin: 0 0 26px !important;
    }

    /* Offene Bewertungen */
    html body:has(#left .mod_logout)
    #main#main .unrated {
        order: 5 !important;
        margin: 0 0 26px !important;
    }

    /* Freundschaftswerbungsbanner */
    html body:has(#left .mod_logout)
    #main#main .cte_text:has(img[src*="Kundenwerbung-Small"]) {
        display: block !important;
        order: 6 !important;
        margin: 0 0 28px !important;
    }

    /* ==================================================
       LETZTE BERATUNGEN ALS FINGER-CAROUSEL
       ================================================== */

    html body:has(#left .mod_logout)
    #main#main .cte_recent > h3 {
        margin: 22px 0 18px !important;

        color: #68424f !important;
        font-size: 28px !important;
        font-weight: 700 !important;
        text-align: center !important;
    }

    html body:has(#left .mod_logout)
    #main#main .cte_recent > ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 16px !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 12px 18px 20px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x proximity !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;

        box-sizing: border-box !important;
    }

    html body:has(#left .mod_logout)
    #main#main .cte_recent > ul::-webkit-scrollbar {
        display: none !important;
    }

    html body:has(#left .mod_logout)
    #main#main .cte_recent > ul > li {
        flex: 0 0 220px !important;
        scroll-snap-align: start !important;

        margin: 0 !important;
        padding: 18px 12px !important;

        border: 1px solid #e7c4cf !important;
        border-radius: 9px !important;
        background: #fffafb !important;

        text-align: center !important;
        list-style: none !important;
        box-sizing: border-box !important;
    }

    html body:has(#left .mod_logout)
    #main#main .cte_recent > ul > li img {
        display: block !important;

        width: 125px !important;
        height: 145px !important;
        object-fit: cover !important;

        margin: 0 auto 11px !important;
        border-radius: 7px !important;
    }

    html body:has(#left .mod_logout)
    #main#main .cte_recent > ul > li h4,
    html body:has(#left .mod_logout)
    #main#main .cte_recent > ul > li h4 a {
        margin: 0 0 7px !important;

        color: #86163e !important;
        font-size: 24px !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    html body:has(#left .mod_logout)
    #main#main .cte_recent > ul > li span,
    html body:has(#left .mod_logout)
    #main#main .cte_recent > ul > li > a {
        font-size: 20px !important;
        line-height: 1.4 !important;
    }
}

/* ==================================================
   KORREKTUR – KONTO UND GUTHABENBUTTON
   ================================================== */

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

    /* Konto unter dem Sticky-Header nach unten schieben */
    html body:has(#left .mod_logout) #left {
        padding-top: 135px !important;
        overflow: visible !important;
    }

    html body:has(#left .mod_logout)
    #left .mod_logout {
        display: block !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 0 18px !important;

        overflow: visible !important;
        box-sizing: border-box !important;
    }

    /* Überschrift und sämtliche Kontodaten sichtbar */
    html body:has(#left .mod_logout)
    #left .mod_logout > h3.bh,
    html body:has(#left .mod_logout)
    #left .mod_logout > ul.infos {
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;

        position: static !important;
        height: auto !important;
        max-height: none !important;

        overflow: visible !important;
    }

    html body:has(#left .mod_logout)
    #left .mod_logout > h3.bh {
        display: flex !important;
    }

    /* Button „Mein Kundenbereich“ entfernen */
    html body:has(#left .mod_logout)
    #left .mod_logout > a.button {
        display: none !important;
    }

    /* Logout danach über die gesamte Breite */
    html body:has(#left .mod_logout)
    #left .mod_logout > form {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    html body:has(#left .mod_logout)
    #left .mod_logout > form input.submit {
        display: flex !important;

        width: 100% !important;
        min-height: 62px !important;

        margin: 0 !important;
        padding: 11px 18px !important;

        font-style: normal !important;
        box-sizing: border-box !important;
    }

    /* Guthaben-Menüpunkt wieder einblenden */
    html body:has(#left .mod_logout)
    #left .nav.mod_simplenav
    ul.level_1 > li:has(> a[href="guthaben-aufladen"]) {
        display: block !important;
        order: -1 !important;

        grid-column: 1 / -1 !important;
        width: 100% !important;

        margin: 0 0 8px !important;
    }

    /* Guthaben aufladen als großer pinker Button */
    html body:has(#left .mod_logout)
    #left .nav.mod_simplenav
    a[href="guthaben-aufladen"] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 68px !important;

        margin: 0 !important;
        padding: 12px 20px !important;

        border: 0 !important;
        border-radius: 7px !important;
        background: #bc5377 !important;
        color: #ffffff !important;

        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 27px !important;
        font-weight: 700 !important;
        font-style: normal !important;
        line-height: 1.25 !important;
        text-align: center !important;
        text-decoration: none !important;

        box-sizing: border-box !important;
    }

    /* Die drei übrigen Menüpunkte nicht kursiv */
    html body:has(#left .mod_logout)
    #left .nav.mod_simplenav ul.level_1 > li > a {
        font-style: normal !important;
    }
}


/* ==================================================
   KUNDENBEREICH – KONTO, GUTHABEN, WILLKOMMEN, MENÜ
   ================================================== */

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

    /* Alte Überschrift „Kundenbereich“ entfernen */
    html body:has(#left .mod_logout)
    #left .nav.mod_simplenav > h3.bh {
        display: none !important;
    }

    /* Menübox ohne eigene Überschrift */
    html body:has(#left .mod_logout)
    #left .nav.mod_simplenav {
        display: block !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 0 26px !important;
        padding: 14px !important;

        border: 1px solid #e7c4cf !important;
        border-radius: 10px !important;
        background: #fffafb !important;

        overflow: visible !important;
        box-sizing: border-box !important;
    }

    html body:has(#left .mod_logout)
    #left .nav.mod_simplenav nav {
        display: block !important;
        width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    /* Menü als zweispaltiges Raster */
    html body:has(#left .mod_logout)
    #left .nav.mod_simplenav ul.level_1 {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 11px !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
        box-sizing: border-box !important;
    }

    /* Alle Menüpunkte zunächst ausblenden */
    html body:has(#left .mod_logout)
    #left .nav.mod_simplenav ul.level_1 > li {
        display: none !important;
    }

    /* Guthaben aufladen */
    html body:has(#left .mod_logout)
    #left .nav.mod_simplenav
    li:has(> a[href="guthaben-aufladen"]),

    /* Home */
    html body:has(#left .mod_logout)
    #left .nav.mod_simplenav
    li:has(> a[href="kunden-home"]),

    /* Meine Rückrufe */
    html body:has(#left .mod_logout)
    #left .nav.mod_simplenav
    li:has(> a[href="Meine Rückrufe"]),

    /* Meine Rufnummern */
    html body:has(#left .mod_logout)
    #left .nav.mod_simplenav
    li:has(> a[href="meine-rufnummern"]),

    /* Alle Beratungen */
    html body:has(#left .mod_logout)
    #left .nav.mod_simplenav
    li:has(> a[href="kunden-beratungen"]),

    /* E-Mail-Beratung */
    html body:has(#left .mod_logout)
    #left .nav.mod_simplenav
    li:has(> a[href="Email-Beratungen"]),

    /* Treuebonus */
    html body:has(#left .mod_logout)
    #left .nav.mod_simplenav
    li:has(> a[href="dein-treuebonus"]),

    /* Infos */
    html body:has(#left .mod_logout)
    #left .nav.mod_simplenav
    li:has(> a[href="Infos"]) {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 1. Guthaben aufladen direkt unter Mein Konto */
    html body:has(#left .mod_logout)
    #left .nav.mod_simplenav
    li:has(> a[href="guthaben-aufladen"]) {
        order: -2 !important;
        grid-column: 1 / -1 !important;
    }

    html body:has(#left .mod_logout)
    #left .nav.mod_simplenav
    a[href="guthaben-aufladen"] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 70px !important;

        padding: 12px 20px !important;

        border: 0 !important;
        border-radius: 7px !important;
        background: #bc5377 !important;
        color: #ffffff !important;

        font-size: 27px !important;
        font-weight: 700 !important;
        font-style: normal !important;
        line-height: 1.25 !important;
        text-align: center !important;
        text-decoration: none !important;

        box-sizing: border-box !important;
    }

    /* 2. Willkommen zwischen Guthabenbutton und Menü */
    html body:has(#left .mod_logout)
    #left .nav.mod_simplenav ul.level_1::before {
        content: "Willkommen in Deinem Kundenbereich" !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        order: -1 !important;
        grid-column: 1 / -1 !important;

        width: 100% !important;
        min-height: 66px !important;

        margin: 3px 0 1px !important;
        padding: 11px 20px !important;

        border-radius: 6px !important;
        background: #c9909f !important;
        color: #ffffff !important;

        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 30px !important;
        font-weight: 700 !important;
        font-style: normal !important;
        line-height: 1.3 !important;
        text-align: center !important;

        box-sizing: border-box !important;
    }

    /* Reihenfolge der sieben Menüpunkte */
    html body:has(#left .mod_logout)
    #left .nav li:has(> a[href="kunden-home"]) {
        order: 1 !important;
    }

    html body:has(#left .mod_logout)
    #left .nav li:has(> a[href="Meine Rückrufe"]) {
        order: 2 !important;
    }

    html body:has(#left .mod_logout)
    #left .nav li:has(> a[href="meine-rufnummern"]) {
        order: 3 !important;
    }

    html body:has(#left .mod_logout)
    #left .nav li:has(> a[href="kunden-beratungen"]) {
        order: 4 !important;
    }

    html body:has(#left .mod_logout)
    #left .nav li:has(> a[href="Email-Beratungen"]) {
        order: 5 !important;
    }

    html body:has(#left .mod_logout)
    #left .nav li:has(> a[href="dein-treuebonus"]) {
        order: 6 !important;
    }

    html body:has(#left .mod_logout)
    #left .nav li:has(> a[href="Infos"]) {
        order: 7 !important;
        grid-column: 1 / -1 !important;
    }

    /* Gestaltung der normalen Menüpunkte */
    html body:has(#left .mod_logout)
    #left .nav.mod_simplenav
    ul.level_1 > li:not(:has(> a[href="guthaben-aufladen"])) > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 68px !important;

        padding: 11px 14px !important;

        border: 1px solid #e7c4cf !important;
        border-radius: 7px !important;
        background: #ffffff !important;
        color: #7e3650 !important;

        font-size: 23px !important;
        font-weight: 700 !important;
        font-style: normal !important;
        line-height: 1.25 !important;
        text-align: center !important;
        text-decoration: none !important;
        white-space: normal !important;

        box-sizing: border-box !important;
    }

    /* Aktiver Menüpunkt */
    html body:has(#left .mod_logout)
    #left .nav.mod_simplenav li.active > a {
        background: #efdbe1 !important;
        color: #86163e !important;
    }

    /* Ursprünglichen Willkommensbalken im Hauptbereich entfernen */
    html body:has(#left .mod_logout)
    #main#main .cte_recent > h2.bh {
        display: none !important;
    }
}

/* ==================================================
   KONTO – LOGOUT KLEIN RECHTS, GUTHABEN DARUNTER
   ================================================== */

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

    /* „Mein Kundenbereich“ entfernen */
    html body:has(#left .mod_logout)
    #left .mod_logout > a.button {
        display: none !important;
    }

    /* Logoutbereich rechtsbündig */
    html body:has(#left .mod_logout)
    #left .mod_logout > form {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        width: 100% !important;
        height: auto !important;

        margin: 8px 0 0 !important;
        padding: 0 !important;

        text-align: right !important;
    }

    /* Kleiner Logoutbutton */
    html body:has(#left .mod_logout)
    #left .mod_logout > form input.submit {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 190px !important;
        min-width: 190px !important;
        max-width: 190px !important;

        min-height: 52px !important;
        height: 52px !important;

        margin: 0 !important;
        padding: 8px 16px !important;

        border: 0 !important;
        border-radius: 6px !important;
        background: #a0838b !important;
        color: #ffffff !important;

        font-size: 22px !important;
        font-weight: 700 !important;
        font-style: normal !important;
        line-height: 1.2 !important;
        text-align: center !important;

        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    /* Kundenmenübox direkt unter dem Kontobereich */
    html body:has(#left .mod_logout)
    #left .nav.mod_simplenav {
        margin-top: 12px !important;
    }

    /* Guthabenbutton an die erste Stelle */
    html body:has(#left .mod_logout)
    #left .nav.mod_simplenav
    li:has(> a[href="guthaben-aufladen"]) {
        display: block !important;
        order: -10 !important;

        grid-column: 1 / -1 !important;
        width: 100% !important;

        margin: 0 0 14px !important;
        padding: 0 !important;
    }

    /* Großer Guthabenbutton */
    html body:has(#left .mod_logout)
    #left .nav.mod_simplenav
    a[href="guthaben-aufladen"] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 72px !important;

        margin: 0 !important;
        padding: 13px 22px !important;

        border: 0 !important;
        border-radius: 7px !important;
        background: #bc5377 !important;
        color: #ffffff !important;

        font-family: SourceSansPro, Arial, sans-serif !important;
        font-size: 28px !important;
        font-weight: 700 !important;
        font-style: normal !important;
        line-height: 1.25 !important;
        text-align: center !important;
        text-decoration: none !important;

        box-sizing: border-box !important;
    }
}


/* ==================================================
   KORREKTUR – WILLKOMMEN GEHÖRT ZU DEN BERATUNGEN
   ================================================== */

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

    /* Falschen Willkommensbalken im Menü entfernen */
    html body:has(#left .mod_logout)
    #left .nav.mod_simplenav ul.level_1::before {
        content: none !important;
        display: none !important;
    }

    /* Im oberen Originalmenü nur Guthaben anzeigen */
    html body:has(#left .mod_logout)
    #left .nav.mod_simplenav ul.level_1 > li {
        display: none !important;
    }

    html body:has(#left .mod_logout)
    #left .nav.mod_simplenav
    li:has(> a[href="guthaben-aufladen"]) {
        display: block !important;
        grid-column: 1 / -1 !important;

        width: 100% !important;
        margin: 0 !important;
    }

    /* Box um den einzelnen Guthabenbutton kompakt machen */
    html body:has(#left .mod_logout)
    #left .nav.mod_simplenav {
        margin: 0 0 24px !important;
        padding: 10px !important;
    }

    /* Originalen Willkommensbalken wieder anzeigen */
    html body:has(#left .mod_logout)
    #main#main .cte_recent > h2.bh {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 68px !important;

        margin: 0 0 24px !important;
        padding: 11px 20px !important;

        background: #bc5377 !important;
        color: #ffffff !important;

        font-size: 31px !important;
        font-weight: 700 !important;
        font-style: normal !important;
        line-height: 1.3 !important;
        text-align: center !important;

        box-sizing: border-box !important;
    }

    /* Willkommen und Beratungsfotos direkt nach Guthaben */
    html body:has(#left .mod_logout)
    #main#main .cte_recent {
        order: 1 !important;

        width: 100% !important;
        margin: 0 0 26px !important;
    }

    /* Tagesbotschaft folgt später */
    html body:has(#left .mod_logout)
    #main#main .cte_text:has(a[href="tagesbotschaft"]) {
        order: 5 !important;
    }
}

/* ==================================================
   KUNDENBEREICH – MENÜ WIEDERHERSTELLEN
   ================================================== */

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

    /* Originales Kundenmenü anzeigen */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav {
        display: block !important;
        width: calc(100% - 28px) !important;
        max-width: none !important;
        margin: 16px auto 24px !important;
        padding: 12px !important;

        border: 1px solid #efd7df !important;
        border-radius: 8px !important;
        background: #fffafb !important;
        box-sizing: border-box !important;
    }

    /* Überschrift „Kundenbereich“ ausblenden */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav > h3.bh {
        display: none !important;
    }

    /* Menüliste als zwei Spalten */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1 {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    /* Zunächst alle alten Menüpunkte ausblenden */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1 > li {
        display: none !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Nur gewünschte Menüpunkte anzeigen */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1 > li:has(a[href="kunden-home"]),

    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1 > li:has(a[href="Meine Rückrufe"]),

    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1 > li:has(a[href="meine-rufnummern"]),

    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1 > li:has(a[href="kunden-beratungen"]),

    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1 > li:has(a[href="Email-Beratungen"]),

    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1 > li:has(a[href="dein-treuebonus"]),

    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1 > li:has(a[href="Infos"]) {
        display: block !important;
    }

    /* Gestaltung der Menübuttons */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1 > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 58px !important;
        padding: 10px 12px !important;

        border: 1px solid #efd7df !important;
        border-radius: 6px !important;
        background: #fffafb !important;

        color: #86163e !important;
        font-size: 20px !important;
        font-weight: 500 !important;
        font-style: normal !important;
        line-height: 1.25 !important;
        text-align: center !important;
        text-decoration: none !important;

        box-sizing: border-box !important;
    }

    /* Aktiver Menüpunkt */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1 > li.active > a {
        background: #efdbe1 !important;
        color: #86163e !important;
        font-weight: 700 !important;
    }

    /* „Infos rund um Sonalea“ über die gesamte Breite */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1
    > li:has(a[href="Infos"]) {
        grid-column: 1 / -1 !important;
    }
}

/* ===== Guthaben aufladen oberhalb des Kundenmenüs ===== */

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

    /* Menüpunkt wieder einblenden und über beide Spalten setzen */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1
    > li:has(> a[href="guthaben-aufladen"]) {
        display: block !important;
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        order: -10 !important;
        margin: 0 0 6px !important;
    }

    /* Großer Guthaben-Button */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1
    > li:has(> a[href="guthaben-aufladen"]) > a {
        min-height: 64px !important;
        padding: 14px 20px !important;

        border: 0 !important;
        border-radius: 6px !important;
        background: #bc5377 !important;
        color: #ffffff !important;

        font-size: 23px !important;
        font-weight: 700 !important;
        font-style: normal !important;
        text-transform: uppercase !important;
    }
}

/* ===== Konto und Kundenbereich: Abstand und Altrosa ===== */

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

    /* Gesamten Kontobereich etwas tiefer setzen */
    html body #wrapper#wrapper #container#container
    #left#left .mod_logout {
        margin-top: 30px !important;
    }

    /* Balken „Mein Konto“ */
    html body #wrapper#wrapper #container#container
    #left#left .mod_logout > h3.bh {
        background: #c9909f !important;
        color: #ffffff !important;
    }

    /* Balken „Willkommen in Deinem Kundenbereich“ */
    html body #wrapper#wrapper #container#container
    #main#main .cte_recent > h2.bh {
        background: #c9909f !important;
        color: #ffffff !important;
    }
}


/* ==================================================
   KUNDENBEREICH – SCHRIFT UND MENÜREIHENFOLGE
   ================================================== */

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

    /* Schrift innerhalb „Mein Konto“ */
    html body #wrapper#wrapper #container#container
    #left#left .mod_logout ul.infos > li,
    html body #wrapper#wrapper #container#container
    #left#left .mod_logout ul.infos > li a,
    html body #wrapper#wrapper #container#container
    #left#left .mod_logout ul.infos > li span {
        font-size: 21px !important;
        line-height: 1.35 !important;
    }

    /* Kontofelder etwas höher */
    html body #wrapper#wrapper #container#container
    #left#left .mod_logout ul.infos > li {
        min-height: 58px !important;
        padding: 13px 14px !important;
        box-sizing: border-box !important;
    }

    /* Logout größer und gut lesbar */
    html body #wrapper#wrapper #container#container
    #left#left .mod_logout form .submit {
        font-size: 20px !important;
        min-height: 48px !important;
        padding: 9px 20px !important;
    }

    /* Gewünschte Menüpunkte einblenden */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav li:has(> a[href="kunden-beratungen"]),

    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav li:has(> a[href="Meine Rückrufe"]),

    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav li:has(> a[href="Email-Beratungen"]),

    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav li:has(> a[href="meine-rufnummern"]),

    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav li:has(> a[href="♡-aktionen-treuebonus-♡"]),

    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav li:has(> a[href="dein-treuebonus"]),

    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav li:has(> a[href="Infos"]),

    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav li:has(> a[href="kunden-home"]) {
        display: block !important;
        grid-column: auto !important;
    }

    /* 1. Alle Beratungen */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav li:has(> a[href="kunden-beratungen"]) {
        order: 1 !important;
    }

    /* 2. Meine Rückrufe */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav li:has(> a[href="Meine Rückrufe"]) {
        order: 2 !important;
    }

    /* 3. E-Mail-Beratung */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav li:has(> a[href="Email-Beratungen"]) {
        order: 3 !important;
    }

    /* 4. Meine Rufnummern */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav li:has(> a[href="meine-rufnummern"]) {
        order: 4 !important;
    }

    /* 5. Newsletter-Einstellungen */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav li:has(> a[href="♡-aktionen-treuebonus-♡"]) {
        order: 5 !important;
    }

    /* 6. Treuebonus */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav li:has(> a[href="dein-treuebonus"]) {
        order: 6 !important;
    }

    /* 7. Infos */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav li:has(> a[href="Infos"]) {
        order: 7 !important;
    }

    /* 8. Home */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav li:has(> a[href="kunden-home"]) {
        order: 8 !important;
    }

    /* Guthaben bleibt immer ganz oben */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav li:has(> a[href="guthaben-aufladen"]) {
        order: -10 !important;
        grid-column: 1 / -1 !important;
    }

    /* Größere Schrift in allen Menübuttons */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1 > li > a {
        min-height: 66px !important;
        padding: 12px 10px !important;
        font-size: 22px !important;
        line-height: 1.25 !important;
    }

    /* Guthaben-Schrift noch deutlicher */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav
    li:has(> a[href="guthaben-aufladen"]) > a {
        font-size: 24px !important;
    }
}

/* ===== Logout oben rechts im „Mein Konto“-Balken ===== */

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

    /* Bezugspunkt für den Logout-Button */
    html body #wrapper#wrapper #container#container
    #left#left .mod_logout {
        position: relative !important;
    }

    /* Platz im Balken für den Button lassen */
    html body #wrapper#wrapper #container#container
    #left#left .mod_logout > h3.bh {
        min-height: 52px !important;
        padding: 10px 125px 10px 18px !important;
        box-sizing: border-box !important;
    }

    /* Logout-Formular oben rechts positionieren */
    html body #wrapper#wrapper #container#container
    #left#left .mod_logout > form {
        position: absolute !important;
        top: 6px !important;
        right: 10px !important;
        z-index: 10 !important;

        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Kompakter Logout-Button */
    html body #wrapper#wrapper #container#container
    #left#left .mod_logout > form .submit {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 108px !important;
        min-height: 40px !important;
        margin: 0 !important;
        padding: 6px 12px !important;

        border: 1px solid rgba(255,255,255,0.65) !important;
        border-radius: 5px !important;
        background: #a0838b !important;
        color: #ffffff !important;

        font-size: 17px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        cursor: pointer !important;
    }
}

/* ==================================================
   KONTO UND MENÜ – GRÖSSERE SCHRIFT / LETZTE KORREKTUR
   ================================================== */

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

    /* „Mein Konto“ trotz Logout exakt mittig */
    html body #wrapper#wrapper #container#container
    #left#left .mod_logout > h3.bh {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 58px !important;
        padding: 10px 125px !important;

        font-size: 27px !important;
        line-height: 1.2 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* Kontofelder größer */
    html body #wrapper#wrapper #container#container
    #left#left .mod_logout ul.infos {
        gap: 10px !important;
    }

    html body #wrapper#wrapper #container#container
    #left#left .mod_logout ul.infos > li {
        display: flex !important;
        align-items: center !important;

        min-height: 70px !important;
        padding: 14px 16px !important;

        font-size: 25px !important;
        line-height: 1.25 !important;
    }

    /* Auch Links und dynamische Werte vergrößern */
    html body #wrapper#wrapper #container#container
    #left#left .mod_logout ul.infos > li *,
    html body #wrapper#wrapper #container#container
    #left#left .mod_logout ul.infos > li a,
    html body #wrapper#wrapper #container#container
    #left#left .mod_logout ul.infos > li span {
        font-size: 25px !important;
        line-height: 1.25 !important;
    }

    /* Symbole im Konto größer */
    html body #wrapper#wrapper #container#container
    #left#left .mod_logout ul.infos > li i {
        width: 28px !important;
        margin-right: 9px !important;
        font-size: 23px !important;
        text-align: center !important;
    }

    /* Menütexte deutlich größer */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1 > li > a {
        min-height: 74px !important;
        padding: 14px 12px !important;

        font-size: 25px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
    }

    /* Infos und Home jeweils eine halbe Spalte */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1
    > li:has(> a[href="Infos"]),

    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1
    > li:has(> a[href="kunden-home"]) {
        display: block !important;
        grid-column: auto !important;
        width: auto !important;
    }

    /* Reihenfolge der letzten beiden Buttons */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1
    > li:has(> a[href="Infos"]) {
        order: 7 !important;
    }

    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1
    > li:has(> a[href="kunden-home"]) {
        order: 8 !important;
    }

    /* Guthaben-Button ebenfalls größer */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav
    li:has(> a[href="guthaben-aufladen"]) > a {
        min-height: 72px !important;
        font-size: 26px !important;
    }
}

/* ===== Mein-Konto-Balken und Logout sauber ausrichten ===== */

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

    /* Balken */
    html body #wrapper#wrapper #container#container
    #left#left .mod_logout > h3.bh {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        height: 62px !important;
        min-height: 62px !important;
        margin: 0 !important;
        padding: 0 !important;

        background: #c9909f !important;
        color: #ffffff !important;

        font-size: 27px !important;
        font-weight: 700 !important;
        line-height: 62px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* Logout-Formular rechts im Balken */
    html body #wrapper#wrapper #container#container
    #left#left .mod_logout > form {
        position: absolute !important;
        top: 8px !important;
        right: 9px !important;
        z-index: 20 !important;

        width: 112px !important;
        height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Logout-Button */
    html body #wrapper#wrapper #container#container
    #left#left .mod_logout > form
    input.submit[name="logout"] {
        display: block !important;

        width: 112px !important;
        height: 46px !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 8px !important;

        border: 1px solid rgba(255,255,255,0.75) !important;
        border-radius: 5px !important;
        background: #a0838b !important;
        color: #ffffff !important;

        font-family: inherit !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        line-height: 46px !important;
        text-align: center !important;
        appearance: none !important;
    }
}

/* ===== Logout kompakter im Kontobalken ===== */

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

    html body #wrapper#wrapper #container#container
    #left#left .mod_logout > form {
        top: 12px !important;
        right: 10px !important;

        width: 84px !important;
        height: 38px !important;
    }

    html body #wrapper#wrapper #container#container
    #left#left .mod_logout > form
    input.submit[name="logout"] {
        width: 84px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 6px !important;

        font-size: 15px !important;
        line-height: 38px !important;
    }
}

/* ==================================================
   LETZTE ABSTANDSKORREKTUR – KONTO UND GUTHABEN
   ================================================== */

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

    /* Logout kleiner und weiter nach links */
    html body #wrapper#wrapper #container#container
    #left#left .mod_logout > form {
        top: 7px !important;
        right: 20px !important;

        width: 76px !important;
        height: 30px !important;
    }

    html body #wrapper#wrapper #container#container
    #left#left .mod_logout > form
    input.submit[name="logout"] {
        width: 76px !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 5px !important;

        border-radius: 4px !important;
        font-size: 14px !important;
        line-height: 30px !important;
    }

    /* Luft zwischen „Mein Konto“ und den Kontodaten */
    html body #wrapper#wrapper #container#container
    #left#left .mod_logout ul.infos {
        margin-top: 16px !important;
    }

    /* Mehr Abstand nach dem Guthaben-Button */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1
    > li:has(> a[href="guthaben-aufladen"]) {
        margin-bottom: 14px !important;
    }
}

/* ===== Logout endgültig im „Mein Konto“-Balken ===== */

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

    html body #wrapper#wrapper #container#container
    #left#left .mod_logout {
        position: relative !important;
    }

    /* Mein Konto bleibt exakt mittig */
    html body #wrapper#wrapper #container#container
    #left#left .mod_logout > h3.bh {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 54px !important;
        margin: 0 !important;
        padding: 0 !important;

        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* Formular vollständig innerhalb des Balkens */
    html body #wrapper#wrapper #container#container
    #left#left .mod_logout > form {
        position: absolute !important;
        top: 7px !important;
        right: 30px !important;
        z-index: 20 !important;

        width: 92px !important;
        min-width: 92px !important;
        max-width: 92px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    /* Logout-Button: weder zu schmal noch zu lang */
    html body #wrapper#wrapper #container#container
    #left#left .mod_logout > form
    input[type="submit"].submit[name="logout"] {
        display: block !important;

        width: 92px !important;
        min-width: 92px !important;
        max-width: 92px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;

        margin: 0 !important;
        padding: 0 8px !important;

        border: 1px solid rgba(255,255,255,0.7) !important;
        border-radius: 4px !important;
        background: #a0838b !important;
        color: #ffffff !important;

        font-size: 21px !important;
        font-weight: 700 !important;
        line-height: 38px !important;
        text-align: center !important;

        transform: none !important;
        box-sizing: border-box !important;
        appearance: none !important;
    }
}

/* ===== Alle Kundenmenü-Buttons hellrosa ===== */

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

    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1
    > li:not(:has(> a[href="guthaben-aufladen"])) > a {
        background: #efdbe1 !important;
        color: #86163e !important;
        border-color: #e7c4cf !important;
    }
}

/* ==================================================
   MEINE LETZTEN BERATUNGEN – FINGER-SCROLLEN
   ================================================== */

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

    html body #main#main .cte_recent > ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 16px !important;

        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 12px 18px 22px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x proximity !important;
        scroll-padding-left: 18px !important;
        -webkit-overflow-scrolling: touch !important;

        scrollbar-width: none !important;
        box-sizing: border-box !important;
    }

    html body #main#main .cte_recent > ul::-webkit-scrollbar {
        display: none !important;
    }

    /* Einzelne Beratungskarten */
    html body #main#main .cte_recent > ul > li {
        display: block !important;
        flex: 0 0 42% !important;
        width: 42% !important;
        min-width: 210px !important;
        max-width: 260px !important;

        margin: 0 !important;
        padding: 16px 12px !important;

        border: 1px solid #efd7df !important;
        border-radius: 8px !important;
        background: #fffafb !important;

        text-align: center !important;
        scroll-snap-align: start !important;
        box-sizing: border-box !important;
    }

    /* Beraterfoto */
    html body #main#main .cte_recent > ul > li > img {
        display: block !important;
        width: 120px !important;
        height: 145px !important;
        margin: 0 auto 10px !important;

        border-radius: 7px !important;
        object-fit: cover !important;
    }

    /* Sämtliche Texte besser lesbar */
    html body #main#main .cte_recent > ul > li,
    html body #main#main .cte_recent > ul > li a,
    html body #main#main .cte_recent > ul > li span {
        font-size: 20px !important;
        line-height: 1.35 !important;
    }

    html body #main#main .cte_recent > ul > li h4,
    html body #main#main .cte_recent > ul > li h4 a {
        margin: 5px 0 !important;
        font-size: 23px !important;
        font-weight: 700 !important;
    }
}

/* ==================================================
   ZUSATZMINUTEN UND OFFENE BEWERTUNGEN – MOBIL
   ================================================== */

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

    /* Gesamte Bereiche */
    html body #main#main .freemin,
    html body #main#main .unrated {
        width: calc(100% - 30px) !important;
        margin: 28px auto !important;
        box-sizing: border-box !important;
    }

    /* Tabellenbereich mit Finger scrollbar */
    html body #main#main .freemin .table,
    html body #main#main .unrated .table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 6px 0 14px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;

        box-sizing: border-box !important;
    }

    /* Genügend Tabellenbreite für lesbare Inhalte */
    html body #main#main .freemin table,
    html body #main#main .unrated table {
        width: 920px !important;
        min-width: 920px !important;
        table-layout: auto !important;
        border-collapse: separate !important;
        border-spacing: 0 4px !important;
    }

    /* Tabellenüberschriften */
    html body #main#main .freemin table th,
    html body #main#main .unrated table th {
        padding: 12px 14px !important;

        background: #efdbe1 !important;
        color: #86163e !important;

        font-size: 20px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: left !important;
        white-space: nowrap !important;
    }

    /* Tabelleninhalte */
    html body #main#main .freemin table td,
    html body #main#main .unrated table td {
        padding: 12px 14px !important;

        color: #68424f !important;
        font-size: 20px !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;
        text-align: left !important;
        white-space: nowrap !important;

        border-bottom: 1px solid #f0dce2 !important;
        background: #fffafb !important;
    }

    /* Links deutlich anzeigen */
    html body #main#main .freemin table td a,
    html body #main#main .unrated table td a {
        color: #86163e !important;
        font-size: 20px !important;
        font-weight: 500 !important;
        text-decoration: underline !important;
    }

    /* Status „Jetzt verfügbar“ */
    html body #main#main .freemin table .green {
        color: #638a68 !important;
        font-size: 20px !important;
        font-weight: 500 !important;
    }

    /* Überschriftenbalken */
    html body #main#main .freemin > h2.bh,
    html body #main#main .unrated > h2.bh {
        min-height: 58px !important;
        padding: 11px 16px !important;

        background: #c9909f !important;
        color: #ffffff !important;

        font-size: 27px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
}

/* „Jetzt bewerten“ in „Bewerten“ ändern */

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

    html body #main#main
    .unrated table td:last-child > a {
        font-size: 0 !important;
    }

    html body #main#main
    .unrated table td:last-child > a::after {
        content: "Bewerten" !important;
        font-size: 20px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
    }
}

/* „Jetzt anrufen“ in „Anrufen“ ändern */

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

    html body #main#main
    .freemin table td:last-child > a {
        font-size: 0 !important;
    }

    html body #main#main
    .freemin table td:last-child > a::after {
        content: "Anrufen" !important;
        font-size: 20px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
    }
}

/* ===== Konto-Inhalte und Guthaben-Button größer ===== */

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

    /* Kontofelder höher */
    html body #wrapper#wrapper #container#container
    #left#left .mod_logout ul.infos > li {
        min-height: 78px !important;
        padding: 16px 18px !important;
    }

    /* Sämtliche Texte innerhalb der Kontofelder */
    html body #wrapper#wrapper #container#container
    #left#left .mod_logout ul.infos > li,
    html body #wrapper#wrapper #container#container
    #left#left .mod_logout ul.infos > li a,
    html body #wrapper#wrapper #container#container
    #left#left .mod_logout ul.infos > li span {
        font-size: 28px !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;
    }

    /* Konto-Icons größer */
    html body #wrapper#wrapper #container#container
    #left#left .mod_logout ul.infos > li i {
        width: 36px !important;
        min-width: 36px !important;
        margin-right: 11px !important;

        font-size: 30px !important;
        line-height: 1 !important;
        text-align: center !important;
    }

    /* Guthaben-aufladen-Button */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav
    li:has(> a[href="guthaben-aufladen"]) > a {
        min-height: 78px !important;
        padding: 16px 20px !important;

        font-size: 29px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
    }
}

/* ===== Telefonie-Hinweise etwas kleiner darstellen ===== */

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

    /* Überschriftenbalken */
    html body #main#main
    .unrated ~ .cte_text > h2.bh {
        min-height: 48px !important;
        padding: 9px 14px !important;

        font-size: 23px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
    }

    /* Gesamter Text */
    html body #main#main
    .unrated ~ .cte_text > p {
        margin: 0 0 14px !important;

        font-size: 18px !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
    }

    /* Fest eingetragene Schriftgrößen überschreiben */
    html body #main#main
    .unrated ~ .cte_text > p span,
    html body #main#main
    .unrated ~ .cte_text > p strong {
        font-size: 18px !important;
        line-height: 1.5 !important;
    }
}

/* ==================================================
   TELEFONIE-HINWEISE – GEZIELTE SCHRIFTKORREKTUR
   ================================================== */

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

    /* Beide betroffenen Blöcke */
    html body #wrapper#wrapper #container#container #main#main
    .cte_text:has(> p span[style*="font-size: 14px"]),

    html body #wrapper#wrapper #container#container #main#main
    .cte_text:has(> p span[style*="font-size: 14px"])
    + .cte_text {
        font-size: 18px !important;
        line-height: 1.5 !important;
    }

    /* Überschriften */
    html body #wrapper#wrapper #container#container #main#main
    .cte_text:has(> p span[style*="font-size: 14px"]) > h2.bh,

    html body #wrapper#wrapper #container#container #main#main
    .cte_text:has(> p span[style*="font-size: 14px"])
    + .cte_text > h2.bh {
        min-height: 46px !important;
        padding: 8px 12px !important;

        font-size: 22px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
    }

    /* Absätze */
    html body #wrapper#wrapper #container#container #main#main
    .cte_text:has(> p span[style*="font-size: 14px"]) > p,

    html body #wrapper#wrapper #container#container #main#main
    .cte_text:has(> p span[style*="font-size: 14px"])
    + .cte_text > p {
        margin: 0 0 12px !important;

        font-size: 18px !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
    }

    /* Alle Formatierungen innerhalb der Absätze */
    html body #wrapper#wrapper #container#container #main#main
    .cte_text:has(> p span[style*="font-size: 14px"]) > p *,

    html body #wrapper#wrapper #container#container #main#main
    .cte_text:has(> p span[style*="font-size: 14px"])
    + .cte_text > p * {
        font-size: 18px !important;
        line-height: 1.5 !important;
    }
}

/* ==================================================
   NEUKUNDEN – RUFNUMMER AKTIVIEREN
   ================================================== */

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

    /* Gesamter Hinweisbereich */
    html body #wrapper#wrapper #container#container #main#main
    .block:has(input[value="Rufnummer jetzt bestätigen"]) {
        width: calc(100% - 30px) !important;
        margin: 24px auto 34px !important;
        padding: 0 22px 26px !important;

        border: 1px solid #efd7df !important;
        border-radius: 8px !important;
        background: #fffafb !important;
        box-sizing: border-box !important;
    }

    /* Überschrift */
    html body #wrapper#wrapper #container#container #main#main
    .block:has(input[value="Rufnummer jetzt bestätigen"])
    :is(h1, h2, h3).bh {
        min-height: 58px !important;
        margin: 0 -22px 22px !important;
        padding: 11px 18px !important;

        background: #c9909f !important;
        color: #ffffff !important;

        font-size: 27px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* Erklärungstext */
    html body #wrapper#wrapper #container#container #main#main
    .block:has(input[value="Rufnummer jetzt bestätigen"]) p {
        margin: 0 0 16px !important;

        color: #68424f !important;
        font-size: 21px !important;
        font-weight: 400 !important;
        line-height: 1.55 !important;
    }

    /* Formular */
    html body #wrapper#wrapper #container#container #main#main
    .block:has(input[value="Rufnummer jetzt bestätigen"]) form {
        width: 100% !important;
        margin: 20px 0 12px !important;
    }

    /* Hauptbutton */
    html body #wrapper#wrapper #container#container #main#main
    input.submit[value="Rufnummer jetzt bestätigen"] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 62px !important;
        margin: 0 0 12px !important;
        padding: 12px 18px !important;

        border: 0 !important;
        border-radius: 6px !important;
        background: #bc5377 !important;
        color: #ffffff !important;

        font-size: 22px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: center !important;
        box-sizing: border-box !important;
        appearance: none !important;
    }

    /* Zweiter Button */
    html body #wrapper#wrapper #container#container #main#main
    a.button[href="meine-rufnummern"] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 58px !important;
        margin: 12px 0 0 !important;
        padding: 11px 18px !important;

        border: 1px solid #d9b7c1 !important;
        border-radius: 6px !important;
        background: #efdbe1 !important;
        color: #86163e !important;

        font-size: 21px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        text-align: center !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }
}

/* ==================================================
   KEIN GUTHABEN – HINWEISBOX
   ================================================== */

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

    /* Gesamter Guthaben-Hinweis */
    html body #wrapper#wrapper #container#container #main#main
    .block:has(a.button[href="7"]) {
        width: calc(100% - 30px) !important;
        margin: 26px auto 34px !important;
        padding: 0 22px 26px !important;

        border: 1px solid #efd7df !important;
        border-radius: 8px !important;
        background: #fffafb !important;
        box-sizing: border-box !important;
    }

    /* Überschrift „Guthaben“ */
    html body #wrapper#wrapper #container#container #main#main
    .block:has(a.button[href="7"]) :is(h1, h2, h3).bh {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: calc(100% + 44px) !important;
        min-height: 58px !important;
        margin: 0 -22px 22px !important;
        padding: 10px 16px !important;

        background: #c9909f !important;
        color: #ffffff !important;

        font-size: 27px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* Guthaben-Text */
    html body #wrapper#wrapper #container#container #main#main
    .block:has(a.button[href="7"]) p {
        margin: 0 0 20px !important;

        color: #68424f !important;
        font-size: 26px !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }

    /* Button „Jetzt Guthaben aufladen“ */
    html body #wrapper#wrapper #container#container #main#main
    a.button[href="7"] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 64px !important;
        margin: 0 auto !important;
        padding: 13px 18px !important;

        border: 0 !important;
        border-radius: 6px !important;
        background: #bc5377 !important;
        color: #ffffff !important;

        font-size: 28px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: center !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }
}

/* ==================================================
   MOBILE BASIS – EINGELOGGTER KUNDENBEREICH
   Gilt für Formulare und allgemeine Inhaltsblöcke
   ================================================== */

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

    /* Einheitliche Berechnung */
    html body:has(#left .mod_logout)
    #main *,
    html body:has(#left .mod_logout)
    #main *::before,
    html body:has(#left .mod_logout)
    #main *::after {
        box-sizing: border-box;
    }

    /* Normale Inhaltsblöcke */
    html body:has(#left .mod_logout)
    #main > .inside > .block:not(.cte_recent):not(.freemin):not(.unrated) {
        width: calc(100% - 30px) !important;
        max-width: none !important;
        margin: 24px auto 32px !important;
    }

    /* Überschriftenbalken */
    html body:has(#left .mod_logout)
    #main > .inside > .block > :is(h1, h2, h3).bh {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 56px !important;
        margin: 0 0 22px !important;
        padding: 10px 16px !important;

        background: #c9909f !important;
        color: #ffffff !important;

        font-size: 27px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    /* Allgemeine Texte */
    html body:has(#left .mod_logout)
    #main > .inside > .block:not(.cte_recent):not(.freemin):not(.unrated)
    > p {
        font-size: 21px !important;
        font-weight: 400 !important;
        line-height: 1.55 !important;
    }

    /* Fest eingetragene kleine Schriftgrößen überschreiben */
    html body:has(#left .mod_logout)
    #main > .inside > .block:not(.cte_recent):not(.freemin):not(.unrated)
    > p span,
    html body:has(#left .mod_logout)
    #main > .inside > .block:not(.cte_recent):not(.freemin):not(.unrated)
    > p strong,
    html body:has(#left .mod_logout)
    #main > .inside > .block:not(.cte_recent):not(.freemin):not(.unrated)
    > p em {
        font-size: inherit !important;
        line-height: inherit !important;
    }

    /* Formularzeilen */
    html body:has(#left .mod_logout)
    #main form .row {
        display: block !important;
        width: 100% !important;
        margin: 0 0 20px !important;
    }

    /* Beschriftungen */
    html body:has(#left .mod_logout)
    #main form label {
        display: block !important;
        margin: 0 0 8px !important;

        color: #68424f !important;
        font-size: 21px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
    }

    /* Textfelder, Passwortfelder und Auswahlfelder */
    html body:has(#left .mod_logout)
    #main form input:is(
        [type="text"],
        [type="email"],
        [type="password"],
        [type="tel"],
        [type="number"]
    ),
    html body:has(#left .mod_logout)
    #main form select,
    html body:has(#left .mod_logout)
    #main form textarea {
        display: block !important;
        width: 100% !important;
        min-height: 58px !important;
        margin: 0 !important;
        padding: 12px 14px !important;

        border: 1px solid #e7c4cf !important;
        border-radius: 6px !important;
        background: #ffffff !important;
        color: #68424f !important;

        font-family: inherit !important;
        font-size: 21px !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;
    }

    html body:has(#left .mod_logout)
    #main form textarea {
        min-height: 180px !important;
        resize: vertical !important;
    }

    /* Checkboxen und Radiobuttons */
    html body:has(#left .mod_logout)
    #main form input:is([type="checkbox"], [type="radio"]) {
        width: 25px !important;
        height: 25px !important;
        margin: 3px 10px 0 0 !important;
        vertical-align: top !important;
    }

    html body:has(#left .mod_logout)
    #main form .row.check {
        display: flex !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    html body:has(#left .mod_logout)
    #main form .row.check label {
        flex: 1 1 auto !important;
        margin: 0 !important;
    }

    /* Normale Formularbuttons */
    html body:has(#left .mod_logout)
    #main form input.submit:not([name="logout"]) {
        min-height: 60px !important;
        padding: 12px 20px !important;

        border: 0 !important;
        border-radius: 6px !important;
        background: #bc5377 !important;
        color: #ffffff !important;

        font-family: inherit !important;
        font-size: 23px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: center !important;
        appearance: none !important;
    }

    /* Hilfetexte */
    html body:has(#left .mod_logout)
    #main form .help,
    html body:has(#left .mod_logout)
    #main form .help p {
        font-size: 18px !important;
        font-weight: 400 !important;
        line-height: 1.45 !important;
    }
}

/* ==================================================
   MEINE RUFNUMMERN – GRÖSSERE DARSTELLUNG
   ================================================== */

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

    /* Rufnummern-Bereich */
    html body #wrapper#wrapper #container#container #main#main
    .block:has(
        a.button.create[href="meine-rufnummern/action/create"]
    ) {
        width: calc(100% - 30px) !important;
        margin: 26px auto 34px !important;
        box-sizing: border-box !important;
    }

    /* Überschrift „Rufnummern“ */
    html body #wrapper#wrapper #container#container #main#main
    .block:has(
        a.button.create[href="meine-rufnummern/action/create"]
    ) > :is(h1, h2, h3).bh {
        min-height: 58px !important;
        padding: 10px 16px !important;

        background: #c9909f !important;
        color: #ffffff !important;

        font-size: 27px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    /* Button „Rufnummer hinzufügen“ */
    html body #wrapper#wrapper #container#container #main#main
    a.button.create[href="meine-rufnummern/action/create"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-height: 54px !important;
        margin: 8px 0 18px !important;
        padding: 10px 20px !important;

        border: 0 !important;
        border-radius: 5px !important;
        background: #bc5377 !important;
        color: #ffffff !important;

        font-size: 21px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-decoration: none !important;
    }

    /* Tabellencontainer bei Bedarf mit dem Finger scrollbar */
    html body #wrapper#wrapper #container#container #main#main
    .block:has(
        a.button.create[href="meine-rufnummern/action/create"]
    ) .table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-bottom: 12px !important;

        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        box-sizing: border-box !important;
    }

    /* Tabelle */
    html body #wrapper#wrapper #container#container #main#main
    .block:has(
        a.button.create[href="meine-rufnummern/action/create"]
    ) table {
        width: 100% !important;
        min-width: 760px !important;
        border-collapse: separate !important;
        border-spacing: 0 4px !important;
    }

    /* Tabellenüberschriften */
    html body #wrapper#wrapper #container#container #main#main
    .block:has(
        a.button.create[href="meine-rufnummern/action/create"]
    ) th {
        padding: 11px 13px !important;

        background: #efdbe1 !important;
        color: #86163e !important;

        font-size: 19px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        text-align: left !important;
        white-space: nowrap !important;
    }

    /* Rufnummern und übrige Tabelleninhalte */
    html body #wrapper#wrapper #container#container #main#main
    .block:has(
        a.button.create[href="meine-rufnummern/action/create"]
    ) td,
    html body #wrapper#wrapper #container#container #main#main
    .block:has(
        a.button.create[href="meine-rufnummern/action/create"]
    ) td a,
    html body #wrapper#wrapper #container#container #main#main
    .block:has(
        a.button.create[href="meine-rufnummern/action/create"]
    ) td span {
        padding: 11px 13px !important;

        font-size: 20px !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;
        white-space: nowrap !important;
    }
}

/* ==================================================
   KUNDENMENÜ – NEUE ENDGÜLTIGE ANORDNUNG
   ================================================== */

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

    /* E-Mail-Beratung ausblenden */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1
    > li:has(> a[href="Email-Beratungen"]) {
        display: none !important;
    }

    /* Benötigte Menüpunkte anzeigen */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1
    > li:has(> a[href="kunden-home"]),

    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1
    > li:has(> a[href="guthaben-aufladen"]),

    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1
    > li:has(> a[href="kunden-beratungen"]),

    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1
    > li:has(> a[href="Meine Rückrufe"]),

    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1
    > li:has(> a[href="♡-aktionen-treuebonus-♡"]),

    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1
    > li:has(> a[href="meine-rufnummern"]),

    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1
    > li:has(> a[href="dein-treuebonus"]),

    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1
    > li:has(> a[href="Infos"]) {
        display: block !important;
        grid-column: auto !important;
        width: auto !important;
        margin: 0 !important;
    }

    /* 1. Home */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav
    li:has(> a[href="kunden-home"]) {
        order: 1 !important;
    }

    /* 2. Guthaben aufladen */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav
    li:has(> a[href="guthaben-aufladen"]) {
        order: 2 !important;
        grid-column: auto !important;
        margin: 0 !important;
    }

    /* 3. Alle Beratungen */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav
    li:has(> a[href="kunden-beratungen"]) {
        order: 3 !important;
    }

    /* 4. Meine Rückrufe */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav
    li:has(> a[href="Meine Rückrufe"]) {
        order: 4 !important;
    }

    /* 5. Newsletter-Einstellungen */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav
    li:has(> a[href="♡-aktionen-treuebonus-♡"]) {
        order: 5 !important;
    }

    /* 6. Meine Rufnummern */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav
    li:has(> a[href="meine-rufnummern"]) {
        order: 6 !important;
    }

    /* 7. Treuebonus */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav
    li:has(> a[href="dein-treuebonus"]) {
        order: 7 !important;
    }

    /* 8. Infos */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav
    li:has(> a[href="Infos"]) {
        order: 8 !important;
        grid-column: auto !important;
    }

    /* Home und Guthaben gleich groß */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav
    li:has(> a[href="kunden-home"]) > a,

    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav
    li:has(> a[href="guthaben-aufladen"]) > a {
        width: 100% !important;
        min-height: 74px !important;
        height: 74px !important;
        margin: 0 !important;
        padding: 12px 10px !important;

        font-size: 24px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-transform: none !important;
        box-sizing: border-box !important;
    }

    /* Guthaben weiterhin farblich hervorheben */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav
    li:has(> a[href="guthaben-aufladen"]) > a {
        border-color: #bc5377 !important;
        background: #bc5377 !important;
        color: #ffffff !important;
    }
}

/* ===== Newsletter-Einstellungen sicher einblenden ===== */

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

    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1
    > li:nth-child(10) {
        display: block !important;
        grid-column: auto !important;
        width: auto !important;
        margin: 0 !important;
        order: 5 !important;
    }

    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1
    > li:nth-child(10) > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 74px !important;
        padding: 12px 10px !important;

        background: #efdbe1 !important;
        color: #86163e !important;
        border: 1px solid #e7c4cf !important;
        border-radius: 6px !important;

        font-size: 24px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        text-align: center !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }
}

/* ===== Treuebonus – nur Text größer ===== */

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

    html body #wrapper#wrapper #container#container #main#main
    .cte_text:has(> h2.bh):has(img) > p {
        font-size: 28px !important;
        line-height: 1.55 !important;
    }

    /* Inline eingetragene kleinere Schrift überschreiben */
    html body #wrapper#wrapper #container#container #main#main
    .cte_text:has(> h2.bh):has(img) > p span,
    html body #wrapper#wrapper #container#container #main#main
    .cte_text:has(> h2.bh):has(img) > p strong,
    html body #wrapper#wrapper #container#container #main#main
    .cte_text:has(> h2.bh):has(img) > p em {
        font-size: 28px !important;
        line-height: 1.55 !important;
    }
}

/* ==================================================
   KUNDENBEREICH – KONTO UND MENÜ IMMER OBEN
   ================================================== */

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

    /* Nur auf eingeloggten Kundenseiten */
    html body:has(#left .mod_logout)
    #container {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        width: 100% !important;
        max-width: 100% !important;
    }

    /* Konto und Menü oberhalb des Seiteninhalts */
    html body:has(#left .mod_logout)
    #left {
        display: block !important;
        order: 1 !important;

        position: relative !important;
        float: none !important;
        clear: both !important;

        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body:has(#left .mod_logout)
    #left > .inside {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Mein Konto zuerst */
    html body:has(#left .mod_logout)
    #left .mod_logout {
        display: block !important;
        order: 1 !important;
        width: calc(100% - 30px) !important;
        margin: 30px auto 14px !important;
    }

    /* Menü immer direkt unter Mein Konto */
    html body:has(#left .mod_logout)
    #left .nav.mod_simplenav {
        display: block !important;
        order: 2 !important;
        width: calc(100% - 30px) !important;
        margin: 0 auto 28px !important;
    }

    /* Ausgewählter Seiteninhalt danach */
    html body:has(#left .mod_logout)
    #main {
        display: block !important;
        order: 2 !important;

        float: none !important;
        clear: both !important;

        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* Home sichtbar in „Kundenbereich“ umbenennen */
    html body:has(#left .mod_logout)
    #left .nav.mod_simplenav
    a[href="kunden-home"] {
        font-size: 0 !important;
    }

    html body:has(#left .mod_logout)
    #left .nav.mod_simplenav
    a[href="kunden-home"]::after {
        content: "Kundenbereich" !important;

        display: block !important;
        color: inherit !important;

        font-size: 24px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: center !important;
    }
}


/* ===== Abstand zwischen Header und festem Kundenbereich ===== */

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

    html body:has(#left .mod_logout)
    #container #left {
        padding-top: 36px !important;
        box-sizing: border-box !important;
    }

    /* Frühere obere Abstände zurücksetzen */
    html body:has(#left .mod_logout)
    #container #left .mod_logout {
        margin-top: 0 !important;
    }
}

/* ===== Home nur in „Kundenbereich“ umbenennen ===== */

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

    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav
    a[href="kunden-home"] {
        font-size: 0 !important;
    }

    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav
    a[href="kunden-home"]::after {
        content: "Kundenbereich" !important;

        display: block !important;
        color: inherit !important;
        font-size: 24px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: center !important;
    }
}

/* ===== Gesamten Kundenbereich unter dem Header absenken ===== */

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

    html body:has(#left .mod_logout)
    #wrapper#wrapper #container#container {
        padding-top: 55px !important;
        box-sizing: border-box !important;
    }

    /* Den vorherigen Abstand am #left wieder entfernen */
    html body:has(#left .mod_logout)
    #wrapper#wrapper #container#container #left#left {
        padding-top: 0 !important;
    }

    html body:has(#left .mod_logout)
    #wrapper#wrapper #container#container
    #left#left .mod_logout {
        margin-top: 0 !important;
    }
}

/* ===== Mein Konto vollständig unter den Sticky-Header setzen ===== */

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

    html body:has(#left .mod_logout)
    #wrapper#wrapper #container#container
    #left#left .mod_logout {
        margin-top: 130px !important;
    }
}

/* ==================================================
   KUNDENMENÜ UND RUFNUMMERN – KORREKTUREN
   ================================================== */

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

    /* ----------------------------------------------
       Home ausschließlich als „Kundenbereich“
       ---------------------------------------------- */

    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1
    > li:has(> a[href="kunden-home"]) > a {
        position: relative !important;
        overflow: hidden !important;

        color: transparent !important;
        font-size: 0 !important;
        line-height: 0 !important;
        text-indent: -9999px !important;
    }

    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1
    > li:has(> a[href="kunden-home"]) > a::after {
        content: "Kundenbereich" !important;

        position: absolute !important;
        inset: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        color: #86163e !important;
        font-size: 24px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-indent: 0 !important;
        text-align: center !important;
    }

    /* ----------------------------------------------
       Guthaben aufladen in Altrosa
       ---------------------------------------------- */

    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1
    > li:has(> a[href="guthaben-aufladen"]) > a {
        background: #c9909f !important;
        border-color: #c9909f !important;
        color: #ffffff !important;
    }

    /* ----------------------------------------------
       Seite „Meine Rufnummern“ größer
       Der eindeutige Hinzufügen-Button erkennt die Seite
       ---------------------------------------------- */

    html body #main#main:has(
        a.button.create[href="meine-rufnummern/action/create"]
    ) :is(h1, h2, h3).bh {
        font-size: 29px !important;
        line-height: 1.3 !important;
    }

    /* Button Rufnummer hinzufügen */
    html body #main#main:has(
        a.button.create[href="meine-rufnummern/action/create"]
    ) a.button.create {
        min-height: 58px !important;
        padding: 12px 20px !important;

        font-size: 22px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
    }

    /* Tabelle mit dem Finger scrollbar */
    html body #main#main:has(
        a.button.create[href="meine-rufnummern/action/create"]
    ) .table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;

        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    html body #main#main:has(
        a.button.create[href="meine-rufnummern/action/create"]
    ) table {
        width: 100% !important;
        min-width: 820px !important;
    }

    /* Tabellenüberschriften */
    html body #main#main:has(
        a.button.create[href="meine-rufnummern/action/create"]
    ) table th {
        padding: 13px 15px !important;

        font-size: 22px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
    }

    /* Rufnummer und sämtliche Inhalte */
    html body #main#main:has(
        a.button.create[href="meine-rufnummern/action/create"]
    ) table td,
    html body #main#main:has(
        a.button.create[href="meine-rufnummern/action/create"]
    ) table td a,
    html body #main#main:has(
        a.button.create[href="meine-rufnummern/action/create"]
    ) table td span {
        padding: 13px 15px !important;

        font-size: 23px !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;
        white-space: nowrap !important;
    }
}

/* ==================================================
   ALLE BERATUNGEN – GROSSE SCHRIFT UND FINGER-SCROLLEN
   ================================================== */

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

    /* Tabellencontainer */
    html body #wrapper#wrapper #container#container #main#main
    .table:has(table thead th:nth-child(8)) {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px 0 16px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;
        box-sizing: border-box !important;
    }

    /* Tabelle erhält genügend Breite */
    html body #wrapper#wrapper #container#container #main#main
    table:has(thead th:nth-child(8)) {
        width: 1200px !important;
        min-width: 1200px !important;
        table-layout: auto !important;
        border-collapse: separate !important;
        border-spacing: 0 4px !important;
    }

    /* Spaltenüberschriften */
    html body #wrapper#wrapper #container#container #main#main
    table:has(thead th:nth-child(8)) th {
        min-height: 58px !important;
        padding: 13px 16px !important;

        background: #efdbe1 !important;
        color: #86163e !important;

        font-size: 25px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        text-align: left !important;
        white-space: nowrap !important;
    }

    /* Tabelleninhalte */
    html body #wrapper#wrapper #container#container #main#main
    table:has(thead th:nth-child(8)) td,
    html body #wrapper#wrapper #container#container #main#main
    table:has(thead th:nth-child(8)) td a,
    html body #wrapper#wrapper #container#container #main#main
    table:has(thead th:nth-child(8)) td span {
        min-height: 58px !important;
        padding: 13px 16px !important;

        color: #68424f !important;
        font-size: 23px !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;
        text-align: left !important;
        white-space: nowrap !important;
    }

    /* Bewertungslinks */
    html body #wrapper#wrapper #container#container #main#main
    table:has(thead th:nth-child(8)) td a {
        color: #86163e !important;
        font-weight: 600 !important;
        text-decoration: underline !important;
    }
}

/* ==================================================
   KUNDENBEREICH-BUTTON IMMER UNTER DEN KONTODATEN
   ================================================== */

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

    /* Vorhandenen Link sicher einblenden */
    html body #wrapper#wrapper #container#container
    #left#left .mod_logout
    > a.button:is([href="/kunden-home"], [href="kunden-home"]) {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        float: none !important;
        clear: both !important;

        visibility: visible !important;
        opacity: 1 !important;

        width: calc(100% - 30px) !important;
        min-height: 66px !important;
        margin: 18px auto 4px !important;
        padding: 12px 18px !important;

        border: 1px solid #e7c4cf !important;
        border-radius: 6px !important;
        background: #efdbe1 !important;
        color: transparent !important;

        font-size: 0 !important;
        line-height: 0 !important;
        text-indent: -9999px !important;
        box-sizing: border-box !important;
    }

    /* Beschriftung */
    html body #wrapper#wrapper #container#container
    #left#left .mod_logout
    > a.button:is([href="/kunden-home"], [href="kunden-home"])::after {
        content: "Kundenbereich" !important;

        position: absolute !important;
        inset: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        color: #86163e !important;
        font-size: 25px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-indent: 0 !important;
        text-align: center !important;
    }

    /* Doppelten Kundenbereich-Punkt im Menü entfernen */
    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1
    > li:has(> a[href="kunden-home"]) {
        display: none !important;
    }
}

/* ===== „Zur Startseite“ in die freie Menüstelle ===== */

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

    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1
    > li.customer-start {
        display: block !important;
        grid-column: auto !important;
        order: 8 !important;
        width: auto !important;
        margin: 0 !important;
    }

    html body #wrapper#wrapper #container#container
    #left#left .nav.mod_simplenav ul.level_1
    > li.customer-start > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 74px !important;
        padding: 12px 10px !important;

        border: 1px solid #e7c4cf !important;
        border-radius: 6px !important;
        background: #efdbe1 !important;
        color: #86163e !important;

        font-size: 24px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        text-align: center !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }
}

/* ==================================================
   EINGELOGGTE STARTSEITE – KONTOBEREICH AUSBLENDEN
   ================================================== */

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

    /* Nur auf der Startseite und nur bei eingeloggten Kunden */
    html body.home:has(#left .mod_logout)
    #left {
        display: none !important;
    }

    html body.home:has(#left .mod_logout)
    #container {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-top: 0 !important;
    }

    html body.home:has(#left .mod_logout)
    #main {
        display: block !important;
        float: none !important;

        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}




/* ==============================================================
   MOBILE – HEUTE BESONDERS BELIEBT
   Eine einzige horizontale Reihe für alle Systemgruppen
   ============================================================== */

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

    html body #wrapper#wrapper #container#container
    #main#main .busylist {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 18px !important;
        padding: 0 !important;
        border: 0 !important;
        background: #fcf3f6 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html body #wrapper#wrapper #container#container
    #main#main .busylist .bh {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 58px !important;
        margin: 0 !important;
        padding: 10px 16px !important;
        background: #bc5377 !important;
        color: #ffffff !important;
        font-family: "Segoe UI", Arial, sans-serif !important;
        font-size: 27px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* Der Innenbereich ist die einzige Scrollfläche. */
    html body #wrapper#wrapper #container#container
    #main#main .busylist > .inside {
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 18px !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 18px 30px 24px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x proximity !important;
        scroll-padding-inline: 30px !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-inline: contain !important;
        touch-action: pan-x !important;
        box-sizing: border-box !important;
    }

    html body #main#main .busylist > .inside::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* Das System verteilt acht Berater auf mehrere UL-Gruppen.
       display:contents verbindet sie ohne Duplikate zu einer Reihe. */
    html body #wrapper#wrapper #container#container
    #main#main .busylist > .inside > ul,
    html body #wrapper#wrapper #container#container
    #main#main .busylist > .inside > ul.active,
    html body #wrapper#wrapper #container#container
    #main#main .busylist > .inside > ul:not(.active) {
        display: contents !important;
        position: static !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        transition: none !important;
    }

    html body #wrapper#wrapper #container#container
    #main#main .busylist > .inside ul > li {
        display: flex !important;
        flex: 0 0 188px !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 188px !important;
        min-width: 188px !important;
        max-width: 188px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        text-align: center !important;
        scroll-snap-align: start !important;
        box-sizing: border-box !important;
    }

    /* Fester sichtbarer Abstand vor dem tatsächlich ersten Berater. */
    html body #wrapper#wrapper #container#container
    #main#main .busylist > .inside > ul:first-of-type > li:first-child {
        margin-left: 32px !important;
    }

    /* Der Link bildet den Kreis; dadurch können Hochformatbilder nie oval werden. */
    html body #wrapper#wrapper #container#container
    #main#main .busylist > .inside ul > li > a:first-child {
        display: block !important;
        flex: 0 0 170px !important;
        width: 170px !important;
        min-width: 170px !important;
        max-width: 170px !important;
        height: 170px !important;
        min-height: 170px !important;
        max-height: 170px !important;
        margin: 0 auto 12px !important;
        padding: 0 !important;
        border: 3px solid #d895aa !important;
        border-radius: 50% !important;
        background: #ffffff !important;
        overflow: hidden !important;
        box-shadow: 0 5px 12px rgba(153, 72, 100, 0.18) !important;
        box-sizing: border-box !important;
    }

    html body #wrapper#wrapper #container#container
    #main#main .busylist > .inside ul > li > a:first-child > img {
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        object-position: center center !important;
        aspect-ratio: 1 / 1 !important;
        box-sizing: border-box !important;
    }

    html body #wrapper#wrapper #container#container
    #main#main .busylist > .inside ul > li .name {
        display: -webkit-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 54px !important;
        margin: 0 !important;
        padding: 0 3px !important;
        color: #68424f !important;
        font-size: 22px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: center !important;
        text-decoration: none !important;
        white-space: normal !important;
        overflow: hidden !important;
        overflow-wrap: anywhere !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    html body #wrapper#wrapper #container#container
    #main#main .busylist > .inside ul > li .status {
        display: block !important;
        width: 100% !important;
        margin: 5px 0 0 !important;
        padding: 0 3px !important;
        font-size: 20px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    html body #main#main .busylist .status.online { color: #67936e !important; }
    html body #main#main .busylist .status.busy   { color: #c84f7d !important; }
    html body #main#main .busylist .status.offline { color: #929292 !important; }

    html body #main#main .busylist :is(.btn, .prev, .next) {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

@media screen and (max-width: 1400px) {
    li[style*="color:#ed679b"],
    li[style*="color: #ed679b"] {
        font-size: 28px !important;
        line-height: 1.35 !important;
    }
}

@media screen and (max-width: 1400px) {
    html body #wrapper#wrapper #container#container
    #main#main .busylist {
        order: 3 !important;
    }
}


/* ==================================================
   EINGELOGGT: PERSONEN-ICON DEUTLICH GRÜN
   ================================================== */

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

    /* Kopf */
    html body:has(.mod_logout)
    #wrapper#wrapper
    #header#header > .inside
    > a.mobile_btn.mobile_login::before {
        background: #6f9876 !important;
    }

    /* Körper / Schultern */
    html body:has(.mod_logout)
    #wrapper#wrapper
    #header#header > .inside
    > a.mobile_btn.mobile_login::after {
        background: #6f9876 !important;
        border-color: #6f9876 !important;
    }

    /* Äußerer Kreis */
    html body:has(.mod_logout)
    #wrapper#wrapper
    #header#header > .inside
    > a.mobile_btn.mobile_login {
        border-color: #81ab87 !important;
        background: #f4faf5 !important;
        box-shadow: 0 0 8px rgba(111, 152, 118, 0.35) !important;
    }
}


/* Slider bleibt direkt unter dem Header */
@media screen and (max-width: 1400px) {

    #cteFader66 {
        margin-top: 0 !important;
    }
}


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

    /* Statustext der beliebten Berater */
    html body #main#main
    .busylist .status {
        font-size: 26px !important;
        font-weight: 400 !important;
        line-height: 1.3 !important;
    }
}

/* ==================================================
   MOBILE – GUTHABEN AUFLADEN: KOMPLETTE ENDVERSION
   ================================================== */

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

    /* Gesamter Zahlungsbereich: immer zwei Karten pro Reihe */
    html body #wrapper#wrapper #container#container
    #main#main#main .mod_recharge.mod_recharge {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 20px !important;

        width: calc(100% - 30px) !important;
        max-width: 920px !important;
        margin: 30px auto 50px !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    /* Überschrift über beide Spalten */
    html body #main#main#main
    .mod_recharge.mod_recharge > h1.bh {
        grid-column: 1 / -1 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 64px !important;

        margin: 0 0 8px !important;
        padding: 12px 18px !important;

        border: 0 !important;
        background: #c9909f !important;
        color: #ffffff !important;

        font-size: 30px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: center !important;

        box-sizing: border-box !important;
    }

    /* Einzelne Zahlungskarte */
    html body #main#main#main
    .mod_recharge.mod_recharge
    > form.formbox.payment {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;

        margin: 0 !important;
        padding: 22px !important;

        border: 1px solid #e7c4cf !important;
        border-radius: 12px !important;
        background: #fffafb !important;
        box-shadow: 0 5px 15px rgba(134, 22, 62, 0.08) !important;

        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* ==================================================
       PAYPAL UND PAYSAFECARD
       ================================================== */

    html body #main#main#main
    .mod_recharge.mod_recharge
    > form.payment > a:first-of-type {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        position: static !important;
        float: none !important;

        width: 100% !important;
        height: 76px !important;
        min-height: 76px !important;

        margin: 0 0 8px !important;
        padding: 0 !important;

        text-decoration: none !important;
    }

    html body #main#main#main
    .mod_recharge.mod_recharge
    > form.payment > a:first-of-type > img {
        display: block !important;
        position: static !important;
        float: none !important;

        width: 155px !important;
        max-width: 82% !important;
        height: 68px !important;
        max-height: 68px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        object-fit: contain !important;
        transform: none !important;
    }

    /* Paysafecard etwas breiter */
    html body #main#main#main
    .mod_recharge.mod_recharge
    > form.payment:has(input[value="paysafe"])
    > a:first-of-type > img {
        width: 175px !important;
        max-width: 88% !important;
    }

    /* ==================================================
       KLARNA – GLEICHE HÖHE WIE PAYPAL
       ================================================== */

    html body #main#main#main
    .mod_recharge.mod_recharge
    > form.payment > img.img {
        display: block !important;
        position: static !important;
        float: none !important;

        width: 155px !important;
        max-width: 82% !important;
        height: 76px !important;
        max-height: 76px !important;

        margin: 0 auto 8px !important;
        padding: 0 !important;

        object-fit: contain !important;
        transform: none !important;
    }

    /* ==================================================
       STRIPE – ALLE VIER LOGOS NEBENEINANDER
       ================================================== */

    html body #main#main#main
    .mod_recharge.mod_recharge
    > form.payment > div.img.img {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 4px !important;

        position: static !important;
        float: none !important;

        width: 100% !important;
        height: 76px !important;
        min-height: 76px !important;

        margin: 0 0 8px !important;
        padding: 0 !important;

        overflow: visible !important;
        box-sizing: border-box !important;
    }

    html body #main#main#main
    .mod_recharge.mod_recharge
    > form.payment > div.img.img > span {
        display: flex !important;
        flex: 0 1 25% !important;
        align-items: center !important;
        justify-content: center !important;

        position: static !important;
        float: none !important;

        width: 25% !important;
        min-width: 0 !important;
        height: 56px !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
        overflow: visible !important;
    }

    html body #main#main#main
    .mod_recharge.mod_recharge
    > form.payment > div.img.img > span > img {
        display: block !important;
        visibility: visible !important;

        position: static !important;
        float: none !important;

        width: 48px !important;
        max-width: 48px !important;
        height: 44px !important;
        max-height: 44px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        opacity: 1 !important;
        object-fit: contain !important;
        transform: none !important;
    }

    /* Mastercard etwas kompakter */
    html body #main#main#main
    .mod_recharge.mod_recharge
    > form.payment > div.img.img
    img[src*="mastercard"] {
        width: 40px !important;
        max-width: 40px !important;
    }

    /* ==================================================
       TEXTE
       ================================================== */

    html body #main#main#main
    .mod_recharge.mod_recharge
    > form.payment > h3 {
        margin: 0 0 12px !important;
        padding: 0 !important;

        color: #86163e !important;
        font-size: 24px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: center !important;
    }

    html body #main#main#main
    .mod_recharge.mod_recharge
    > form.payment > p {
        width: 100% !important;
        margin: 0 0 14px !important;
        padding: 0 !important;

        color: #68424f !important;
        font-size: 18px !important;
        font-weight: 400 !important;
        line-height: 1.45 !important;
        text-align: center !important;

        overflow-wrap: anywhere !important;
        box-sizing: border-box !important;
    }

    html body #main#main#main
    .mod_recharge.mod_recharge
    > form.payment > p a {
        color: #bc5377 !important;
        font-size: inherit !important;
        font-weight: 600 !important;
        text-decoration: underline !important;
    }

    /* ==================================================
       BETRAGSAUSWAHL
       Große Schrift im geschlossenen Feld,
       kleinere Schrift im aufgeklappten Menü
       ================================================== */

    html body #main#main#main
    .mod_recharge.mod_recharge
    > form.payment select.amount {
        display: block !important;
        width: 100% !important;
        height: 60px !important;

        margin: auto 0 13px !important;
        padding: 0 58px 0 15px !important;

        border: 1px solid #ddbac5 !important;
        border-radius: 8px !important;
        background-color: #ffffff !important;

        /* Großer eigener Auswahlpfeil */
        background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='18' viewBox='0 0 28 18'%3E%3Cpath d='M3 3l11 11L25 3' fill='none' stroke='%23bc5377' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 16px center !important;
        background-size: 28px 18px !important;

        color: #68424f !important;
        font-family: inherit !important;

        /* Betrag im geschlossenen Feld deutlich größer */
        font-size: 25px !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;

        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;

        box-sizing: border-box !important;
        cursor: pointer !important;
    }

    /* Aufgeklapptes Auswahlmenü kleiner */
    html body #main#main#main
    .mod_recharge.mod_recharge
    > form.payment select.amount option {
        color: #68424f !important;
        background: #ffffff !important;

        font-family: Arial, sans-serif !important;
        font-size: 17px !important;
        font-weight: 400 !important;
        line-height: 1.2 !important;
    }

    /* ==================================================
       AUFLADEBUTTON
       ================================================== */

    html body #main#main#main
    .mod_recharge.mod_recharge
    > form.payment button.submit {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 60px !important;

        margin: 0 !important;
        padding: 11px 8px !important;

        border: 0 !important;
        border-radius: 8px !important;
        background: #bc5377 !important;
        color: #ffffff !important;

        font-family: inherit !important;
        font-size: 23px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        text-align: center !important;

        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    html body #main#main#main
    .mod_recharge.mod_recharge
    > form.payment button.submit:hover,
    html body #main#main#main
    .mod_recharge.mod_recharge
    > form.payment button.submit:focus {
        background: #a84265 !important;
    }
}

/* =====================================================
   GUTHABEN AUFLADEN
   Hinweis über volle Breite – darunter 2 Boxen je Reihe
   ===================================================== */

#main .mod_recharge {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: stretch !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Überschrift über beide Spalten */
#main .mod_recharge > h1.bh {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin: 0 0 0 !important;
    box-sizing: border-box !important;
}

/* NUR der Hinweis direkt unter der Überschrift */
#main .mod_recharge > p {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin: 0 0 2px !important;
    padding: 8px 4px !important;
    box-sizing: border-box !important;

    font-size: 20px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    text-align: center !important;
    color: #754654 !important;
}

/* Zahlungsboxen – immer zwei nebeneinander */
#main .mod_recharge > form.formbox.payment {
    float: none !important;
    clear: none !important;
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 18px !important;
    box-sizing: border-box !important;
}

/* Auswahlfeld und Button unten gleichmäßig */
#main .mod_recharge > form.formbox.payment .amount {
    width: 100% !important;
    margin-top: auto !important;
    box-sizing: border-box !important;
}

#main .mod_recharge > form.formbox.payment .submit {
    display: block !important;
    width: 100% !important;
    margin-top: 14px !important;
    box-sizing: border-box !important;
}

/* Die Leerzeichen zwischen Auswahlfeld und Button ausgleichen */
#main .mod_recharge > form.formbox.payment select + .submit {
    margin-left: 0 !important;
}

/* Mobil weiterhin zwei Boxen pro Reihe */
@media screen and (max-width: 767px) {

    #main .mod_recharge {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    #main .mod_recharge > p {
        font-size: 19px !important;
        padding: 9px 4px !important;
    }

    #main .mod_recharge > form.formbox.payment {
        padding: 14px 10px !important;
    }
}


/* =====================================================
   BELIEBTE BERATER – REIHE MITTIG, BEI ÜBERLAUF LINKS STOPP
   ===================================================== */

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

    html body #wrapper#wrapper #container#container
    #main#main .busylist > .inside {
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: flex-start !important;

        /*
         * Wenn alle Berater in den sichtbaren Bereich passen:
         * komplette Reihe mittig.
         *
         * Wenn die Reihe breiter ist:
         * Start automatisch links und Fortsetzung nach rechts.
         */
        justify-content: safe center !important;

        gap: 18px !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 18px 0 24px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scroll-snap-type: x proximity !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x !important;

        box-sizing: border-box !important;
    }

    html body #wrapper#wrapper #container#container
    #main#main .busylist > .inside::-webkit-scrollbar {
        display: none !important;
    }

    /* Alle vom System erzeugten Gruppen zu einer Reihe verbinden */
    html body #wrapper#wrapper #container#container
    #main#main .busylist > .inside > ul,
    html body #wrapper#wrapper #container#container
    #main#main .busylist > .inside > ul.active,
    html body #wrapper#wrapper #container#container
    #main#main .busylist > .inside > ul:not(.active) {
        display: contents !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Karten */
    html body #wrapper#wrapper #container#container
    #main#main .busylist > .inside ul > li.box {
        display: flex !important;
        flex: 0 0 188px !important;
        flex-direction: column !important;
        align-items: center !important;

        width: 188px !important;
        min-width: 188px !important;
        max-width: 188px !important;

        margin: 0 !important;
        padding: 0 !important;

        scroll-snap-align: start !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* Alten Sonderabstand des ersten Beraters sicher entfernen */
    html body #wrapper#wrapper #container#container
    #main#main .busylist > .inside > ul:first-of-type > li:first-child,
    html body #wrapper#wrapper #container#container
    #main#main .busylist > .inside ul > li:first-child {
        margin-left: 0 !important;
    }

    /* Alte künstliche Abstandshalter abschalten */
    html body #wrapper#wrapper #container#container
    #main#main .busylist > .inside::before,
    html body #wrapper#wrapper #container#container
    #main#main .busylist > .inside::after {
        content: none !important;
        display: none !important;
    }
}


/* MOBIL – ABSTAND ZWISCHEN HEADER UND BANNER KORRIGIEREN */
@media screen and (max-width: 1400px) {

    #container {
        margin-top: calc(var(--mobile-header-height) - 8px) !important;
    }

    #cteFader66 {
        margin-top: 0 !important;
    }
}



/* =========================================
   AUFLADUNG ERFOLGREICH – MOBILE ANSICHT
   ========================================= */

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

    /* Bereich mit der Erfolgsmeldung */
    #main .mod_article {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    /* Überschrift "Aufladung erfolgreich" */
    #main .mod_article h1,
    #main .mod_article h2 {
        position: relative !important;

        width: 100% !important;
        min-height: 58px !important;

        margin: 20px 0 16px !important;
        padding: 14px 18px 14px 58px !important;
        box-sizing: border-box !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: #c9909f !important;
        color: #ffffff !important;

        border: none !important;
        border-radius: 6px !important;

        font-size: 23px !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
        text-align: center !important;

        box-shadow: 0 4px 12px rgba(104, 66, 79, 0.12) !important;
    }

    /* Haken links in der Überschrift */
    #main .mod_article h1::before,
    #main .mod_article h2::before {
        content: "✓" !important;

        position: absolute !important;
        left: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;

        width: 31px !important;
        height: 31px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: #ffffff !important;
        color: #81ab87 !important;

        border-radius: 50% !important;

        font-size: 21px !important;
        font-weight: 800 !important;
    }

    /* Text unter der Überschrift */
    #main .mod_article p {
        margin: 0 0 18px !important;
        padding: 0 10px !important;

        color: #68424f !important;
        font-size: 18px !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }

    /* Button "Zur Startseite" */
    #main .mod_article a.button,
    #main .mod_article .button,
    #main .mod_article a[href*="start"] {
        width: 100% !important;
        min-height: 52px !important;

        margin: 0 auto !important;
        padding: 13px 18px !important;
        box-sizing: border-box !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: #a0838b !important;
        color: #ffffff !important;

        border: none !important;
        border-radius: 6px !important;

        font-size: 19px !important;
        font-weight: 700 !important;
        text-align: center !important;
        text-decoration: none !important;

        box-shadow: 0 4px 10px rgba(104, 66, 79, 0.14) !important;
    }
}


/*Zusatzminuten letzte Beratungen größer*/

.cte_recent span.free{
    display:block !important;
    margin:4px 0 6px !important;

    font-size:19px !important;
    line-height:22px !important;
    font-weight:700 !important;
    font-family:Arial, sans-serif !important;

    color:#f3248d !important;
}

/* "Jetzt bewerten" größer */
.cte_recent a[href*="/kunden-beratungen/type/call/rate/"]{
    font-size:22px !important;
    font-weight:600;
}

/* Bewertungssterne größer */
.cte_recent span.stars.small{
    transform:scale(1.35);
    transform-origin:left center;
    display:inline-block;
}


/* TEST: Nachrichtenbereich wieder sichtbar machen */
body.loggedin #main,
body.loggedin #main > .inside,
body.loggedin #main .block {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 1px !important;
    max-height: none !important;
    overflow: visible !important;
}




/* NUR Beraterbereich – alle Menüpunkte sichtbar */
html body.member.loggedin:has(#left a[href="profiltext"])
#wrapper #container #left#left#left
.nav.mod_simplenav ul.level_1 > li{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    width:auto !important;
    height:auto !important;
}

/* =========================================================
   BERATERBEREICH – Menügestaltung mobil
========================================================= */

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

html body.member.loggedin:has(#left a[href="profiltext"])
#wrapper #container #left#left#left
.nav.mod_simplenav{
    width:100% !important;
    max-width:none !important;
    margin:15px 0 25px !important;
    padding:14px !important;
    box-sizing:border-box !important;
    background:#fcf3f6 !important;
    border:1px solid #e7c4cf !important;
    border-radius:12px !important;
}

html body.member.loggedin:has(#left a[href="profiltext"])
#wrapper #container #left#left#left
.nav.mod_simplenav h3.bh{
    display:block !important;
    margin:0 0 14px !important;
    padding:12px !important;
    background:#c9909f !important;
    color:#ffffff !important;
    border-radius:9px !important;
    font-size:25px !important;
    line-height:1.2 !important;
    text-align:center !important;
    font-weight:600 !important;
}

html body.member.loggedin:has(#left a[href="profiltext"])
#wrapper #container #left#left#left
.nav.mod_simplenav nav{
    display:block !important;
    width:100% !important;
}

html body.member.loggedin:has(#left a[href="profiltext"])
#wrapper #container #left#left#left
.nav.mod_simplenav ul.level_1{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:10px !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    float:none !important;
    list-style:none !important;
}

html body.member.loggedin:has(#left a[href="profiltext"])
#wrapper #container #left#left#left
.nav.mod_simplenav ul.level_1 > li{
    display:block !important;
    float:none !important;
    clear:none !important;
    position:relative !important;
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
}

html body.member.loggedin:has(#left a[href="profiltext"])
#wrapper #container #left#left#left
.nav.mod_simplenav ul.level_1 > li > a{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:64px !important;
    margin:0 !important;
    padding:10px 8px !important;
    box-sizing:border-box !important;
    background:#ffffff !important;
    color:#68424f !important;
    border:1px solid #e7c4cf !important;
    border-radius:9px !important;
    font-size:19px !important;
    line-height:1.2 !important;
    text-align:center !important;
    text-decoration:none !important;
    font-weight:500 !important;
}

html body.member.loggedin:has(#left a[href="profiltext"])
#wrapper #container #left#left#left
.nav.mod_simplenav ul.level_1 > li.active > a{
    background:#b65f7d !important;
    color:#ffffff !important;
    border-color:#b65f7d !important;
    font-weight:600 !important;
}

}

/* =========================================================
   BERATERBEREICH – größere Schrift nur mobil
========================================================= */

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

html body.member.loggedin:has(#left a[href="profiltext"]) #main{
    font-size:20px !important;
    line-height:1.6 !important;
}

html body.member.loggedin:has(#left a[href="profiltext"]) #main p,
html body.member.loggedin:has(#left a[href="profiltext"]) #main li{
    font-size:20px !important;
    line-height:1.6 !important;
}

html body.member.loggedin:has(#left a[href="profiltext"]) #main h1,
html body.member.loggedin:has(#left a[href="profiltext"]) #main h2,
html body.member.loggedin:has(#left a[href="profiltext"]) #main h3{
    font-size:28px !important;
}
}

/* =========================================================
   MEINE KUNDEN – mobil optimieren
========================================================= */

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

html body.member.loggedin:has(#left a[href="profiltext"])
#main .table{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
}

html body.member.loggedin:has(#left a[href="profiltext"])
#main .table table{
    min-width:900px !important;
}

html body.member.loggedin:has(#left a[href="profiltext"])
#main .table th,
html body.member.loggedin:has(#left a[href="profiltext"])
#main .table td{
    font-size:16px !important;
    padding:8px 10px !important;
    white-space:nowrap !important;
}

}

/* ==================================================
   MOBILBANNER – GANZES BILD, OHNE ABSCHNEIDEN
   Bildformat: 1000 × 800 px
   ================================================== */

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

    #cteFader66,
    #cteFader66 .sliderContainer,
    #cteFader66 .mask,
    #cteFader66 .mover {
        position: relative !important;
        inset: auto !important;
        display: block !important;

        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 5 / 4 !important;

        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        overflow: hidden !important;
    }

    #cteFader66 .slide {
        display: none !important;
    }

    html body #wrapper #container #cteFader66 .slide1,
    html body #wrapper #container #cteFader66 #campinfo {
        position: absolute !important;
        inset: 0 !important;

        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        background-image: url("/files/layout/img/Mobil/Mobilbanner.png?v=5") !important;
        background-size: contain !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;

        opacity: 1 !important;
        z-index: 2 !important;
        transform: none !important;
        animation: none !important;
    }

    #cteFader66 > .btn,
    #cteFader66 > ul.nav {
        display: none !important;
    }
}

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

    html body #wrapper #container #cteFader66,
    html body #wrapper #container #cteFader66 .sliderContainer,
    html body #wrapper #container #cteFader66 .mask,
    html body #wrapper #container #cteFader66 .mover {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 5 / 4 !important;
    }

    html body #wrapper #container #cteFader66 .slide1,
    html body #wrapper #container #cteFader66 #campinfo {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: auto !important;

        background-image: url("/files/layout/img/Mobil/Mobilbanner.png?v=6") !important;
        background-size: contain !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
    }
}

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

    #cteFader66 {
        margin-bottom: 18px !important;
    }

}

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

    body.loggedin #cteFader66 .sliderContainer,
    body.loggedin #cteFader66 .mover {
        height: auto !important;
    }

    body.loggedin #cteFader66 .slide1 {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 5 / 4 !important;

        background-image:
            url("/files/layout/img/Mobil/Mobilbanner.png") !important;

        background-size: contain !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;

        position: relative !important;
        top: auto !important;
        left: auto !important;
    }

}

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

    /* Nur eingeloggt auf der Startseite:
       Banner weiter nach unten setzen */
    html body.loggedin.home #wrapper #container #main > .inside {
        padding-top: 95px !important;
    }

}



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

    .busylist li.box .name{
        display:block !important;
        font-size:22px !important;
        line-height:1.05 !important;
        margin:5px 0 0 0 !important;
        padding:0 !important;
        min-height:0 !important;
        height:auto !important;
    }

    .busylist li.box .status{
        display:block !important;
        font-size:18px !important;
        line-height:1 !important;
        margin:-8px 0 0 0 !important;
        padding:0 !important;
        min-height:0 !important;
        height:auto !important;
        position:relative !important;
        top:0 !important;
    }

}

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

    html body #wrapper #container #main .busylist li.box > .name{
        display:block !important;
        margin:6px 0 0 0 !important;
        padding:0 !important;
        line-height:1.05 !important;
    }

    html body #wrapper #container #main .busylist li.box > .status{
        display:block !important;
        margin:0 !important;
        padding:0 !important;
        line-height:1 !important;
        position:relative !important;
        top:-5px !important;
        transform:translateY(-5px) !important;
    }

}

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

    /* Gesamte Beraterbox breiter machen */
    html body #main .busylist ul li.box{
        width:150px !important;
        min-width:150px !important;
        max-width:150px !important;
    }

    /* Link um das Bild */
    html body #main .busylist ul li.box > a:first-child{
        display:block !important;
        width:135px !important;
        height:135px !important;
        margin:0 auto 6px auto !important;
        padding:0 !important;
        overflow:hidden !important;
        border-radius:50% !important;
    }

    /* Profilbild selbst */
    html body #main .busylist ul li.box > a:first-child > img{
        display:block !important;
        width:135px !important;
        height:135px !important;
        min-width:135px !important;
        max-width:none !important;
        object-fit:cover !important;
        object-position:center !important;
        border-radius:50% !important;
        margin:0 !important;
        padding:0 !important;
    }

}

/* ==========================================
   Freundschaftswerbung mobil
========================================== */
@media screen and (max-width:1400px){

    /* Gesamter Block */
    .cte_text.block{
        padding:10px 18px 20px !important;
    }

    /* Alle Absätze enger */
    .cte_text.block p{
        margin:6px 0 !important;
        line-height:1.3 !important;
    }

    /* Überschrift */
    .cte_text.block p:first-child{
        margin-top:0 !important;
        margin-bottom:12px !important;
    }

    .cte_text.block p:first-child strong{
        font-size:30px !important;
    }

    /* Text */
    .cte_text.block span[style*="font-size:22px"]{
        font-size:26px !important;
    }

    /* 25 € */
    .cte_text.block span[style*="font-size:26px"]{
        font-size:36px !important;
        line-height:1.1 !important;
    }

    /* Geschenk */
    .cte_text.block img{
        width:80px !important;
        height:auto !important;
        display:block !important;
        margin:14px auto 10px auto !important;
    }

    /* Buttons */
    .cte_text.block .button{
        width:100% !important;
        max-width:360px !important;
        display:block !important;
        margin:10px auto !important;
        padding:14px !important;
        font-size:26px !important;
    }

    /* Hinweis unten */
    .cte_text.block em{
        font-size:16px !important;
        line-height:1.4 !important;
    }

}

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

    #main a#recoCopy,
    #main a.button{
        display:block !important;
        width:100% !important;
        max-width:360px !important;
        margin:12px auto !important;
        padding:15px 20px !important;

        background:#c35c84 !important;
        color:#fff !important;
        border:none !important;
        border-radius:8px !important;

        text-align:center !important;
        font-size:26px !important;
        font-weight:600 !important;
        text-decoration:none !important;
    }

}

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

    /* Desktop-Seitenspalte auf der Startseite ausblenden */
    body #left {
        display: none !important;
    }

    /* Hauptinhalt volle Breite */
    body #main {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body #container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Alte Desktop-Navigation ausblenden */
    body #header .mod_navigation,
    body #header nav:not(.mobile-nav),
    body .desktop-nav {
        display: none !important;
    }

    /* Slider auf volle Breite */
    body #cteFader66 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        float: none !important;
    }

    body #cteFader66 img,
    body #cteFader66 .slide,
    body #cteFader66 .image_container {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    /* Beraterbereich volle Breite */
    body #agents580,
    body #tabnav {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


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

    html body #left {
        display: none !important;
    }

    html body #main {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    html body #container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

}