/* ==========================================================
   COLUMBUS CONTENT
   modular content layer
   ========================================================== */

.columbus-content {

    margin:0 auto;

}

.columbus-content,
.columbus-content * {
    box-sizing:border-box;
}

.columbus-content-row {
    display:flex;
    align-items:flex-start;

}

.columbus-main {

}

.columbus-sidebar {

}

/* TYPOGRAPHY */

.columbus-content h1,
.columbus-content h2,
.columbus-content h3,
.columbus-content h4,
.columbus-content h5 {
    margin-top:0;
    padding:0;
    position:relative;
    font-family:"Raleway","Helvetica Neue",Helvetica,Arial,sans-serif;

}

.columbus-content h1 {
    margin-bottom:15px;

    line-height:1.1;
}

.columbus-content h2 {
    margin-bottom:15px;

}

.columbus-content h3 {
    margin-bottom:15px;

}

.columbus-content h5 {
    margin-bottom:15px;

    line-height:1.2;
}

.columbus-content p,
.columbus-content li {
    font-size:14px;
    line-height:1.5;
}

.columbus-content p {
    margin:0 0 15px;
}

/* INTRO */

.columbus-intro {
    margin-bottom:35px;
}

/* MODELS */

.columbus-models {

    flex-wrap:wrap;
    margin:0 -10px 45px;
}

.columbus-model {

    padding:0 10px;

}

.columbus-model h5 {
    color:#2187b8;
}

.columbus-model-image {
    height:235px;

}

.columbus-model-image img {
    display:block;

    max-height:235px;
    margin:0 auto;
    object-fit:contain;
}

.columbus-model-note {
    margin:0;
    color:#757575;

}

/* FEATURE */

.columbus-feature {
    margin:20px 0 35px;
}

.columbus-feature img {
    display:block;
    width:100%;
    max-width:620px;
    height:auto;
    margin:0 auto;
}

/* INFO BOX */

.columbus-content-box {
    background:#f5f8fa;
    border-radius:2px;
    padding:15px;
    margin-bottom:40px;
    overflow:hidden;
}

.columbus-content-box p:last-child {
    margin-bottom:0;
}

/* SIDEBAR */

.columbus-sidebar .frame-content-box {
    background:#f5f8fa;
    border-radius:2px;
    padding:15px;
    margin-bottom:30px;
    overflow:hidden;
}

.columbus-sidebar .frame-content-box h3 {
    margin-bottom:15px;

}

.columbus-sidebar img {
    display:block;
    width:100%;
    height:auto;
    margin:0 auto 15px;
}

.columbus-sidebar a.arrow {
    position:relative;

    font-weight:600;
    text-decoration:none;
}

.columbus-sidebar a.arrow:before {
    content:"›";
    position:absolute;
    left:0;
    top:0;
}

.columbus-sidebar a.arrow:hover {
    text-decoration:underline;
}

/* TABLET */

@media (max-width:1199px) {

    .columbus-content {

    }
}

@media (max-width:991px) {

    .columbus-content {

    }

    .columbus-main {

    }

    .columbus-sidebar {

    }

    .columbus-model {

    }
}

/* MOBILE */

@media (max-width:767px) {

    .columbus-content {

        padding:35px 15px 45px;
    }

    .columbus-content-row {

    }

    .columbus-main,
    .columbus-sidebar {

    }

    .columbus-sidebar {
        margin-top:40px;
    }

    .columbus-model {
        width:50%;
    }

    .columbus-content h1,
    .columbus-content h2 {

    }
}

@media (max-width:480px) {

    .columbus-model {

    }
}

/* ==========================================================
   COLUMBUS CONTENT V2
   ========================================================== */

.columbus-back {
    margin-bottom:18px;
}

.columbus-back a {
    color:#2187b8;
    font-size:13px;
    text-decoration:none;
}

.columbus-back a:hover {
    text-decoration:underline;
}

.columbus-main > h2 {
    margin-top:35px;
}

.columbus-quality-grid {

    gap:20px;
    margin:20px 0 45px;

}

.columbus-quality-box {

    padding:18px;

}

.columbus-quality-box p:last-child {

}

.columbus-variant {
    margin-bottom:32px;
}

.columbus-variant h3 {
    margin-bottom:12px;
}

.columbus-variant ul {
    margin:0 0 15px 20px;
    padding:0;
}

.columbus-tech {
    margin:45px 0;
    border-top:1px solid #d8d8d8;
    border-bottom:1px solid #d8d8d8;
}

.columbus-tech summary {
    position:relative;
    padding:15px 35px 15px 0;

    font-size:16px;

    color:#333;
    list-style:none;
}

.columbus-tech summary::-webkit-details-marker {
    display:none;
}

.columbus-tech summary:after {
    content:"+";
    position:absolute;
    right:4px;
    top:50%;
    transform:translateY(-50%);
    color:#777;
    font-size:20px;
    font-weight:400;
}

.columbus-tech[open] summary:after {
    content:"−";
}

.columbus-tech-inner {
    padding:10px 0 25px;
    overflow-x:auto;
}

.columbus-tech table {

    max-width:100%;

}

.columbus-tech td,
.columbus-tech th {
    padding:8px 10px;

    vertical-align:top;
}

.columbus-cta {

    padding:22px 20px;

}

.columbus-cta h3 {
    margin-bottom:20px;

}

.columbus-cta-row {

    gap:18px;
}

.columbus-cta-btn {

    padding:11px 14px;

}

.columbus-sidebar-video {
    margin-bottom:30px;
}

.columbus-sidebar-video h5 {
    margin-bottom:12px;

}

