/* Datei: styles/style_DSS.css
   Zusätzliche Styles für die deutschen Zielgruppen-Seiten DSS.html und HLG.html. */

body:is(.page-handwerk, .page-lieferanten, .page-about) {
    --dss-hero-gutter: clamp(1rem, 15vw, 100rem);
    --dss-section-gutter: clamp(1.4rem, 5vw, 6rem);
    --dss-center-gutter: clamp(1.4rem, 5vw, 6rem);
    --dss-content-max: 1200px;

    background: #F3F6FB;
    color: #06103D;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) main {
    background: #F3F6FB;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-eyebrow {
    color: #FF5533;
    font-size: 1.6em;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding-bottom: 0.9em;
}


body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-eyebrow--light {
    color: #4845AF;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-button,
body:is(.page-handwerk, .page-lieferanten, .page-about) .pricing-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.85rem 1.35rem;
    border-radius: 999px;
    font-size: 1.6em;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.15;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-button:hover,
body:is(.page-handwerk, .page-lieferanten, .page-about) .pricing-cta:hover {
    transform: translateY(-1px);
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-button--primary,
body:is(.page-handwerk, .page-lieferanten, .page-about) .pricing-cta {
    background: #FF5533;
    color: #F3F6FB;
    box-shadow: 0 0.8rem 1.8rem rgba(255, 85, 51, 0.25);
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-button--primary:hover,
body:is(.page-handwerk, .page-lieferanten, .page-about) .pricing-cta:hover {
    background: #e9492b;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-button--secondary {
    color: #F3F6FB;
    border: 1px solid rgba(243, 246, 251, 0.45);
    background: rgba(243, 246, 251, 0.08);
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-button--secondary:hover {
    border-color: rgba(243, 246, 251, 0.85);
    background: rgba(243, 246, 251, 0.14);
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-button--light {
    background: #F3F6FB;
    color: #06103D;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-button--ghost-light {
    color: #F3F6FB;
    border: 1px solid rgba(243, 246, 251, 0.45);
    background: transparent;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 0.75fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    width: 100%;
    padding-top: 7.5rem;
    padding-bottom: 7.5rem;
    padding-right: var(--dss-hero-gutter);
    padding-left: var(--dss-hero-gutter);
    background:
        radial-gradient(circle at 18% 25%, rgba(72, 69, 175, 0.5), transparent 28rem),
        radial-gradient(circle at 82% 20%, rgba(255, 85, 51, 0.28), transparent 22rem),
        linear-gradient(135deg, #06103D 0%, #14195f 58%, #4845AF 100%);
    color: #F3F6FB;
    overflow: hidden;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-hero__content {
    max-width: 58rem;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-hero h1 {
    white-space: pre-line;
    font-size: clamp(4.2em, 6vw, 7.4em);
    line-height: 0.98;
    font-weight: 500;
    letter-spacing: -0.04em;
    padding-bottom: 0.35em;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-hero__lead {
    max-width: 49rem;
    color: rgba(243, 246, 251, 0.9);
    font-size: 1.9em;
    line-height: 160%;
    padding-bottom: 1.6em;
}


body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 2.2rem;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-hero__trust span {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 0.75rem;
    border: 1px solid rgba(243, 246, 251, 0.18);
    border-radius: 999px;
    background: rgba(243, 246, 251, 0.08);
    color: rgba(243, 246, 251, 0.9);
    font-size: 1.35em;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-hero__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 24rem;
    justify-self: end;
    padding: 1.6rem;
    border: 1px solid rgba(243, 246, 251, 0.22);
    border-radius: 1.5rem;
    background: rgba(243, 246, 251, 0.1);
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(12px);
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-hero__panel p {
    font-size: 1.55em;
    line-height: 150%;
    color: rgba(243, 246, 251, 0.86);
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-plan-pill {
    align-self: flex-start;
    padding: 0.55rem 0.8rem;
    border-radius: 999px;
    background: #F3F6FB;
    color: #06103D;
    font-size: 1.6em;
    font-weight: 600;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-plan-pill--pro {
    background: #FF5533;
    color: #F3F6FB;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-plan-switch {
    width: 100%;
    height: 1px;
    background: rgba(243, 246, 251, 0.18);
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S3 {
    padding-top: 7rem;
    padding-bottom: 7rem;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S3 .dss-section-heading {
    max-width: 64rem;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S3 h2 {
    max-width: 58rem;
    font-size: clamp(3.4em, 4.4vw, 5.2em);
    line-height: 110%;
    letter-spacing: -0.03em;
    padding-bottom: 0.35em;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S3 .dss-section-lead {
    max-width: 54rem;
    font-size: 1.8em;
    line-height: 165%;
    padding-bottom: 0;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-benefit-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.3rem;
    max-width: 1200px;
    width: 100%;
    padding-top: 3rem;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-benefit-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-height: 14rem;
    padding: 1.4rem;
    background: #ffffff;
    border: 1px solid rgba(6, 16, 61, 0.1);
    border-radius: 1.1rem;
    box-shadow: 0 0.8rem 2rem rgba(6, 16, 61, 0.06);
    color: #06103D;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-benefit-card span {
    color: #4845AF;
    font-size: 1.35em;
    font-weight: 600;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-benefit-card h3 {
    font-size: 1.9em;
    line-height: 125%;
    font-weight: 500;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-benefit-card p {
    color: rgba(6, 16, 61, 0.78);
    font-size: 1.45em;
    line-height: 155%;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-workflow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    max-width: 1200px;
    width: 100%;
    margin: 2.2rem auto 0;
    border-radius: 1.1rem;
    overflow: hidden;
    background: rgba(6, 16, 61, 0.12);
    border: 1px solid rgba(6, 16, 61, 0.1);
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-workflow article {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.2rem;
    background: rgba(255, 255, 255, 0.78);
    color: #06103D;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-workflow strong {
    font-size: 1.55em;
    font-weight: 600;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-workflow span {
    font-size: 1.35em;
    line-height: 150%;
    color: rgba(6, 16, 61, 0.76);
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S3 .S3Grid.dss-screens {
    align-items: stretch;
    padding-top: 3rem;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S3 .S3Grid figure {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden;
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 0.9rem 2.4rem rgba(6, 16, 61, 0.08);
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S3 .S3Grid img {
    border-radius: 0;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S3 .S3Grid figcaption {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem 1.15rem 1.2rem;
    color: #06103D;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S3 .S3Grid figcaption strong {
    font-size: 1.7em;
    font-weight: 600;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S3 .S3Grid figcaption span {
    color: rgba(6, 16, 61, 0.75);
    font-size: 1.4em;
    line-height: 150%;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S31 {
    padding-top: 7rem;
    padding-bottom: 7rem;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S31 .pricing-head {
    text-align: center;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S31 .pricing-intro {
    margin-left: auto;
    margin-right: auto;
    max-width: 58rem;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S31 .pricing-grid {
    gap: 1.5rem;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S31 .pricing-card {
    position: relative;
    overflow: hidden;
    padding: 2.2rem;
    border-radius: 1.35rem;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S31 .pricing-card--pro {
    border-color: rgba(255, 85, 51, 0.35);
    box-shadow: 0 1.2rem 3rem rgba(255, 85, 51, 0.12);
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S31 .pricing-badge {
    align-self: flex-start;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    background: rgba(72, 69, 175, 0.1);
    color: #4845AF;
    font-size: 1.35em;
    font-weight: 600;
    margin-bottom: 1.1rem !important;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S31 .pricing-badge--pro {
    background: rgba(255, 85, 51, 0.12);
    color: #FF5533;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S31 .pricing-kicker {
    font-size: 2.5em;
    color: #06103D;
    padding-bottom: 0.35em;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S31 .pricing-card h3 {
    min-height: 3.7em;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S31 .pricing-price {
    color: #06103D;
    padding-bottom: 0.15em;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S31 .pricing-price span {
    color: rgba(6, 16, 61, 0.7);
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S31 .pricing-yearly {
    color: rgba(6, 16, 61, 0.82);
    font-size: 1.55em;
    line-height: 150%;
    padding-bottom: 0.45em;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S31 .pricing-yearly strong {
    color: #4845AF;
    font-weight: 600;
    white-space: nowrap;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S31 .pricing-list {
    padding-top: 1.3em;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S31 .pricing-note {
    max-width: 1200px;
    margin: 1.4rem auto 0;
    margin-top: 1.5rem !important;
    margin-bottom: 5rem !important;
    padding: 1rem 1.2rem;
    border: 1px solid rgba(6, 16, 61, 0.12);
    border-radius: 0.9rem;
    background: rgba(72, 69, 175, 0.06);
    color: rgba(6, 16, 61, 0.82);
    font-size: 1.45em;
    line-height: 155%;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .plan-compare {
    max-width: 1200px;
    margin: 3rem auto 0;
    padding: 2rem;
    border-radius: 1.35rem;
    background: #ffffff;
    border: 1px solid rgba(6, 16, 61, 0.1);
    box-shadow: 0 1rem 2.5rem rgba(6, 16, 61, 0.07);
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .plan-compare__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.35rem;
    padding-bottom: 1.4rem;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .plan-compare__head .pricing-eyebrow {
    padding-bottom: 0;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .plan-compare h3 {
    color: #06103D;
    font-size: 2.6em;
    font-weight: 500;
    line-height: 125%;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .plan-compare__table-wrap {
    overflow-x: auto;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .plan-compare__table {
    width: 100%;
    border-collapse: collapse;
    color: #06103D;
    font-size: 1.55em;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .plan-compare__table th,
body:is(.page-handwerk, .page-lieferanten, .page-about) .plan-compare__table td {
    padding: 0.95rem 1rem;
    border-bottom: 1px solid rgba(6, 16, 61, 0.1);
    text-align: left;
    vertical-align: middle;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .plan-compare__table thead th {
    background: #06103D;
    color: #F3F6FB;
    font-weight: 500;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .plan-compare__table thead th:first-child {
    border-top-left-radius: 0.7rem;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .plan-compare__table thead th:last-child {
    border-top-right-radius: 0.7rem;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .plan-compare__table tbody th {
    font-weight: 500;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .plan-compare__table tbody tr:nth-child(even) {
    background: rgba(72, 69, 175, 0.045);
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .plan-compare__table td:nth-child(2),
body:is(.page-handwerk, .page-lieferanten, .page-about) .plan-compare__table td:nth-child(3),
body:is(.page-handwerk, .page-lieferanten, .page-about) .plan-compare__table thead th:nth-child(2),
body:is(.page-handwerk, .page-lieferanten, .page-about) .plan-compare__table thead th:nth-child(3) {
    text-align: center;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .plan-compare__table td:nth-child(3) {
    color: #4845AF;
    font-weight: 600;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S30 {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
    background:
        radial-gradient(circle at 85% 25%, rgba(72, 69, 175, 0.55), transparent 22rem),
        linear-gradient(135deg, #06103D 0%, #11174e 100%);
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S30 h2 {
    max-width: 34rem;
    line-height: 115%;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S30 .form-intro {
    max-width: 34rem;
    color: rgba(243, 246, 251, 0.84);
    font-size: 1.7em;
    line-height: 160%;
    padding-bottom: 1.6rem;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S30 .form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S30 form {
    max-width: none;
    padding: 1.4rem;
    border-radius: 1.2rem;
    background: rgba(243, 246, 251, 0.08);
    border: 1px solid rgba(243, 246, 251, 0.15);
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S30 input,
body:is(.page-handwerk, .page-lieferanten, .page-about) #S30 textarea {
    border: 1px solid rgba(243, 246, 251, 0.3);
    border-radius: 0.75rem;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S30 textarea::placeholder {
    color: rgba(6, 16, 61, 0.45);
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S30 button {
    align-self: flex-start;
    border-radius: 999px;
    background: #FF5533;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S30 button:hover {
    background: #e9492b;
}

@media (max-width: 1100px) {
    body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-benefit-grid,
    body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-workflow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-hero,
    body:is(.page-handwerk, .page-lieferanten, .page-about) #S30 {
        grid-template-columns: 1fr;
    }

    body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-hero__panel {
        justify-self: start;
        max-width: 100%;
    }

    body:is(.page-handwerk, .page-lieferanten, .page-about) #S31 .pricing-card h3 {
        min-height: auto;
    }

    body:is(.page-handwerk, .page-lieferanten, .page-about) .plan-compare__head {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 600px) {
    body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-hero,
    body:is(.page-handwerk, .page-lieferanten, .page-about) #S3,
    body:is(.page-handwerk, .page-lieferanten, .page-about) #S31,
    body:is(.page-handwerk, .page-lieferanten, .page-about) #S30 {
        padding-left: 1.4rem !important;
        padding-right: 1.4rem !important;
    }

    body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-hero {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-hero h1 {
        font-size: 4.4em;
    }

    body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-hero__lead {
        font-size: 1.65em;
    }

    body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-button,
    body:is(.page-handwerk, .page-lieferanten, .page-about) .pricing-cta {
        width: 100%;
    }

    body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-benefit-grid,
    body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-workflow {
        grid-template-columns: 1fr;
    }

    body:is(.page-handwerk, .page-lieferanten, .page-about) #S3 h2,
    body:is(.page-handwerk, .page-lieferanten, .page-about) #S31 h2,
    body:is(.page-handwerk, .page-lieferanten, .page-about) #S30 h2 {
        text-align: left;
    }

    body:is(.page-handwerk, .page-lieferanten, .page-about) .plan-compare {
        padding: 1.2rem;
    }

    body:is(.page-handwerk, .page-lieferanten, .page-about) .plan-compare__table {
        min-width: 42rem;
    }
}

/* Finaler Breiten-Fix DSS:
   1) Der S3-Textkopf bleibt links bündig mit dem Hero-Text.
   2) Vorteilskarten, Screens, Tarife, Hinweis und Funktionsvergleich bleiben als Blöcke zentriert.
   Stelle zum Einfügen: styles/style_DSS.css, ganz unten nach den @media-Regeln. */
body:is(.page-handwerk, .page-lieferanten, .page-about) {
    --dss-hero-gutter: clamp(1rem, 15vw, 100rem);
    --dss-section-gutter: clamp(1.4rem, 5vw, 6rem);
    --dss-center-gutter: clamp(1.4rem, 5vw, 6rem);
    --dss-content-max: 1200px;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .dss-hero {
    padding-left: var(--dss-hero-gutter) !important;
    padding-right: var(--dss-hero-gutter) !important;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S3,
body:is(.page-handwerk, .page-lieferanten, .page-about) #S31 {
    box-sizing: border-box !important;
    width: 100% !important;
    padding-left: var(--dss-center-gutter) !important;
    padding-right: var(--dss-center-gutter) !important;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S3 {
    --dss-s3-heading-offset: max(0px, calc(var(--dss-hero-gutter) - var(--dss-center-gutter)));
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
}

/* Nur dieser obere S3-Textblock wandert nach links auf die Hero-Textkante. */
body:is(.page-handwerk, .page-lieferanten, .page-about) #S3 > .S3section.dss-section-heading {
    box-sizing: border-box !important;
    align-self: stretch !important;
    width: min(64rem, calc(100% - var(--dss-s3-heading-offset))) !important;
    max-width: 64rem !important;
    margin-left: var(--dss-s3-heading-offset) !important;
    margin-right: auto !important;
    overflow: visible !important;
    text-align: left !important;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S3 > .S3section.dss-section-heading .dss-eyebrow,
body:is(.page-handwerk, .page-lieferanten, .page-about) #S3 > .S3section.dss-section-heading h2,
body:is(.page-handwerk, .page-lieferanten, .page-about) #S3 > .S3section.dss-section-heading .dss-section-lead {
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
}

/* Alles darunter bleibt als kompletter Block mittig. */
body:is(.page-handwerk, .page-lieferanten, .page-about) #S3 > .dss-benefit-grid,
body:is(.page-handwerk, .page-lieferanten, .page-about) #S3 > .dss-workflow,
body:is(.page-handwerk, .page-lieferanten, .page-about) #S3 > .S3Grid.dss-screens,
body:is(.page-handwerk, .page-lieferanten, .page-about) #S31 > .pricing-head,
body:is(.page-handwerk, .page-lieferanten, .page-about) #S31 > .pricing-grid,
body:is(.page-handwerk, .page-lieferanten, .page-about) #S31 > .pricing-note,
body:is(.page-handwerk, .page-lieferanten, .page-about) #S31 > .plan-compare {
    box-sizing: border-box !important;
    align-self: center !important;
    width: 100% !important;
    max-width: var(--dss-content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S31 {
    display: block !important;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S31 > .pricing-head {
    text-align: center !important;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S31 > .pricing-head .pricing-intro {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Im zentrierten Vergleichs-Kasten stehen Überschrift und Eyebrow links sauber untereinander. */
body:is(.page-handwerk, .page-lieferanten, .page-about) .plan-compare__head {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0.35rem !important;
    text-align: left !important;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) .plan-compare__head .pricing-eyebrow {
    padding-bottom: 0.35em !important;
}

body:is(.page-handwerk, .page-lieferanten, .page-about) #S31 .plan-compare h3,
body:is(.page-handwerk, .page-lieferanten, .page-about) .plan-compare h3 {
    min-height: 0 !important;
    text-align: left !important;
}

@media (max-width: 600px) {
    body:is(.page-handwerk, .page-lieferanten, .page-about) {
        --dss-hero-gutter: 1.4rem;
        --dss-section-gutter: 1.4rem;
        --dss-center-gutter: 1.4rem;
    }

    body:is(.page-handwerk, .page-lieferanten, .page-about) #S3 > .S3section.dss-section-heading {
        width: 100% !important;
        margin-left: 0 !important;
    }
}


/* Lieferanten-spezifische Anpassungen
   Datei: styles/style_DSS.css
   Stelle: ganz unten nach dem gemeinsamen DSS/HLG-Breiten-Fix einfügen. */
body.page-lieferanten .dss-hero {
    background:
        radial-gradient(circle at 15% 24%, rgba(255, 85, 51, 0.34), transparent 25rem),
        radial-gradient(circle at 86% 18%, rgba(72, 69, 175, 0.52), transparent 24rem),
        linear-gradient(135deg, #06103D 0%, #11174e 56%, #2f2b8f 100%);
}

body.page-lieferanten .dss-hero__panel {
    max-width: 27rem;
}

body.page-lieferanten .dss-plan-pill {
    background: rgba(243, 246, 251, 0.94);
    color: #06103D;
}

body.page-lieferanten .dss-plan-pill--pro {
    background: #4845AF;
    color: #F3F6FB;
}

body.page-lieferanten .dss-benefit-card span,
body.page-lieferanten #S31 .pricing-yearly strong,
body.page-lieferanten .plan-compare__table td:nth-child(3) {
    color: #FF5533;
}

body.page-lieferanten #S31 .pricing-badge {
    background: rgba(255, 85, 51, 0.11);
    color: #FF5533;
}

body.page-lieferanten #S31 .pricing-badge--pro {
    background: rgba(72, 69, 175, 0.12);
    color: #4845AF;
}

body.page-lieferanten #S31 .pricing-card--pro {
    border-color: rgba(72, 69, 175, 0.34);
    box-shadow: 0 1.2rem 3rem rgba(72, 69, 175, 0.13);
}

body.page-lieferanten #S30 {
    background:
        radial-gradient(circle at 88% 20%, rgba(255, 85, 51, 0.34), transparent 23rem),
        radial-gradient(circle at 15% 90%, rgba(72, 69, 175, 0.5), transparent 24rem),
        linear-gradient(135deg, #06103D 0%, #11174e 100%);
}

body.page-lieferanten .hlg-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
    padding-top: 0.2rem;
}

body.page-lieferanten .hlg-metric {
    padding: 0.9rem;
    border: 1px solid rgba(243, 246, 251, 0.18);
    border-radius: 0.9rem;
    background: rgba(243, 246, 251, 0.08);
}

body.page-lieferanten .hlg-metric strong {
    display: block;
    color: #F3F6FB;
    font-size: 1.8em;
    font-weight: 600;
    line-height: 1.1;
    padding-bottom: 0.25rem;
}

body.page-lieferanten .hlg-metric span {
    display: block;
    color: rgba(243, 246, 251, 0.78);
    font-size: 1.2em;
    line-height: 140%;
}

@media (max-width: 600px) {
    body.page-lieferanten .hlg-metric-grid {
        grid-template-columns: 1fr;
    }
}


/* About-Seite im DSS-Schema
   Datei: styles/style_DSS.css
   Stelle: ganz unten nach den Lieferanten-spezifischen Anpassungen einfügen. */
body.page-about .dss-hero {
    background:
        radial-gradient(circle at 18% 26%, rgba(72, 69, 175, 0.54), transparent 28rem),
        radial-gradient(circle at 84% 16%, rgba(255, 85, 51, 0.32), transparent 22rem),
        linear-gradient(135deg, #06103D 0%, #121850 56%, #2f2b8f 100%);
}

body.page-about nav.rz-nav a[aria-current="page"]::after {
    width: 100%;
}

body.page-about .about-hero__panel {
    max-width: 30rem;
    padding: 1rem;
    gap: 1.15rem;
}

body.page-about .about-hero__image {
    margin: 0;
    overflow: hidden;
    border-radius: 1.15rem;
    background: rgba(243, 246, 251, 0.08);
}

body.page-about .about-hero__image img {
    display: block;
    width: 100%;
    aspect-ratio: 1.25 / 1;
    height: auto;
    object-fit: cover;
    object-position: 50% 38%;
}

body.page-about .about-hero__panel-copy {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0 0.35rem 0.35rem;
}

body.page-about .about-hero__panel-copy h2 {
    color: #F3F6FB;
    font-size: 2.45em;
    font-weight: 500;
    line-height: 118%;
    padding: 0;
}

body.page-about .about-hero__panel-copy p:not(.dss-plan-pill) {
    color: rgba(243, 246, 251, 0.84);
    font-size: 1.45em;
    line-height: 155%;
}

body.page-about #S3.about-foundation {
    padding-top: 7rem;
    padding-bottom: 7rem;
}

body.page-about .about-light-section,
body.page-about .about-founder-section {
    box-sizing: border-box;
    width: 100%;
    padding: 7rem var(--dss-center-gutter);
    background: #F3F6FB;
    color: #06103D;
}

body.page-about .about-section-head,
body.page-about .about-profile-card,
body.page-about .about-dark-band__content {
    width: 100%;
    max-width: var(--dss-content-max);
    margin-left: auto;
    margin-right: auto;
}

body.page-about .about-section-head {
    max-width: 64rem;
    margin-left: max(0px, calc(var(--dss-hero-gutter) - var(--dss-center-gutter)));
    margin-right: auto;
    padding-bottom: 2.2rem;
}

body.page-about .about-section-head h2,
body.page-about .about-dark-band h2,
body.page-about .about-profile-copy h2 {
    color: #06103D;
    font-size: clamp(3.2em, 4.3vw, 5.1em);
    font-weight: 500;
    line-height: 112%;
    letter-spacing: -0.03em;
    padding-bottom: 0.35em;
}

body.page-about .about-section-head p:not(.dss-eyebrow),
body.page-about .about-dark-band p,
body.page-about .about-profile-lead {
    color: rgba(6, 16, 61, 0.78);
    font-size: 1.75em;
    line-height: 165%;
}

body.page-about .about-workflow {
    margin-top: 0;
}

body.page-about .about-founder-section {
    background: #ffffff;
}

body.page-about .about-profile-card {
    display: grid;
    grid-template-columns: minmax(18rem, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: stretch;
    padding: 2rem;
    border: 1px solid rgba(6, 16, 61, 0.1);
    border-radius: 1.35rem;
    background: #F3F6FB;
    box-shadow: 0 1rem 2.7rem rgba(6, 16, 61, 0.07);
}

body.page-about .about-profile-photo {
    margin: 0;
    overflow: hidden;
    border-radius: 1.1rem;
    background: rgba(6, 16, 61, 0.05);
}

body.page-about .about-profile-photo img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 32rem;
    object-fit: cover;
    object-position: 48% 40%;
}

body.page-about .about-profile-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body.page-about .about-profile-list {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin: 1.6rem 0 0;
    padding: 0;
    list-style: none;
    color: rgba(6, 16, 61, 0.82);
    font-size: 1.55em;
    line-height: 155%;
}

body.page-about .about-profile-list > li {
    position: relative;
    padding-left: 1.35rem;
}

body.page-about .about-profile-list > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #FF5533;
}

body.page-about .about-profile-list strong {
    color: #06103D;
    font-weight: 600;
}

body.page-about .about-sublist {
    margin: 0.55rem 0 0;
    padding-left: 1.1rem;
}

body.page-about .about-sublist li {
    margin-bottom: 0.35rem;
}

body.page-about .about-dark-band {
    box-sizing: border-box;
    width: 100%;
    padding: 7rem var(--dss-center-gutter);
    background:
        radial-gradient(circle at 88% 20%, rgba(255, 85, 51, 0.3), transparent 22rem),
        radial-gradient(circle at 16% 84%, rgba(72, 69, 175, 0.48), transparent 24rem),
        linear-gradient(135deg, #06103D 0%, #11174e 100%);
    color: #F3F6FB;
}

body.page-about .about-dark-band__content {
    max-width: 68rem;
    margin-left: max(0px, calc(var(--dss-hero-gutter) - var(--dss-center-gutter)));
    margin-right: auto;
}

body.page-about .about-dark-band h2,
body.page-about .about-dark-band p {
    color: #F3F6FB;
}

body.page-about .about-dark-band p {
    color: rgba(243, 246, 251, 0.86);
    max-width: 58rem;
}

body.page-about #S30.about-contact {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(18rem, 0.85fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    background:
        radial-gradient(circle at 86% 20%, rgba(72, 69, 175, 0.54), transparent 23rem),
        linear-gradient(135deg, #06103D 0%, #11174e 100%);
}

body.page-about .about-contact-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.8rem;
    border: 1px solid rgba(243, 246, 251, 0.18);
    border-radius: 1.2rem;
    background: rgba(243, 246, 251, 0.08);
    box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.18);
}

body.page-about .about-contact-card h3 {
    color: #F3F6FB;
    font-size: 2.3em;
    font-weight: 500;
    line-height: 120%;
}

body.page-about .about-contact-card p,
body.page-about .about-contact-links a {
    color: rgba(243, 246, 251, 0.86);
    font-size: 1.6em;
    line-height: 160%;
    text-decoration: none;
}

body.page-about .about-contact-links {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding-top: 0.4rem;
}

body.page-about .about-contact-links a:hover {
    color: #FF5533;
}

@media (max-width: 1100px) {
    body.page-about .about-profile-card,
    body.page-about #S30.about-contact {
        grid-template-columns: 1fr;
    }

    body.page-about .about-profile-photo img {
        max-height: 34rem;
    }
}

@media (max-width: 600px) {
    body.page-about .about-light-section,
    body.page-about .about-founder-section,
    body.page-about .about-dark-band,
    body.page-about #S30.about-contact {
        padding-left: 1.4rem !important;
        padding-right: 1.4rem !important;
    }

    body.page-about .about-section-head,
    body.page-about .about-dark-band__content {
        margin-left: 0;
    }

    body.page-about .about-profile-card {
        padding: 1.2rem;
    }

    body.page-about .about-profile-photo img {
        min-height: 18rem;
    }
}

/* ----------------------------------------------------
   Fix: DSS/About/HLG Seiten auf iPad mini und iPad 11"
   Betrifft u. a. 1133x744 und 1180x820
---------------------------------------------------- */

@media (min-width: 700px) and (max-width: 1180px) {
    body:is(.page-about, .page-handwerk, .page-lieferanten) {
        overflow-x: hidden;
    }

    body:is(.page-about, .page-handwerk, .page-lieferanten) main,
    body:is(.page-about, .page-handwerk, .page-lieferanten) section {
        max-width: 100%;
    }

    body:is(.page-about, .page-handwerk, .page-lieferanten) #S1,
    body:is(.page-about, .page-handwerk, .page-lieferanten) #S2,
    body:is(.page-about, .page-handwerk, .page-lieferanten) #S3 {
        height: auto;
        min-height: auto;
    }

    body:is(.page-about, .page-handwerk, .page-lieferanten) .S3section,
    body:is(.page-about, .page-handwerk, .page-lieferanten) .dss-section-heading {
        width: min(100% - 5.6rem, 98rem);
        max-width: 98rem;
        margin-inline: auto;
        padding-inline: 0;
    }

    body:is(.page-about, .page-handwerk, .page-lieferanten) #S3 h2 {
        font-size: clamp(3.4em, 4.2vw, 4.8em);
        line-height: 1.08;
        max-width: 100%;
        padding-bottom: 0.35em;
    }

    body:is(.page-about, .page-handwerk, .page-lieferanten) #S3 .dss-section-lead,
    body:is(.page-about, .page-handwerk, .page-lieferanten) #S3 .S3Text2 {
        font-size: 1.7em;
        line-height: 155%;
        max-width: 78rem;
    }

    body:is(.page-about, .page-handwerk, .page-lieferanten) .dss-cards,
    body:is(.page-about, .page-handwerk, .page-lieferanten) .dss-card-grid,
    body:is(.page-about, .page-handwerk, .page-lieferanten) .pricing-grid,
    body:is(.page-about, .page-handwerk, .page-lieferanten) .feature-grid {
        width: min(100% - 5.6rem, 104rem);
        max-width: 104rem;
        margin-inline: auto;
    }

    body:is(.page-about, .page-handwerk, .page-lieferanten) img,
    body:is(.page-about, .page-handwerk, .page-lieferanten) video,
    body:is(.page-about, .page-handwerk, .page-lieferanten) picture {
        max-width: 100%;
        height: auto;
    }
}

/* Kontaktbasierte GO+/PRO-Darstellung auf DSS.html.
   Preise und automatische Buchung werden nicht angeboten; Paddle-Code bleibt davon unberührt. */
body.page-handwerk #S31 {
    position: relative;
    background:
        radial-gradient(circle at 12% 8%, rgba(72, 69, 175, 0.11), transparent 28rem),
        radial-gradient(circle at 92% 42%, rgba(6, 16, 61, 0.055), transparent 24rem),
        linear-gradient(180deg, #F3F6FB 0%, #EEF2FA 52%, #F3F6FB 100%);
}

body.page-handwerk #S31 .pricing-head {
    margin-bottom: 2.4rem;
}

body.page-handwerk #S31 .pricing-intro {
    max-width: 62rem;
    padding-bottom: 1.5rem;
}

body.page-handwerk #S31 .pricing-contact-flow-spacer {
    height: 0.8rem;
}

body.page-handwerk #S31 .pricing-grid {
    gap: 1.7rem;
}

body.page-handwerk #S31 .pricing-card {
    isolation: isolate;
    padding: 2.35rem;
    border: 1px solid rgba(6, 16, 61, 0.1);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 1.15rem 2.8rem rgba(6, 16, 61, 0.085);
}

body.page-handwerk #S31 .pricing-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 0 auto;
    height: 0.35rem;
    background: linear-gradient(90deg, rgba(72, 69, 175, 0.38), rgba(6, 16, 61, 0.78));
}

body.page-handwerk #S31 .pricing-card--pro {
    border-color: rgba(72, 69, 175, 0.26);
    background:
        linear-gradient(145deg, rgba(72, 69, 175, 0.055), transparent 42%),
        rgba(255, 255, 255, 0.97);
    box-shadow: 0 1.25rem 3rem rgba(32, 31, 105, 0.12);
}

body.page-handwerk #S31 .pricing-card--pro::before {
    background: linear-gradient(90deg, #4845AF, #06103D);
}

body.page-handwerk #S31 .pricing-badge,
body.page-handwerk #S31 .pricing-badge--pro {
    background: rgba(72, 69, 175, 0.1);
    color: #4845AF;
}

body.page-handwerk #S31 .pricing-card--go .pricing-badge {
    background: rgba(6, 16, 61, 0.07);
    color: #06103D;
}

body.page-handwerk #S31 .pricing-kicker {
    color: #06103D;
}

body.page-handwerk #S31 .pricing-card--pro .pricing-kicker {
    color: #4845AF;
}

body.page-handwerk #S31 .pricing-card h3 {
    min-height: 3.45em;
    padding-bottom: 0.65em;
}

body.page-handwerk #S31 .pricing-availability {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 7.2rem;
    padding: 1rem 1.05rem;
    border: 1px solid rgba(72, 69, 175, 0.12);
    border-radius: 0.9rem;
    background: rgba(72, 69, 175, 0.05);
    color: rgba(6, 16, 61, 0.78);
    font-size: 1.45em;
    line-height: 150%;
}

body.page-handwerk #S31 .pricing-availability strong {
    color: #06103D;
    font-size: 1.05em;
    font-weight: 600;
}

body.page-handwerk #S31 .pricing-list {
    padding-top: 1.45em;
}

body.page-handwerk #S31 .pricing-list li::before {
    background-color: #4845AF;
}

body.page-handwerk #S31 .pricing-cta {
    border: 1px solid transparent;
    color: #F3F6FB;
}

body.page-handwerk #S31 .pricing-cta--go {
    background: #06103D;
    box-shadow: 0 0.8rem 1.8rem rgba(6, 16, 61, 0.18);
}

body.page-handwerk #S31 .pricing-cta--pro {
    background: #4845AF;
    box-shadow: 0 0.8rem 1.8rem rgba(72, 69, 175, 0.2);
}

body.page-handwerk #S31 .pricing-cta--go:hover {
    background: #11174e;
    box-shadow: 0 0.95rem 2rem rgba(6, 16, 61, 0.23);
}

body.page-handwerk #S31 .pricing-cta--pro:hover {
    background: #39379a;
    box-shadow: 0 0.95rem 2rem rgba(72, 69, 175, 0.25);
}


/* ----------------------------------------------------
   ROOFZON Pricing-Farbwelt für DSS.html und HLG.html

   DSS:
   - pricing-card--go  = GO+
   - pricing-card--pro = PRO

   HLG:
   - pricing-card--go  = Produktdaten
   - pricing-card--pro = Lead & Übergabe
---------------------------------------------------- */

/* Gemeinsame helle Fläche hinter den Pricing-Karten */
body:is(.page-handwerk, .page-lieferanten) #S31 {
    background:
        radial-gradient(
            circle at 12% 8%,
            rgba(207, 239, 252, 0.72),
            transparent 28rem
        ),
        radial-gradient(
            circle at 92% 42%,
            rgba(72, 69, 175, 0.07),
            transparent 24rem
        ),
        #F3F6FB;
}


/* ----------------------------------------------------
   Erste Karte:
   GO+ in DSS / Produktdaten in HLG
---------------------------------------------------- */

body:is(.page-handwerk, .page-lieferanten)
#S31 .pricing-card--go {
    --plan-accent: #4845AF;
    --plan-button-text: #F3F6FB;
    --plan-kicker: #4845AF;
    --plan-kicker-decoration: #CFEFFC;

    --plan-surface:
        linear-gradient(
            145deg,
            rgba(207, 239, 252, 0.88) 0%,
            #F3F6FB 48%,
            #F3F6FB 100%
        );

    --plan-border: rgba(72, 69, 175, 0.28);
    --plan-shadow: rgba(72, 69, 175, 0.14);

    --plan-top-line:
        linear-gradient(
            90deg,
            #CFEFFC 0%,
            #4845AF 72%,
            #06103D 100%
        );

    --plan-badge-background: #CFEFFC;
    --plan-badge-text: #4845AF;

    --plan-panel-background: rgba(207, 239, 252, 0.42);
    --plan-panel-border: rgba(72, 69, 175, 0.20);
}


/* ----------------------------------------------------
   Zweite Karte:
   PRO in DSS / Lead & Übergabe in HLG
---------------------------------------------------- */

body:is(.page-handwerk, .page-lieferanten)
#S31 .pricing-card--pro {
    --plan-accent: #FF5533;
    --plan-button-text: #06103D;
    --plan-kicker: #06103D;
    --plan-kicker-decoration: #FF5533;

    --plan-surface:
        linear-gradient(
            145deg,
            rgba(255, 85, 51, 0.16) 0%,
            #F3F6FB 48%,
            #F3F6FB 100%
        );

    --plan-border: rgba(255, 85, 51, 0.38);
    --plan-shadow: rgba(255, 85, 51, 0.16);

    --plan-top-line:
        linear-gradient(
            90deg,
            #FF5533 0%,
            #06103D 100%
        );

    --plan-badge-background: rgba(255, 85, 51, 0.14);
    --plan-badge-text: #FF5533;

    --plan-panel-background: rgba(255, 85, 51, 0.075);
    --plan-panel-border: rgba(255, 85, 51, 0.25);
}


/* ----------------------------------------------------
   Gemeinsame Gestaltung beider Karten
---------------------------------------------------- */

body:is(.page-handwerk, .page-lieferanten)
#S31 .pricing-card {
    isolation: isolate;
    border: 1px solid var(--plan-border);
    background: var(--plan-surface);
    box-shadow: 0 1.25rem 3rem var(--plan-shadow);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* Farbige Linie am oberen Kartenrand */
body:is(.page-handwerk, .page-lieferanten)
#S31 .pricing-card::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0 0 auto;
    height: 0.4rem;
    background: var(--plan-top-line);
    pointer-events: none;
}


/* Badge: Digitaler Einstieg, Start, Vertrieb usw. */
body:is(.page-handwerk, .page-lieferanten)
#S31 .pricing-card .pricing-badge {
    border: 1px solid var(--plan-panel-border);
    background: var(--plan-badge-background);
    color: var(--plan-badge-text);
}


/* GO+, PRO, Produktdaten und Lead & Übergabe */
body:is(.page-handwerk, .page-lieferanten)
#S31 .pricing-card .pricing-kicker {
    width: fit-content;
    color: var(--plan-kicker);

    text-decoration-line: underline;
    text-decoration-color: var(--plan-kicker-decoration);
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.18em;
}


/* ----------------------------------------------------
   Informationsfläche in DSS
---------------------------------------------------- */

body.page-handwerk
#S31 .pricing-card .pricing-availability {
    border-color: var(--plan-panel-border);
    background: var(--plan-panel-background);
    color: rgba(6, 16, 61, 0.82);
}

body.page-handwerk
#S31 .pricing-card .pricing-availability strong {
    color: var(--plan-kicker);
}


/* ----------------------------------------------------
   Informationsfläche in HLG
---------------------------------------------------- */

body.page-lieferanten
#S31 .pricing-card .pricing-price {
    color: var(--plan-kicker);
}

body.page-lieferanten
#S31 .pricing-card .pricing-price span {
    margin-top: 0.55em;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
    padding-left: 0.8rem;

    border-left: 0.25rem solid var(--plan-accent);
    color: rgba(6, 16, 61, 0.78);
}

body.page-lieferanten
#S31 .pricing-card .pricing-yearly {
    padding: 1rem 1.05rem;

    border: 1px solid var(--plan-panel-border);
    border-radius: 0.9rem;

    background: var(--plan-panel-background);
    color: rgba(6, 16, 61, 0.82);
}


/* ----------------------------------------------------
   Punkte vor den Leistungsmerkmalen
---------------------------------------------------- */

body:is(.page-handwerk, .page-lieferanten)
#S31 .pricing-card .pricing-list li::before {
    background-color: var(--plan-accent);
}


/* ----------------------------------------------------
   Buttons

   Funktioniert auch in HLG, obwohl dort keine Klassen
   pricing-cta--go und pricing-cta--pro verwendet werden.
---------------------------------------------------- */

body:is(.page-handwerk, .page-lieferanten)
#S31 .pricing-card .pricing-cta {
    border: 1px solid var(--plan-accent);
    background: var(--plan-accent);
    color: var(--plan-button-text);

    font-weight: 600;

    box-shadow:
        0 0.8rem 1.8rem var(--plan-shadow);
}

body:is(.page-handwerk, .page-lieferanten)
#S31 .pricing-card .pricing-cta:hover {
    border-color: #06103D;
    background: #06103D;
    color: #F3F6FB;

    box-shadow:
        0 0.95rem 2rem rgba(6, 16, 61, 0.23);
}

body:is(.page-handwerk, .page-lieferanten)
#S31 .pricing-card .pricing-cta:focus-visible {
    outline: 3px solid #CFEFFC;
    outline-offset: 3px;
}


/* Dezente Kartenbewegung nur auf Geräten mit Maus */
@media (hover: hover) and (pointer: fine) {
    body:is(.page-handwerk, .page-lieferanten)
    #S31 .pricing-card:hover {
        transform: translateY(-0.25rem);

        box-shadow:
            0 1.55rem 3.4rem var(--plan-shadow);
    }
}


/* Buttons auf kleinen Bildschirmen über die Kartenbreite */
@media (max-width: 600px) {
    body:is(.page-handwerk, .page-lieferanten)
    #S31 .pricing-card .pricing-cta {
        box-sizing: border-box;
        align-self: stretch;
        width: 100%;
    }
}


/* Keine Kartenbewegung bei reduzierten Animationen */
@media (prefers-reduced-motion: reduce) {
    body:is(.page-handwerk, .page-lieferanten)
    #S31 .pricing-card {
        transition: none;
    }

    body:is(.page-handwerk, .page-lieferanten)
    #S31 .pricing-card:hover {
        transform: none;
    }
}

/* Bewahrt den bisherigen Platz der entfernten Kontakt-Kachel als leeren Abstand. */
body.page-handwerk #S31 .pricing-contact-note-spacer {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: var(--dss-content-max);
    height: 84.78px;
    margin-inline: auto;
}

@media (max-width: 900px) {
    body.page-handwerk #S31 .pricing-card h3,
    body.page-handwerk #S31 .pricing-availability {
        min-height: auto;
    }
}

@media (max-width: 1217px) {
    body.page-handwerk #S31 .pricing-contact-note-spacer {
        height: 105.78px;
    }
}

@media (max-width: 763px) {
    body.page-handwerk #S31 .pricing-contact-note-spacer {
        height: 126.78px;
    }
}

@media (max-width: 700px) {
    body.page-handwerk #S31 .pricing-contact-note-spacer {
        height: 155.66px;
    }
}

@media (max-width: 600px) {
    body.page-handwerk #S31 .pricing-contact-note-spacer {
        height: 117.5px;
    }
}

@media (max-width: 400px) {
    body.page-handwerk #S31 .pricing-contact-note-spacer {
        height: 133.25px;
    }
}

@media (max-width: 350px) {
    body.page-handwerk #S31 .pricing-contact-note-spacer {
        height: 149.25px;
    }
}

@media (max-width: 600px) {
    body.page-handwerk #S31 .pricing-head {
        text-align: left !important;
    }

    body.page-handwerk #S31 .pricing-intro {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.page-handwerk #S31 .pricing-card {
        padding: 1.75rem;
    }

    body.page-handwerk #S31 .pricing-cta {
        box-sizing: border-box;
        align-self: stretch;
        width: 100%;
    }
}

/* ----------------------------------------------------
   Feinabstimmung der rechten Pricing-Card

   DSS: PRO
   HLG: Lead & Übergabe
---------------------------------------------------- */


/* PRO beziehungsweise Lead & Übergabe:
   Roof Red und ohne Unterstreichung */
body:is(.page-handwerk, .page-lieferanten)
#S31 .pricing-card--pro .pricing-kicker {
    color: #FF5533;
    text-decoration: none;
}


