.ourSolutionBox {
    padding: var(--ch-sp-32, 32px);
}

.ourSolutionWrapper {
    display: flex;
    gap: var(--ch-sp-32, 32px);
    flex-wrap: wrap;
}

.ourSolutionBox {
    flex: 0 0 calc(33.33% - 32px);
}
.ourSolutionBox.twoColumnBox {
    flex: 1;
}


.ourSolutionHeadingWrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap:100px;
}

.ourSolutionHeadingWrapper .ourSolutionHeading {
    flex: 1 1 40%;
    text-align: left;
    border-bottom: solid 4px var(--ch-mint-500, #76ffa0);
}

.ourSolutionHeadingWrapper .ourSolutionContent {
    flex: 1 1 45%;
}
.ourSolutionModuleColumn {
    padding: var(--ch-sp-48, 48px);
    background: #F4F4F4;
    border-radius:16px;
}
.ourSolutionImg {
    line-height: 0;
    margin-bottom: var(--ch-sp-20, 20px);
}

.ourSolutionBox {
    display: flex;
    flex-direction: column;
    gap: var(--ch-sp-16, 16px);
    border-radius:8px;
}

.ourSolutionContent p {
    margin: 0;
}

.ourSolutionHeading h4, .ourSolutionHeading h5 {
    margin: 0 0 var(--ch-sp-16, 16px) 0;
}

.ourSolutionHeadingWrapper {
    margin: 0 0 var(--ch-sp-60, 60px);
}

.ourSolutionBoxHeadingDiv h4 {
    color: #fff;
}

.ourSolutionBoxList ul li a {
    color: #fff;
}

.ourSolutionBoxList ul li a {
    display: flex;
    gap: var(--ch-sp-8, 8px);
    text-decoration: none;
    transition: all 0.3s ease;
    align-items: flex-start;
}

.ourSolutionBoxList ul {
    margin: auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ch-sp-15, 15px);
}

.ourSolutionBoxList ul li {flex: 1 1 calc(50% - 20px);}

/* Brueckenkachel "Alle Experten nach Bereich ansehen" — abgesetzt vom Themen-Raster (28.08.2026) */
.ourSolutionBoxList ul li.bridgeLink {
    flex: 1 1 100%;
    margin-top: 9px;
    padding-top: var(--ch-sp-24, 24px);
    border-top: solid 1px rgba(255, 255, 255, 0.2);
}

.ourSolutionBoxList ul li.bridgeLink a {
    color: var(--ch-mint-500, #76FFA0);
    font-weight: 700;
}

.ourSolutionBoxList ul li.bridgeLink a:hover {
    color: #fff;
}

.ourSolutionBoxList ul li a:hover {
    color: #cecece;
}

.ourSolutionBoxHeadingDiv h4 {
    font-weight: normal;
}

.ourSolutionContent p {
    font-size: 14px;
    line-height: 1.57;
}


@media (max-width:991px){
    .ourSolutionBox {
        flex: 0 0 calc(50%% - 32px);
    }
}

@media (max-width:767px){
    .ourSolutionBox {
        flex: 1 1 100%;
    }
    .ourSolutionModuleColumn {
        padding: var(--ch-sp-48, 48px) var(--ch-sp-32, 32px);
    }
    .ourSolutionHeadingWrapper {
        flex-direction: column;
    }
    .ourSolutionHeadingWrapper {
        gap: var(--ch-sp-10, 10px);
    }
    .ourSolutionHeading p {
        margin-top: 0;
    }
    .ourSolutionHeadingWrapper {
        margin: 0 0 var(--ch-sp-40, 40px);
    }
    .ourSolutionBox {
        padding: var(--ch-sp-24, 24px);

    }
    .ourSolutionBoxList ul li {flex: 1 1 100%;}
}

/* HEADING-HIERARCHIE 02.09.2026: Kartentitel h5 -> h3 (Semrush 223).
   Typografie und Abstand bleiben auf dem alten h5-Niveau. */
.ourSolutionHeading .ch-solution-card-title {
    margin: 0 0 var(--ch-sp-16, 16px) 0;
    font-size: 20px !important;
}

/* Aus module.html ausgelagert 2026-09-21 — Punkt 128, Freigabe Olaf 20.09.2026.
   Nur statische Regeln; alles mit HubL bleibt im scope_css-Block der module.html.
   Abnahme: Computed-Style-Vergleich 1440 und 390 px, Sollwert 0 Abweichungen. */
.ourSolutionContentBtn{margin-top:20px;}

{# ch 29.08.2026: Die Textfarben des Themenkastens standen fest auf Weiss (module.css) und
       wurden unlesbar, sobald der Kasten einen hellen Hintergrund bekommt. Sie leiten sich jetzt
       aus der Helligkeit des gewaehlten Hintergrunds ab (YIQ), damit jede Instanz - deutsche und
       englische Startseite, Rollen- und Kategorieseiten - ohne Zutun lesbar bleibt. #}

{# ch 29.08.2026: Die Listenpunkte des ul waren auf dem alten dunklen Grund unsichtbar und
       traten auf hellem Hintergrund als graue Bullets hervor. Sie werden hier abgeschaltet. #}

.ourSolutionBox.twoColumnBox .ourSolutionBoxList ul,
    .ourSolutionBox.twoColumnBox .ourSolutionBoxList ul li {
        list-style: none;
    }