.columbus-video {

}

.columbus-video iframe {

}

@media (min-width:768px) {

    .columbus-feature img {
        max-width:500px;
    }
}

@media (max-width:991px) {

    .columbus-quality-grid {

    }

    .columbus-cta-row {

    }
}

@media (max-width:767px) {

    .columbus-quality-grid {
        gap:15px;
    }

    .columbus-tech {
        margin-top:35px;
    }
}

/* ==========================================================
   COLUMBUS HOTSPOTS V3
   ========================================================== */

.columbus-hotspot-component {
    position:relative;
    max-width:620px;
    margin-left:auto;
    margin-right:auto;
}

.columbus-hotspot-stage {
    position:relative;

    max-width:500px;

}

.columbus-hotspot-image {
    display:block;

    max-width:none !important;

    margin:0;
}

.columbus-hotspot {
    position:absolute;
    z-index:5;

    width:24px;
    height:24px;

    padding:0;
    margin:0;

    border:2px solid #1689bd;
    border-radius:50%;

    background:#fff;
    cursor:pointer;

    transform:translate(-50%,-50%);

    box-shadow:
        0 0 0 2px rgba(255,255,255,.75);

    transition:
        transform .15s ease,
        background-color .15s ease,
        box-shadow .15s ease;
}

.columbus-hotspot:hover,
.columbus-hotspot:focus,
.columbus-hotspot.is-active {
    background:#2187b8;

    transform:
        translate(-50%,-50%)
        scale(1.12);

    outline:none;

    box-shadow:
        0 0 0 3px rgba(33,135,184,.20);
}

.columbus-hotspot-dot {
    display:block;
    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;
    background:#2187b8;
}

.columbus-hotspot:hover .columbus-hotspot-dot,
.columbus-hotspot:focus .columbus-hotspot-dot,
.columbus-hotspot.is-active .columbus-hotspot-dot {
    background:#fff;
}

/* popup */

.columbus-hotspot-popup {
    display:none;

    position:absolute;
    z-index:20;

    left:50%;
    top:50%;

    width:280px;
    max-width:calc(100% - 30px);

    padding:18px 38px 16px 18px;

    transform:translate(-50%,-50%);

    background:#fff;

    border-top:4px solid #2187b8;

    box-shadow:
        0 8px 28px rgba(0,0,0,.22);

    text-align:left;
}

.columbus-hotspot-popup.is-open {
    display:block;
}

.columbus-hotspot-popup strong {
    display:block;

    margin:0 0 8px;

    color:#2187b8;

    font-family:
        "Raleway",
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    font-size:17px;
    font-weight:600;
}

.columbus-hotspot-popup p {
    margin:0;

    line-height:1.45;

    color:#333;
}

.columbus-hotspot-close {
    position:absolute;

    right:8px;
    top:7px;

    width:28px;
    height:28px;

    padding:0;

    border:0;
    background:transparent;

    color:#666;

    font-size:24px;
    line-height:24px;

    cursor:pointer;
}

.columbus-hotspot-close:hover,
.columbus-hotspot-close:focus {
    color:#2187b8;
    outline:none;
}

/* help */

.columbus-hotspot-help {
    margin:10px 0 0 !important;

    text-align:center;

    color:#777;

    font-size:12px !important;
}

/* mobile */

@media (max-width:767px) {

    .columbus-hotspot {

    }

    .columbus-hotspot-popup {
        width:calc(100% - 30px);

    }
}

/* ==========================================================
   COLUMBUS VISUAL TUNE V4
   visual alignment with current WACHTEL product-page layout
   ========================================================== */

/* ----------------------------------------------------------
   PAGE GEOMETRY
   ---------------------------------------------------------- */

.columbus-content {
    width:1170px;
    max-width:calc(100% - 30px);
    padding-top:55px;
    padding-bottom:70px;
}

.columbus-content-row {
    margin-left:-15px;
    margin-right:-15px;
}

.columbus-main {
    width:75%;
    padding-left:15px;
    padding-right:15px;
}

.columbus-sidebar {
    width:25%;
    padding-left:15px;
    padding-right:15px;
}

/* ----------------------------------------------------------
   TYPOGRAPHY
   ---------------------------------------------------------- */

.columbus-content {
    font-family:
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    font-size:14px;
    line-height:1.42857143;
    color:#333;
}

.columbus-content h1,
.columbus-content h2,
.columbus-content h3,
.columbus-content h4,
.columbus-content h5 {
    font-family:
        "Raleway",
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    font-weight:600;
    color:#2187b8;
}

.columbus-content h1 {
    font-size:34px;
    line-height:1.15;
    margin:0 0 22px;
}

.columbus-content h2 {
    font-size:34px;
    line-height:1.15;
    margin:42px 0 20px;
}

.columbus-content h3 {
    font-size:24px;
    line-height:1.25;
    margin:35px 0 16px;
}

.columbus-content h5 {
    font-size:18px;
    line-height:1.25;
}

.columbus-content p {
    line-height:1.55;
}

/* ----------------------------------------------------------
   INTRO
   ---------------------------------------------------------- */

.columbus-back {
    margin-bottom:24px;
}

.columbus-intro {
    max-width:830px;
    margin-bottom:42px;
}

.columbus-intro p {
    margin-bottom:16px;
}

/* ----------------------------------------------------------
   MODELS
   ---------------------------------------------------------- */

.columbus-models {
    display:flex;
    align-items:flex-start;
    margin:12px -12px 55px;
}

.columbus-model {
    width:25%;
    padding:0 12px;
    text-align:center;
}

.columbus-model h5 {
    margin:0 0 16px;
    min-height:23px;
}