/* DSS: „Für den erweiterten Einsatz“ in Roof Red */
body.page-handwerk
#S31 .pricing-card--pro .pricing-availability strong {
    color: #FF5533;
}


/* Buttontext:
   „PRO anfragen“ und „Partnerschaft anfragen“ */
body:is(.page-handwerk, .page-lieferanten)
#S31 .pricing-card--pro .pricing-cta {
    color: #F3F6FB;
}


/* Buttontext auch beim Darüberfahren hell lassen */
body:is(.page-handwerk, .page-lieferanten)
#S31 .pricing-card--pro .pricing-cta:hover {
    color: #F3F6FB;
}


/* Obere horizontale Leiste:
   links helles Roof Red, rechts volles Roof Red */
body:is(.page-handwerk, .page-lieferanten)
#S31 .pricing-card--pro::before {
    background:
        linear-gradient(
            90deg,
            rgba(255, 85, 51, 0.22) 0%,
            #FF5533 100%
        );
}

/* HLG: „Individuell“ in Roof Red */
body.page-lieferanten
#S31 .pricing-card--pro .pricing-price {
    color: #FF5533;
}

/* ----------------------------------------------------
   DSS: weitere Roof-Red-Akzente
---------------------------------------------------- */


/* Leistungsübersicht:
   Antworten in der PRO-Spalte in Roof Red */
body.page-handwerk
#S31 .plan-compare__table tbody td:nth-child(3) {
    color: #FF5533;
}


/* „Vom ersten Kontakt bis zur Angebotsvorbereitung“:
   Nummern 01, 02, 03 und 04 in Roof Red */
body.page-handwerk
#S3 .dss-benefit-grid .dss-benefit-card > span {
    color: #FF5533;
}