/*
 * GK-Business-Produktboxen: Inklusive-Block.
 * Handgeschrieben (kein Build-Output) - ergaenzt content-pricing.css, ohne diese zu veraendern.
 */

/*
 * Business-Badge: einzeilig halten, damit ein zweizeiliger Text ("Unsere Empfehlung")
 * nicht in den darunterliegenden Speed-Header hineinragt.
 */
.content-pricing__promo--business p {
    white-space: nowrap;
}

/*
 * Das Root-TypoScript (page.footerData) blendet site-weit die zweite Haken-Zeile aus
 * (.content-pricing__plan-details > ul > li:nth-child(2) { display: none }) - gedacht fuer die
 * E-Mail-Zeile der Privatkunden-Boxen. In den Business-Boxen steht dort der Telefonanschluss,
 * der sichtbar bleiben muss. !important, weil der footerData-Style erst am Seitenende kommt.
 */
.content-pricing__plan-details--business > ul > li:nth-child(2) {
    display: flex !important;
}

.content-pricing__inklusive {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.content-pricing__inklusive-bar {
    font-family: "Open Sans", "sans-serif";
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    background-color: #005757;
    border-radius: 8px;
    padding: 6px 16px;
    margin: 0;
}

.content-pricing__inklusive-list {
    font-family: "Open Sans", "sans-serif";
    font-weight: 300;
    font-size: 14px;
    color: #005757;
}

.content-pricing__inklusive-list ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/*
 * Haken statt Bullet-Points: dasselbe Haekchen wie in der Haken-Liste darueber, dort als Inline-SVG
 * im Template. Hier als data-URI, weil der Inklusive-Inhalt aus dem RTE kommt - die Redaktion
 * pflegt weiterhin normale <ul><li> und muss nichts anders machen.
 */
.content-pricing__inklusive-list li {
    margin: 0;
    padding-left: 24px;
    position: relative;
}

.content-pricing__inklusive-list li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.4em;
    width: 16px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 21 15' fill='none'%3E%3Cpath d='M1 7.85121L7.01934 14L20 1' stroke='%23005757' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.content-pricing__inklusive-list p {
    margin: 0 0 4px;
}

/*
 * theme.css setzt li/p auf font-weight: 300; der Browser-Default "bolder" landet dann nur
 * bei 400 und die redaktionelle Fettung waere praktisch unsichtbar - daher explizit 700.
 */
.content-pricing__inklusive-list strong,
.content-pricing__inklusive-list b {
    font-weight: 700;
}

.content-pricing__inklusive-list sup {
    font-weight: 400;
    padding-left: 2px;
}