.columbus-model-image {
    height:250px;
    margin-bottom:14px;

    display:flex;
    align-items:flex-end;
    justify-content:center;
}

.columbus-model-image img {
    max-width:100%;
    max-height:245px;
    width:auto;
    height:auto;
}

.columbus-model-note {
    max-width:160px;
    margin:0 auto !important;

    color:#777;

    font-size:12px !important;
    line-height:1.4 !important;
}

/* ----------------------------------------------------------
   HOTSPOT FEATURE IMAGE
   ---------------------------------------------------------- */

.columbus-hotspot-component {
    max-width:100%;
    margin:22px 0 48px;
}

.columbus-hotspot-stage {
    width:100%;
    max-width:620px;
    margin:0 auto;
}

.columbus-hotspot-image {
    width:100%;
    height:auto;
}

.columbus-hotspot-help {
    margin-top:12px !important;
}

/* desktop hotspot dots close to WACHTEL visual scale */

.columbus-hotspot {
    width:22px;
    height:22px;

    border-width:2px;

    box-shadow:
        0 0 0 2px rgba(255,255,255,.9),
        0 1px 5px rgba(0,0,0,.16);
}

.columbus-hotspot-dot {
    width:6px;
    height:6px;
}

/* popup */

.columbus-hotspot-popup {
    width:300px;

    padding:
        18px
        40px
        17px
        18px;

    border-top-width:3px;

    box-shadow:
        0 7px 24px
        rgba(0,0,0,.22);
}

.columbus-hotspot-popup strong {
    font-size:16px;
}

.columbus-hotspot-popup p {
    font-size:13px;
    line-height:1.5;
}

/* ----------------------------------------------------------
   QUALITY — THREE WACHTEL-LIKE BOXES
   ---------------------------------------------------------- */

.columbus-quality-grid {
    display:flex;

    margin:
        20px
        0
        50px;
}

.columbus-quality-box {
    flex:1 1 0;

    min-width:0;

    padding:15px;

    background:#f5f8fa;

    border-radius:2px;

    overflow:hidden;
}

.columbus-quality-box p {
    margin-bottom:18px;
}

.columbus-quality-box p:last-child {
    margin-bottom:0;
}

/* ----------------------------------------------------------
   VARIANTS
   ---------------------------------------------------------- */

.columbus-variant {
    margin:0 0 38px;
}

.columbus-variant h3 {
    margin:0 0 15px;
    font-size:24px;
}

.columbus-variant p {
    margin-bottom:15px;
}

.columbus-variant ul {
    margin:
        5px
        0
        15px
        22px;
}

.columbus-variant li {
    margin-bottom:5px;
}

/* ----------------------------------------------------------
   TECHNICAL DATA
   ---------------------------------------------------------- */

.columbus-tech {
    margin:
        48px
        0
        52px;

    border-top:
        1px solid #d9d9d9;

    border-bottom:
        1px solid #d9d9d9;
}

.columbus-tech summary {
    min-height:54px;

    padding:
        17px
        45px
        17px
        0;

    font-family:
        "Raleway",
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    font-size:18px;
    line-height:1.2;

    font-weight:600;

    color:#2187b8;

    cursor:pointer;
}

.columbus-tech summary:after {
    right:8px;

    color:#2187b8;

    font-size:24px;
}

.columbus-tech-inner {
    padding:
        5px
        0
        28px;
}

.columbus-tech table {
    width:100% !important;

    table-layout:auto;

    border-collapse:collapse;

    font-size:13px;
}

.columbus-tech td,
.columbus-tech th {
    padding:
        9px
        10px;

    border-bottom:
        1px solid #e4e4e4;

    line-height:1.35;
}

.columbus-tech tr:nth-child(even) {
    background:#fafafa;
}

.columbus-tech td:first-child {
    width:40% !important;

    text-align:left !important;

    font-weight:500;
}

.columbus-tech td:not(:first-child) {
    text-align:center;
}

/* ----------------------------------------------------------
   CTA
   ---------------------------------------------------------- */

.columbus-cta {
    margin-top:50px;

    padding:
        20px
        22px
        22px;

    background:#f5f8fa;

    border-top:
        3px solid #2187b8;
}

.columbus-cta h3 {
    margin:
        0
        0
        20px;

    font-size:18px;
}

.columbus-cta-row {
    display:flex;

    gap:15px;
}

.columbus-cta-btn {
    display:inline-block;

    flex:1 1 0;

    padding:
        10px
        12px;

    color:#fff !important;

    background:#2187b8;

    border:
        1px solid
        #2187b8;

    border-radius:2px;

    text-align:center;

    font-size:13px;

    font-weight:600;

    text-decoration:none !important;
}

.columbus-cta-btn:hover,
.columbus-cta-btn:focus {
    background:#fff;

    color:#2187b8 !important;
}

/* ----------------------------------------------------------
   RIGHT SIDEBAR
   ---------------------------------------------------------- */

.columbus-sidebar {
    padding-top:0;
}

.columbus-sidebar .frame-content-box {
    margin:
        0
        0
        32px;

    padding:0;

    background:transparent;

    border-radius:0;
}

.columbus-sidebar .frame-content-box h3 {
    margin:
        0
        0
        16px;

    font-size:18px;
    line-height:1.3;
}

.columbus-sidebar .frame-content-box img {
    display:block;

    width:100%;
    height:auto;

    margin:
        0
        0
        14px;
}

.columbus-sidebar .frame-content-box p {
    margin-bottom:0;
}

.columbus-sidebar a.arrow {
    display:block;

    padding-left:16px;

    font-size:13px;
    line-height:1.4;

    color:#2187b8;
}

