* {
    box-sizing: border-box;
}

body {
    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:
        #f3f6f5;

    color:
        #26332f;
}

.topbar {
    background:
        #315f52;

    color:
        white;

    padding:
        19px
        34px;

    box-shadow:
        0 2px 7px
        rgba(0, 0, 0, 0.15);
}

.brand {
    font-size:
        21px;

    font-weight:
        700;
}

.subtitle {
    margin-top:
        4px;

    font-size:
        13px;

    opacity:
        0.8;
}

.container {
    max-width:
        1180px;

    margin:
        0 auto;

    padding:
        46px
        24px
        60px;
}

.hero {
    margin-bottom:
        34px;
}

.eyebrow {
    color:
        #4f7d6e;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        1.3px;
}

h1 {
    margin:
        8px 0 10px;

    font-size:
        40px;
}

.hero p {
    margin:
        0;

    color:
        #65716d;

    font-size:
        17px;
}

.apps-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        24px;

    margin-bottom:
        28px;
}

.app-card {
    position:
        relative;

    background:
        white;

    padding:
        30px;

    border-radius:
        14px;

    box-shadow:
        0 3px 18px
        rgba(0, 0, 0, 0.07);

    border:
        1px solid
        #e4eae7;
}

.app-card.active {
    border-top:
        5px solid
        #4f7d6e;
}

.app-card.disabled {
    opacity:
        0.63;

    background:
        #f6f7f7;
}

.icon {
    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

    background:
        #eaf2ef;

    color:
        #315f52;

    font-size:
        24px;

    font-weight:
        700;

    margin-bottom:
        22px;
}

.app-status {
    position:
        absolute;

    top:
        27px;

    right:
        27px;

    padding:
        6px 10px;

    border-radius:
        20px;

    font-size:
        11px;

    font-weight:
        700;
}

.app-status.live {
    background:
        #e4f3e9;

    color:
        #347047;
}

.app-status.planned {
    background:
        #eceeed;

    color:
        #707875;
}

h2 {
    margin:
        0 0 13px;

    font-size:
        23px;
}

.app-card p {
    min-height:
        68px;

    color:
        #66716d;

    line-height:
        1.55;
}

ul {
    min-height:
        118px;

    margin:
        20px 0 25px;

    padding-left:
        19px;

    color:
        #58635f;

    line-height:
        1.8;
}

.button {
    display:
        inline-block;

    padding:
        12px
        18px;

    border:
        0;

    border-radius:
        7px;

    background:
        #315f52;

    color:
        white;

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        700;
}

.disabled-button {
    background:
        #9ca4a1;

    cursor:
        not-allowed;
}

.info-card {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    background:
        white;

    border-radius:
        12px;

    padding:
        24px 28px;

    box-shadow:
        0 2px 12px
        rgba(0, 0, 0, 0.05);
}

.info-card h3 {
    margin:
        0 0 8px;
}

.info-card p {
    max-width:
        690px;

    margin:
        0;

    color:
        #6b7571;

    line-height:
        1.5;
}

.users {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;
}

.users span {
    padding:
        7px 11px;

    background:
        #eef3f1;

    color:
        #315f52;

    border-radius:
        20px;

    font-size:
        12px;

    font-weight:
        700;
}

footer {
    margin-top:
        30px;

    text-align:
        center;

    color:
        #8a9390;

    font-size:
        12px;
}


@media (
    max-width: 800px
) {

    .apps-grid {
        grid-template-columns:
            1fr;
    }

    .info-card {
        flex-direction:
            column;

        align-items:
            flex-start;
    }

}

/* Roadmap-Vorschau: nutzt die bestehenden Portal-Karten und Farben. */
.roadmap-intro { margin: 0 0 22px; }
.roadmap-intro h2 { font-size: 20px; margin-bottom: 8px; }
.roadmap-intro p { max-width: 780px; color: #65716d; line-height: 1.55; margin: 0; }
.roadmap-card { position: relative; }
.roadmap-card .roadmap-icon { font-size: 17px; letter-spacing: .03em; }
.roadmap-card h2 { padding-right: 100px; }
.roadmap-card .disabled-button { pointer-events: none; }
@media (max-width: 460px) {
  .roadmap-card h2 { padding-right: 0; margin-top: 38px; }
  .app-status { top: 22px; right: 22px; }
}