<style>
    /* Ensure Barlow font is loaded if not globally */
    @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;600;700&display=swap');

    /* General Module Styling */
    .komplyzen-module-baukasten-wrapper {
        font-family: 'Barlow', sans-serif;
        background-color: #f8f9fa; /* Light background */
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 15px 0; /* Reduced padding */
        width: 100%; /* Ensure wrapper takes full available width */
    }
    .komplyzen-module-baukasten-container {
        max-width: 900px;
        width: 100%;
        background-color: #ffffff;
        border-radius: 12px;
        padding: 20px; /* Reduced padding */
        border: 1px solid #dee2e6; /* Light border color */
        text-align: center; /* Ensures main container content is centered */
        margin: 0 auto; /* Added for robust centering */
    }
    .dimension-category-title { /* H3 styling */
        font-size: 32px; /* Increased font size to 32px */
        font-weight: 600; /* Semi-bold */
        color: #17d0c3 !important; /* Main color, not black */
        margin-top: 25px;
        margin-bottom: 15px;
        padding-bottom: 8px;
        border-bottom: 2px solid #17d0c3 !important;
        display: inline-block;
        letter-spacing: 0.05em;
        text-decoration: none; /* Removed underline */
    }
    .dimension-category-title:hover {
        color: #17d0c3 !important; /* Keep color on hover */
        opacity: 0.8; /* Slight hover effect */
    }
    .module-card {
        background-color: #e9ecef; /* Lighter background for modules */
        color: #42494B; /* Applied new dark text color */
        padding: 10px 15px;
        border-radius: 8px;
        font-weight: 600; /* Module card name is semi-bold */
        text-align: center;
        transition: transform 0.2s ease;
        cursor: pointer;
        border: 1px solid #dee2e6;
        display: block;
        text-decoration: none;
        font-size: 1rem; /* Kept 1rem for card title, description is 18px */
    }
    .module-card:hover {
        transform: translateY(-3px);
        color: #42494B; /* Keep text color on hover */
    }
    .top-level-module {
        background-color: #17d0c3 !important; /* Main color */
        color: #ffffff;
        padding: 25px 30px; /* Increased padding */
        border-radius: 12px;
        font-size: 1.8rem; /* Increased font size */
        font-weight: 700;
        text-align: center;
        margin-bottom: 30px; /* Increased margin to separate more */
        display: block;
        text-decoration: none;
    }
    .top-level-module .main-title {
        font-size: 1.8rem; /* Explicitly set for main title within */
        font-weight: 700;
        margin-bottom: 5px;
    }
    .top-level-module .sub-description {
        font-size: 1rem; /* Adjusted font size for sub-description */
        font-weight: 400;
        opacity: 0.9;
        margin-top: 5px;
    }
    .top-level-module:hover {
        color: #ffffff;
    }
    .dimension-section {
        background-color: #ffffff;
        border: 1px solid #dee2e6;
        border-radius: 12px;
        padding: 15px;
        margin-bottom: 15px;
    }
    .module-description { /* Text within module cards */
        font-size: 18px; /* Applied 18px normal */
        font-weight: 400; /* Normal */
        color: #42494B; /* Applied new dark text color */
        margin-top: 5px;
    }
    .grid {
        justify-content: center;
        margin: 0 auto;
        width: 100%;
    }
    @media (max-width: 768px) {
        .grid {
            grid-template-columns: 1fr;
        }
    }

    /* Styles for pyramid layering within dimensions */
    .pyramid-layer {
        border: 1px dashed #dee2e6;
        border-radius: 8px;
        padding: 10px;
        margin-bottom: 10px;
        background-color: #fcfdff;
        position: relative;
    }
    .pyramid-layer-title { /* H4 styling */
        font-size: 24px; /* Increased font size to 24px */
        font-weight: 600; /* Semi-bold */
        color: #42494B; /* Applied new dark text color */
        text-align: center;
        margin-bottom: 8px;
        padding-left: 0;
        border-left: none;
        display: block;
        letter-spacing: 0.03em;
    }
    .pyramid-layer:last-child {
        margin-bottom: 0;
    }
    /* General paragraph text outside of specific modules */
    .komplyzen-module-baukasten-container p {
        font-size: 18px; /* Applied 18px normal */
        font-weight: 400; /* Normal */
        color: #42494B; /* Applied new dark text color */
        margin-bottom: 20px;
    }

    /* Pyramid Level Widths */
    .pyramid-level-bottom .grid { max-width: 100%; }
    .pyramid-level-middle .grid { max-width: 80%; }
    .pyramid-level-top .grid { max-width: 60%; }

    /* Ensure modules within grid are centered */
    .grid > a {
        margin: 0 auto;
    }
</style>