/* VIDEO */

.columbus-sidebar-video {
    margin:
        0
        0
        35px;
}

.columbus-sidebar-video h5 {
    margin:
        0
        0
        14px;

    font-size:16px;
    line-height:1.35;

    color:#2187b8;
}

.columbus-video {
    position:relative;

    width:100%;

    padding-bottom:56.25%;

    height:0;

    overflow:hidden;

    background:#111;
}

.columbus-video iframe {
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    border:0;
}

/* ----------------------------------------------------------
   MEDIUM DESKTOP / TABLET
   ---------------------------------------------------------- */

@media (max-width:1199px) {

    .columbus-content {
        width:970px;
    }

    .columbus-hotspot-stage {
        max-width:570px;
    }

    .columbus-model-image {
        height:220px;
    }

    .columbus-model-image img {
        max-height:215px;
    }
}

/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (max-width:991px) {

    .columbus-content {
        width:750px;
    }

    .columbus-main {
        width:66.666667%;
    }

    .columbus-sidebar {
        width:33.333333%;
    }

    .columbus-content h1,
    .columbus-content h2 {
        font-size:30px;
    }

    .columbus-models {
        flex-wrap:wrap;
    }

    .columbus-model {
        width:50%;
        margin-bottom:30px;
    }

    .columbus-quality-grid {
        flex-direction:column;
        gap:15px;
    }

    .columbus-cta-row {
        flex-direction:column;
    }
}

/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width:767px) {

    .columbus-content {
        width:100%;
        max-width:none;

        padding:
            35px
            15px
            50px;
    }

    .columbus-content-row {
        display:block;
        margin:0;
    }

    .columbus-main,
    .columbus-sidebar {
        width:100%;
        padding:0;
    }

    .columbus-sidebar {
        margin-top:45px;
    }

    .columbus-content h1,
    .columbus-content h2 {
        font-size:28px;
    }

    .columbus-content h3 {
        font-size:22px;
    }

    .columbus-model-image {
        height:215px;
    }

    .columbus-hotspot-stage {

    }

    .columbus-hotspot {
        width:28px;
        height:28px;
    }

    .columbus-hotspot-popup {
        width:
            calc(100% - 24px);

        max-width:360px;
    }

    .columbus-tech-inner {
        overflow-x:auto;
    }

    .columbus-tech table {
        min-width:680px;
    }
}

/* ----------------------------------------------------------
   SMALL MOBILE
   ---------------------------------------------------------- */

@media (max-width:480px) {

    .columbus-model {
        width:100%;
    }

    .columbus-model-image {
        height:auto;
    }

    .columbus-model-image img {
        max-height:260px;
    }
}

/* ==========================================================
   COLUMBUS VISUAL TUNE V4A
   final spacing / scale correction
   ========================================================== */

/* MODELS */

.columbus-models {
    margin-top:20px;
    margin-bottom:65px;
}

.columbus-model {
    padding-left:15px;
    padding-right:15px;
}

.columbus-model h5 {
    margin-bottom:18px;
}

.columbus-model-image {
    height:275px;
    margin-bottom:12px;
}

.columbus-model-image img {
    max-height:270px;
}

/* FEATURE / HOTSPOTS */

.columbus-hotspot-component {
    margin-top:25px;
    margin-bottom:58px;
}

.columbus-hotspot-stage {
    max-width:660px;
}

/* QUALITY */

.columbus-quality-grid {
    gap:30px;
    margin-top:25px;
    margin-bottom:55px;

    align-items:stretch;
}

.columbus-quality-box {
    display:flex;
    flex-direction:column;

    min-height:235px;

    padding:20px 18px;
}

.columbus-quality-box p {
    margin-bottom:20px;
}

/* VARIANTS */

.columbus-variant {
    margin-bottom:42px;
}

.columbus-variant h3 {
    margin-bottom:17px;
}

/* TECH */

.columbus-tech {
    margin-top:55px;
    margin-bottom:55px;
}

/* CTA */

.columbus-cta {
    margin-top:55px;
}

/* SIDEBAR */

.columbus-sidebar .frame-content-box {
    margin-bottom:38px;
}

.columbus-sidebar-video {
    margin-bottom:40px;
}

/* medium desktop */

@media (max-width:1199px) {

    .columbus-hotspot-stage {
        max-width:610px;
    }

    .columbus-model-image {
        height:245px;
    }

    .columbus-model-image img {
        max-height:240px;
    }
}

/* tablet */

@media (max-width:991px) {

    .columbus-model-image {
        height:240px;
    }

    .columbus-quality-box {
        min-height:0;
    }
}

/* mobile */

@media (max-width:767px) {

    .columbus-models {
        margin-bottom:45px;
    }

    .columbus-hotspot-stage {
        max-width:100%;
    }

    .columbus-quality-grid {
        margin-bottom:45px;
    }
}

/* ==========================================================
   COLUMBUS JOOMLA ARTICLE GRID FIX V4C2
   remove Joomla legacy col-md-9 / col-md-3 article layout
   ========================================================== */

/* Joomla page title */
.item-page > .page-header {
    display:none !important;
}

/*
 * Joomla renders articleBody as col-md-9.
 * COLUMBUS must use the complete available width.
 */
.item-page > [itemprop="articleBody"].col-md-9 {
    float:none !important;

    width:100% !important;

    margin:0 !important;

    padding-left:0 !important;
    padding-right:0 !important;
}

/*
 * Legacy article image occupies the remaining col-md-3.
 * COLUMBUS already contains its own product hero.
 */
.item-page > .item-image,
.item-page > .item-image.col-md-3,
.item-page > .pull-none.item-image {
    display:none !important;

    float:none !important;

    width:0 !important;

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

/* clear legacy Bootstrap float behaviour */

.item-page:before,
.item-page:after {
    content:" ";
    display:table;
}

.item-page:after {
    clear:both;
}

/* ==========================================================
   COLUMBUS DE EXACT GEOMETRY V4D
   content grid based on wachtel.de
   ========================================================== */

.columbus-content {
    padding-top:55px !important;
    padding-bottom:60px;
}

.columbus-content-row {
    width:1170px;
    max-width:100%;

    margin-left:auto !important;
    margin-right:auto !important;
}

.columbus-main {
    box-sizing:border-box;

    width:75% !important;

    padding-left:15px !important;
    padding-right:15px !important;
}

.columbus-sidebar {
    box-sizing:border-box;

    width:25% !important;

    padding-left:15px !important;
    padding-right:15px !important;
    padding-top:0 !important;
}

/*
 * Remove previous spacing correction.
 * German geometry uses 55px from detail-page.
 */

@media (min-width:992px) {

    .columbus-content {
        padding-top:55px !important;
    }

    .columbus-sidebar {
        padding-top:0 !important;
    }
}

/* medium desktop */

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

    .columbus-content-row {
        width:970px;
    }
}

/* tablet */

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

    .columbus-content-row {
        width:750px;
    }

    .columbus-main {

    }

    .columbus-sidebar {

    }
}

/* mobile */

@media (max-width:767px) {

    .columbus-content-row {
        width:100%;
    }

    .columbus-main,
    .columbus-sidebar {
        width:100% !important;

        padding-left:0 !important;
        padding-right:0 !important;
    }
}

/* ==========================================================
   COLUMBUS DE CONTENT GRID EXACT V4F
   measured 1:1 against wachtel.de
   ========================================================== */

/*
 * The full-bleed wrapper must not consume horizontal space.
 * The inner row itself defines the Bootstrap container width.
 */

@media (min-width:1200px) {

    .columbus-content {
        padding-left:0 !important;
        padding-right:0 !important;
    }

    .columbus-content-row {

    }

    .columbus-main {

    }

    .columbus-sidebar {

    }
}

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

    .columbus-content {
        padding-left:0 !important;
        padding-right:0 !important;
    }

    .columbus-content-row {

    }

    .columbus-main {

    }

    .columbus-sidebar {

    }
}

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

    .columbus-content {
        padding-left:0 !important;
        padding-right:0 !important;
    }

    .columbus-content-row {

    }

    .columbus-main {

    }

    .columbus-sidebar {

    }
}

/* Mobile keeps normal side spacing */

@media (max-width:767px) {

    .columbus-content {

    }

    .columbus-content-row {

    }
}

/* ==========================================================
   COLUMBUS CONTENT TRUE FULLBLEED V4G
   align content grid exactly with DE / hero grid
   ========================================================== */

/*
 * The Joomla article is nested inside the padded #main .container.
 * Break only the outer COLUMBUS content wrapper out to viewport width.
 * The inner row then behaves exactly like the DE Bootstrap container.
 */

.columbus-content {
    position:relative !important;

    box-sizing:border-box !important;

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

    left:50% !important;

    margin-left:-50vw !important;
    margin-right:0 !important;

    padding-left:0 !important;
    padding-right:0 !important;
}

/* desktop >= 1200 */

@media (min-width:1200px) {

    .columbus-content-row {
        width:1170px !important;
        max-width:1170px !important;

        margin-left:auto !important;
        margin-right:auto !important;
    }

    .columbus-main {
        width:75% !important;
    }

    .columbus-sidebar {
        width:25% !important;
    }
}

/* desktop 992–1199 */

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

    .columbus-content-row {
        width:970px !important;
        max-width:970px !important;

        margin-left:auto !important;
        margin-right:auto !important;
    }

    .columbus-main {
        width:75% !important;
    }

    .columbus-sidebar {
        width:25% !important;
    }
}

/* tablet */

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

    .columbus-content-row {
        width:750px !important;
        max-width:750px !important;

        margin-left:auto !important;
        margin-right:auto !important;
    }

    .columbus-main {
        width:66.666667% !important;
    }

    .columbus-sidebar {
        width:33.333333% !important;
    }
}

/* mobile */

@media (max-width:767px) {

    .columbus-content {
        width:100% !important;

        left:auto !important;

        margin-left:0 !important;

        padding-left:15px !important;
        padding-right:15px !important;
    }

    .columbus-content-row {
        width:100% !important;
        max-width:100% !important;
    }
}

/* ==========================================================
   COLUMBUS MODEL INTERACTION V4H
   model zoom + detail overlay
   ========================================================== */

.columbus-model {
    position:relative;
    z-index:1;
}

.columbus-model-image {
    position:relative;
    overflow:visible;
}

.columbus-model-image img {
    transition:
        transform .22s ease,
        filter .22s ease;

    transform-origin:center center;

    will-change:transform;
}

/* desktop hover */

@media (hover:hover) and (pointer:fine) {

    .columbus-model:hover {
        z-index:20;
    }

    .columbus-model:hover .columbus-model-image img {
        transform:scale(1.15);

        filter:
            drop-shadow(
                0 12px 16px
                rgba(0,0,0,.20)
            );
    }
}

/* active state for click/touch */

.columbus-model.is-model-active {
    z-index:25;
}

.columbus-model.is-model-active .columbus-model-image img {
    transform:scale(1.15);

    filter:
        drop-shadow(
            0 12px 16px
            rgba(0,0,0,.20)
        );
}

/* details */

.columbus-model-detail {
    display:none;

    position:absolute;

    left:50%;
    top:100%;

    z-index:50;

    width:250px;
    max-width:calc(100vw - 30px);

    margin-top:8px;

    padding:15px 16px;

    transform:translateX(-50%);

    background:#f5f8fa;

    border-top:3px solid #2187b8;

    box-shadow:
        0 7px 22px
        rgba(0,0,0,.18);

    text-align:left;
}

.columbus-model-detail strong {
    display:block;

    margin-bottom:7px;

    color:#2187b8;

    font-size:15px;
    font-weight:600;
}

.columbus-model-detail p {
    margin:0 0 8px !important;

    font-size:13px !important;
    line-height:1.45 !important;
}

.columbus-model-detail p:last-child {
    margin-bottom:0 !important;
}

/* show on hover/focus */

@media (hover:hover) and (pointer:fine) {

    .columbus-model:hover .columbus-model-detail,
    .columbus-model:focus-within .columbus-model-detail {
        display:block;
    }
}

.columbus-model.is-model-active .columbus-model-detail {
    display:block;
}

/* clickable model */

.columbus-model-trigger {
    display:block;

    width:100%;

    padding:0;

    border:0;
    background:transparent;

    color:inherit;

    cursor:pointer;

    text-align:inherit;
}

.columbus-model-trigger:focus {
    outline:
        2px solid
        rgba(33,135,184,.45);

    outline-offset:4px;
}

/* mobile */

@media (max-width:767px) {

    .columbus-model-detail {
        position:relative;

        left:auto;
        top:auto;

        width:100%;
        max-width:none;

        margin:
            10px
            0
            20px;

        transform:none;
    }

    .columbus-model.is-model-active .columbus-model-image img {
        transform:scale(1.08);
    }
}

/* ==========================================================
   COLUMBUS MODEL DETAILS V4H1
   DE-like model detail tooltip
   ========================================================== */

.columbus-model {
    cursor:pointer;
}

.columbus-model::after {
    content:
        attr(data-model-title)
        "\A\A"
        attr(data-model-detail);

    white-space:pre-wrap;

    display:none;

    position:absolute;

    z-index:100;

    left:50%;
    top:100%;

    width:280px;
    max-width:calc(100vw - 30px);

    margin-top:10px;

    padding:16px 18px;

    transform:translateX(-50%);

    background:#f5f8fa;

    border-top:3px solid #2187b8;

    box-shadow:
        0 8px 24px
        rgba(0,0,0,.20);

    color:#333;

    font-size:13px;
    line-height:1.45;

    text-align:left;
}

/* desktop */

@media (hover:hover) and (pointer:fine) {

    .columbus-model:hover::after,
    .columbus-model:focus::after {
        display:block;
    }
}

/* click/tap */

.columbus-model.is-model-active::after {
    display:block;
}

/* active model */

.columbus-model:hover,
.columbus-model.is-model-active,
.columbus-model:focus {
    z-index:100;
    outline:none;
}

/* mobile */

@media (max-width:767px) {

    .columbus-model::after {
        position:relative;

        left:auto;
        top:auto;

        width:100%;
        max-width:none;

        margin:
            12px
            0
            22px;

        transform:none;
    }
}

/* ==========================================================
   COLUMBUS DE TYPOGRAPHY V4I
   local typography match to wachtel.de
   ========================================================== */

.columbus-content,
.columbus-content p,
.columbus-content li,
.columbus-content td,
.columbus-content th {
    font-family:
        "Raleway",
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif !important;
}

.columbus-main h2 {
    font-family:
        "Raleway",
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif !important;

}

.columbus-main h3 {
    font-family:
        "Raleway",
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif !important;

}

.columbus-main p {
    font-size:24px !important;

}

/* keep tables / technical detail readable */
.columbus-main table,
.columbus-main table p,
.columbus-main table td,
.columbus-main table th,
.columbus-sidebar,
.columbus-sidebar p {
    font-size:14px !important;
    line-height:1.45 !important;
}

@media (max-width:767px) {

    .columbus-main h2 {
        font-size:30px !important;
    }

    .columbus-main h3 {
        font-size:24px !important;
    }

    .columbus-main p {
        font-size:18px !important;
    }
}

/* ==========================================================
   COLUMBUS DE BODY TYPOGRAPHY V4I1
   correction after visual DE comparison
   ========================================================== */

.columbus-main p {
    font-family:
        "Raleway",
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif !important;

    font-size:16px !important;
    font-weight:400 !important;
    line-height:1.45 !important;
}

.columbus-main li {
    font-size:16px !important;
    line-height:1.45 !important;
}

/* headings remain DE-like */

.columbus-main h2 {
    font-size:34px !important;
    font-weight:600 !important;
    line-height:1.1 !important;
}

.columbus-main h3 {
    font-size:26px !important;
    font-weight:600 !important;
    line-height:1.1 !important;
}

/* mobile */

@media (max-width:767px) {

    .columbus-main p,
    .columbus-main li {
        font-size:16px !important;
    }

}

/* ==========================================================
   COLUMBUS MODEL IMAGE TOP ALIGN V4J
   match DE vertical model image placement
   ========================================================== */

.columbus-model-image {
    align-items:flex-start !important;
    justify-content:flex-start !important;
}

.columbus-model-image img {
    align-self:flex-start !important;
    margin-top:0 !important;
}

/* ==========================================================
   COLUMBUS DE CONTENT H1 V4L
   exact content title sizing from wachtel.de
   HERO NOT AFFECTED
   ========================================================== */

.columbus-main > h1 {
    font-family:
        "Raleway",
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif !important;

    font-size:55px !important;
    line-height:1.1 !important;
}

/* ==========================================================
   COLUMBUS HORIZONTAL OVERFLOW CLIP V4M
   preserve existing 100vw hero/content geometry
   remove scrollbar-width overflow only
   HERO GEOMETRY NOT CHANGED
   ========================================================== */

body #main {
    overflow-x:clip;
}

/* fallback for browsers without overflow:clip */
@supports not (overflow-x:clip) {
    body #main {
        overflow-x:hidden;
    }
}

/* ==========================================================
   COLUMBUS MODEL IMAGE AUTO HEIGHT V4N
   remove unused vertical space below model images
   HERO / MENU / GRID NOT AFFECTED
   ========================================================== */

.columbus-model-image {
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
}

.columbus-model-image img {
    margin-bottom:0 !important;
}

/* ==========================================================
   COLUMBUS DE BOTTOM SECTIONS V4O
   technical accordion + CTA matched to wachtel.de
   HERO / MODELS / SIDEBAR / MENU NOT AFFECTED
   ========================================================== */

@media (min-width:768px) {

    /* ------------------------------------------------------
       TECHNICAL DATA ACCORDION
       DE measured:
       box 71px
       margin-top 64px
       margin-bottom 80px
       padding 20px 0 5px
       ------------------------------------------------------ */

    .columbus-tech {
        box-sizing:border-box !important;

        margin-top:64px !important;
        margin-bottom:80px !important;

        padding:
            20px
            0
            5px
            0 !important;

        background:transparent !important;

        border-top:
            1px solid #e8e8e8 !important;

        border-bottom:
            1px solid #e8e8e8 !important;

        border-left:0 !important;
        border-right:0 !important;
    }

    .columbus-tech > summary {
        position:relative !important;

        list-style:none !important;

        box-sizing:border-box !important;

        margin:
            0
            0
            15px
            0 !important;

        padding:
            0
            30px
            0
            0 !important;

        font-family:
            "Raleway",
            "Helvetica Neue",
            Helvetica,
            Arial,
            sans-serif !important;

        font-size:26px !important;
        font-weight:600 !important;
        line-height:1.1 !important;

        color:#212121 !important;

        background:transparent !important;

        cursor:pointer;
    }

    .columbus-tech > summary::-webkit-details-marker {
        display:none !important;
    }

    .columbus-tech > summary::marker {
        content:"" !important;
    }

    /* DE-like plus on right */

    .columbus-tech > summary::after {
        content:"+" !important;

        position:absolute !important;

        top:50% !important;
        right:0 !important;

        transform:translateY(-50%) !important;

        font-family:
            Arial,
            sans-serif !important;

        font-size:28px !important;
        font-weight:400 !important;
        line-height:1 !important;

        color:#bdbdbd !important;
    }

    .columbus-tech[open] > summary::after {
        content:"−" !important;
    }

    /* ------------------------------------------------------
       CTA BOX
       DE measured:
       width 698px
       height 237px
       padding 15px
       background #f5f8fa
       no blue top border
       ------------------------------------------------------ */

    .columbus-cta {
        box-sizing:border-box !important;

        min-height:237px !important;

        margin-top:0 !important;
        margin-bottom:40px !important;

        padding:15px !important;

        background:#f5f8fa !important;

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

    /* DE title:
       26px / 600 / 28.6
       top margin 15
       bottom margin 25
    */

    .columbus-cta > h3 {
        margin:
            15px
            0
            25px
            0 !important;

        padding:0 !important;

        font-family:
            "Raleway",
            "Helvetica Neue",
            Helvetica,
            Arial,
            sans-serif !important;

        font-size:26px !important;
        font-weight:600 !important;
        line-height:1.1 !important;

        color:#2187b8 !important;
    }

    /* Put buttons at same vertical level as DE */

    .columbus-cta-row {
        display:flex !important;

        justify-content:space-between !important;

        gap:15px !important;

        margin-bottom:0 !important;

        padding:0 !important;
    }

    /* DE buttons:
       16px / 400
       padding 12px 30px
       47px height
       #0075ad
    */

    .columbus-cta-btn {
        box-sizing:border-box !important;

        flex:
            0
            0
            auto !important;

        font-family:
            "Raleway",
            "Helvetica Neue",
            Helvetica,
            Arial,
            sans-serif !important;

        font-size:16px !important;
        font-weight:400 !important;
        line-height:1.42 !important;

        color:#fff !important;

        background:#0075ad !important;

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

        text-align:center !important;

    }

}

/* ----------------------------------------------------------
   MOBILE
   preserve compact responsive behaviour
   ---------------------------------------------------------- */

@media (max-width:767px) {

    .columbus-tech > summary {
        font-size:20px !important;
        line-height:1.2 !important;
    }

    .columbus-cta {
        min-height:0 !important;
    }

    .columbus-cta-row {
        display:flex !important;
        flex-direction:column !important;
        gap:10px !important;
        margin-top:25px !important;
    }

    .columbus-cta-btn {
        width:100% !important;
    }
}

/* ==========================================================
   COLUMBUS CTA BUTTON GRID V4O1
   DE-like three-column button distribution
   ========================================================== */

@media (min-width:768px) {

    .columbus-cta-row {
        display:grid !important;
        grid-template-columns:
            repeat(3, 1fr) !important;

        align-items:center !important;

        gap:0 !important;

        margin-top:59px !important;
    }

    .columbus-cta-btn {
        justify-self:center !important;

        width:auto !important;
        min-width:0 !important;

        margin:0 !important;

        padding:
            12px
            30px !important;

        white-space:nowrap !important;
    }

}

/* ==========================================================
   COLUMBUS CTA VERTICAL TUNE V4O2
   final DE-like vertical spacing
   ========================================================== */

@media (min-width:768px) {

    .columbus-cta {
        padding-top:20px !important;
        padding-bottom:20px !important;
    }

    .columbus-cta > h3 {
        margin-top:10px !important;
        margin-bottom:30px !important;
    }

    .columbus-cta-row {
        margin-top:48px !important;
    }

}

/* ==========================================================
   COLUMBUS DE CTA SEPARATOR V4O3
   blue separator between technical data and CTA
   ========================================================== */

@media (min-width:768px) {

    .columbus-cta {
        position:relative !important;
    }

    .columbus-cta::before {
        content:"" !important;

        position:absolute !important;

        left:0 !important;
        right:0 !important;

        top:-52px !important;

        height:2px !important;

        background:#2187b8 !important;

        pointer-events:none !important;
    }

}

/* mobile: separator remains closer to CTA */

@media (max-width:767px) {

    .columbus-cta {
        position:relative !important;
    }

    .columbus-cta::before {
        content:"" !important;

        position:absolute !important;

        left:0 !important;
        right:0 !important;

        top:-30px !important;

        height:2px !important;

        background:#2187b8 !important;

        pointer-events:none !important;
    }

}

/* ===== INFRA SEMILIFT TEASER START ===== */

.infra-equipment-title {
    width: 100%;
    margin: 0;
    text-align: center;
}

.infra-equipment-teaser {
    width: 100%;
    margin: 48px 0 55px;
}

.infra-equipment-grid {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 54px;
    flex-wrap: nowrap;
}

.infra-equipment-card {
    flex: 0 0 245px;
    width: 245px;
    text-align: center;
    transform-origin: center center;
    transition: transform .25s ease;
}

.infra-equipment-card:hover {
    transform: scale(1.10);
}

.infra-equipment-card h5 {
    margin: 0 0 18px;
    font-family: "Raleway","Helvetica Neue",Helvetica,Arial,sans-serif !important;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.1;
    color: #2187b8;
    text-transform: uppercase;
}

.infra-equipment-image {
    width: 100%;
    margin: 0 auto 18px;
    line-height: 0;
}

.infra-equipment-image img {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
    margin: 0 auto;
}

.infra-equipment-caption {
    margin: 0;
    font-family: "Raleway","Helvetica Neue",Helvetica,Arial,sans-serif !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.35;
    text-align: center;
    color: #222;
}

.infra-equipment-caption span {
    color: #2187b8;
    font-weight: 600;
}

.infra-equipment-caption sup {
    font-size: 65%;
    line-height: 0;
    vertical-align: super;
}

@media (max-width: 767px) {

    .infra-equipment-teaser {
        margin: 32px 0 45px;
    }

    .infra-equipment-grid {
        flex-wrap: wrap;
        gap: 40px;
    }

    .infra-equipment-card {
        flex: 0 0 100%;
        width: 100%;
        max-width: 280px;
    }

    .infra-equipment-card:hover {
        transform: scale(1.05);
    }

    .infra-equipment-image img {
        max-width: 220px;
    }
}

/* ===== INFRA SEMILIFT TEASER END ===== */

/* ===== INFRA EQUIPMENT LINKS ===== */

.infra-equipment-caption a {
    color: #2187b8;
    font-weight: 600;
    text-decoration: none;
}

.infra-equipment-caption a:hover,
.infra-equipment-caption a:focus {
    color: #2187b8;
    text-decoration: underline;
}

/* ===== COLUMBUS HOTSPOT SCALE START ===== */

.columbus-hotspot-component {
    width: 100%;
    text-align: center;
}

.columbus-hotspot-stage {
    position: relative;
    width: 420px;
    max-width: 100%;
    margin: 0 auto;
}

.columbus-hotspot-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.columbus-hotspot-help {
    width: 420px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center !important;
}

@media (max-width: 767px) {

    .columbus-hotspot-stage,
    .columbus-hotspot-help {
        width: 100%;
    }
}

/* ===== COLUMBUS HOTSPOT SCALE END ===== */

/* ===== COLUMBUS HOTSPOT HELP FINAL ===== */

.columbus-feature.columbus-hotspot-component .columbus-hotspot-help {
    display: block !important;
    width: 420px !important;
    max-width: 100% !important;
    margin: 14px auto 0 !important;
    padding: 0 !important;
    text-align: center !important;
    float: none !important;
}

@media (max-width: 767px) {
    .columbus-feature.columbus-hotspot-component .columbus-hotspot-help {
        width: 100% !important;
    }
}

/* ===== COLUMBUS HOTSPOT HELP FINAL END ===== */

/* ===== COLUMBUS / INFRA SIDEBAR TYPOGRAPHY ===== */

.columbus-sidebar {
    font-family: "Raleway","Helvetica Neue",Helvetica,Arial,sans-serif !important;
}

.columbus-sidebar h3 {
    font-size: 26px !important;
    font-weight: 600 !important;
    line-height: 28.6px !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
}

.columbus-sidebar a.arrow {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 23.2px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.columbus-sidebar h5 {
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 19.8px !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
}

.columbus-sidebar p,
.columbus-sidebar a:not(.arrow) {
    font-size: 16px !important;
    line-height: 23.2px !important;
}

.columbus-sidebar strong,
.columbus-sidebar b {
    font-weight: 600 !important;
}

/* ===== COLUMBUS / INFRA SIDEBAR TYPOGRAPHY END ===== */