@import url("font-typekit.css");
@import url("font-custom.css");

:root {
    /* --- Original XD-Variablen --- */
    --unnamed-color-282424: #282424; /* Schwarzgrau */
    --unnamed-color-8660ed: #8660ED; /* Lila */
    --unnamed-color-03c4ff: #03C4FF;
    --unnamed-color-ff5a7f: #FF5A7F;
    --named-color-white: #FFFFFF;
    --named-color-black: #000000;
    --unnamed-font-family-montserrat: "Montserrat Black", sans-serif;
    --unnamed-font-family-poppins: "Poppins", sans-serif;
    --unnamed-font-family-titillium: "Titillium Web", sans-serif;
    --unnamed-font-style-normal: normal;
    --unnamed-font-style-italic: italic;
    --unnamed-font-weight-300: 300;
    --unnamed-font-weight-bold: 700;
    --unnamed-font-size-2p5rem: 2.5rem;
    --unnamed-font-size-1p5rem: 1.5rem;
    --unnamed-font-size-1p25rem: 1.25rem;
    --unnamed-font-size-1rem: 1rem;
    --unnamed-font-size-12: 12px;
    --unnamed-font-size-13: 13px;
    --unnamed-font-size-18: 18px;
    --unnamed-font-size-190: 190px;
    --unnamed-character-spacing-0: 0px;
    --unnamed-character-spacing-2-76: 2.76px;
    --unnamed-character-spacing-2-99: 2.99px;
    --unnamed-line-spacing-17: 17px;
    --unnamed-line-spacing-18: 18px;
    --unnamed-line-spacing-20: 20px;
    --unnamed-line-spacing-24: 24px;
    --unnamed-line-spacing-200: 200px;
    --unnamed-text-transform-uppercase: uppercase;
    /* --- Semantische Variablen für CSS-Implementierung --- */
    --body-background-color: var(--named-color-black);
    --body-color: var(--named-color-white);
    --surface-dark: var(--unnamed-color-282424);
    --accent-purple: var(--unnamed-color-8660ed);
    --accent-cyan: var(--unnamed-color-03c4ff);
    --accent-pink: var(--unnamed-color-ff5a7f);
    --color-white: var(--named-color-white);
    --color-on-light: #111111;
    --color-link-hover: #ff007a;
    /* Spacing */
    --section-gap: 2rem;
    --stat-box-gap: 2rem;
    --page-padding-x: 2rem;
    /* Rundungen */
    --section-radius: 60px;
    --stat-box-radius: 30px;
    --input-radius: 20px;
    /* Typo (normalisiert) */
    --font-section-title-family: var(--unnamed-font-family-montserrat);
    --paragraph-font-family: var(--unnamed-font-family-poppins);
    --font-weight-bold: var(--unnamed-font-weight-bold);
    --title-biggest-font-size: var(--unnamed-font-size-2p5rem);
    --title-bigger-font-size: var(--unnamed-font-size-1p5rem);
    --title-big-font-size: var(--unnamed-font-size-1p25rem);
    --title-normal-size: var(--unnamed-font-size-1rem);
}

/* ===== Global ===== */
body {
    background-color: var(--body-background-color);
    color: var(--color-white);
    font-family: var(--unnamed-font-family-titillium);
    margin: 0;
    padding: 0;
}

h1, h2, h3, h6 {
    font-family: var(--font-section-title-family);
    color: var(--named-color-white);
}

h1, h2, h3 {
    font-weight: var(--unnamed-font-weight-bold);
}

h1 {
    font-size: var(--title-biggest-font-size);
    margin-top: 4rem;
    margin-bottom: 2rem;
}

h2 {
    font-size: var(--title-bigger-font-size);
}

h3 {
    font-size: var(--title-big-font-size);
}

h6 {
    font-size: var(--title-normal-size);
    font-weight: var(--unnamed-font-weight-300);
}

a {
    text-decoration: none;
    transition: color 0.2s ease;
}

p {
    font-family: var(--paragraph-font-family);
}

/* ===== Text ===== */

.pink {
    color: var(--accent-pink);
}

/* ===== Buttons ===== */
.btn {
    border: none;
    border-radius: 50px;
    font: var(--unnamed-font-style-normal) normal 800 0.9rem/1rem "Poppins";
    letter-spacing: var(--unnamed-character-spacing-0);
    padding: 0.75rem 1.25rem 0.5rem 1.25rem;
}

.btn-gradient {
    background: linear-gradient( 90deg, var(--unnamed-color-ff5a7f) 0%, var(--unnamed-color-ff5a7f) 5%, var(--unnamed-color-8660ed) 51%, var(--unnamed-color-03c4ff) 100% );
    color: var(--named-color-white);
}

.btn-reverse-gradient {
    background: linear-gradient( 270deg, var(--unnamed-color-ff5a7f) 0%, var(--unnamed-color-ff5a7f) 5%, var(--unnamed-color-8660ed) 51%, var(--unnamed-color-03c4ff) 100% );
    color: var(--named-color-white);
}

/* ===== Header ===== */
.site-header {
    margin: 1.5rem 1.5rem 0 1.5rem;
}

.site-header-nav .navbar-brand .logo-img {
    max-height: 5rem;
}

.site-header-nav .navbar-toggler {
    background: var(--unnamed-color-ff5a7f) 0% 0% no-repeat padding-box;
    border-radius: 15px;
    margin: 0;
    width:4rem;
    height:4rem;
}


.site-header-nav .navbar-nav .nav-link {
    color: var(--named-color-white);
    font: var(--unnamed-font-style-normal) normal 500 1rem/2rem "Poppins";
    margin: 0 1.5rem;
}

    .site-header-nav .nav-link:hover {
        color: var(--color-link-hover);
    }

.site-header-nav .btn-report {
    margin-right: 1rem;
    margin-bottom: 1rem;
}

.site-header-nav .btn-partner {
    margin-bottom: 1rem;
}

@media screen and (min-width: 992px) {
    .site-header-nav .nav-link {
        display: none;
    }
}

@media screen and (max-width: 992px) {
    .site-header {
        margin: 0.5rem;
    }
    .site-header-nav .navbar-brand .logo-img {
        padding:1rem;
    }
    .site-header-nav .btn-report {
        display: none;
    }
    .site-header-nav .btn-partner {
        display: none;
    }
}

/* ===== Footer ===== */
.site-footer {
    color: #ccc;
    font-size: 0.9rem;
}

    .site-footer .footer-section {
        max-width: 900px;
    }
    .site-footer .footer-top {
        display:flex;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 2rem;
    }

    .site-footer .footer-logo .logo-img {
        max-height: 4rem;
    }

    .site-footer .footer-links {
        display: flex;
        flex-direction: row;
        gap: 2rem;
    }

    .site-footer .footer-links h6 {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 0.75rem;
        color: #646464;
    }

    .site-footer .footer-col a {
        display: block;
        color: #fff;
        margin: 0.25rem 0;
    }

        .site-footer .footer-col a:hover {
            color: #ff007a;
        }

    .site-footer .footer-bottom {
        font-size: 0.8rem;
        color: #777;
        border-top: 1px solid rgba(255,255,255,0.1);
        padding-top: 1rem;
    }

    /* ===== SND-Logo ===== */
    .site-footer .snd-logo {
        text-align: center;
        margin: 6rem 0 2rem;
    }

        .site-footer .snd-logo img {
            max-width: 400px;
        }

        .site-footer .snd-logo p {
            color: var(--named-color-white);
            margin-top: 1rem;
            font-size: 2.5rem;
        }

@media screen and (max-width: 992px) {
    .site-footer .footer-top {
        flex-direction: column;
        gap: 2rem;
    }
    .site-footer .footer-links {
        flex-direction: column;
    }
}

/* ===== Section ===== */
section {
    max-width: 80%;
    margin: 0 auto;
    padding-left: var(--page-padding-x);
    padding-right: var(--page-padding-x);
}

.section-rounded {
    border-radius: 60px;
    overflow: hidden;
}

@media screen and (max-width: 992px) {
    section {
        max-width: 90%;
    }
}

/* ===== Home ===== */
.home {

}

/* ===== Hero ===== */
.hero {
    background: #000000;
    color: #fff;
    padding: 2rem 1rem 1rem 1rem;
    text-align: center;
}

    .hero .collage {
        display: flex;
        padding: 1rem 2rem;
    }

        .hero .collage img {
            max-width: 100%;
        }

        .hero .collage .video {
            flex: 1;
        }

            .hero .collage .video video {
                max-width: 80%;
                border-radius: 30px;
            }

    .hero p {
        color: var(--named-color-white);
        font: var(--unnamed-font-style-normal) normal 500 1rem/1.5rem "Poppins";
        letter-spacing: var(--unnamed-character-spacing-0);
        margin: 1.75rem 1.5rem;
    }

.hero-buttons .desktop {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin: 2rem 1rem 0 1rem;
}

.hero-buttons .mobile {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin: 2rem 1rem 2rem 1rem;
}

@media screen and (max-width: 992px) {
    .hero {
        max-width: 90%;
    }
        .hero h1 {
            padding: 0;
        }

    .hero-buttons .desktop {
        display: none;
    }

    .hero p {
        font-size: 1rem;
        line-height: 1.5rem;
    }
}

@media screen and (min-width: 992px) {

    .hero-buttons .mobile {
        display: none;
    }
}

/* ===== We Know ===== */
.we-know {
    padding: 2rem 1rem 1rem 1rem;
    text-align: center;
}

    .we-know p {
        font: var(--unnamed-font-style-normal) normal 500 1rem/1.5rem "Poppins";
        letter-spacing: var(--unnamed-character-spacing-0);
        margin: 1.75rem 1.5rem;
    }

    .we-know > p {
        margin-bottom: 0;
    }

@media screen and (max-width: 992px) {
    .we-know {
        max-width: 90%;
    }
        .we-know h1 {
            padding: 0;
        }
}

/* ===== Netzwerk ===== */
.netzwerk {
    padding: 2rem 1rem 1rem 1rem;
    text-align: center;
}

    .netzwerk .pinwall {
        background: var(--surface-dark);
        border-radius: 100px;
        padding: 3rem 2rem 2rem 2rem;
    }

        .netzwerk .pinwall .logos {
            display: flex;
            gap: 4rem;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }

            .netzwerk .pinwall .logos img {
                max-height: 5rem;
                object-fit: contain;
            }

                .netzwerk .pinwall .logos img:hover {
                    transform: translateY(-3px);
                }

        .netzwerk .pinwall .btn {
            margin-top: 3rem;
        }

@media screen and (max-width: 992px) {
    .netzwerk .pinwall .logos {
        gap: 2rem;
    }
        .netzwerk .pinwall .logos img {
            max-height: 3rem;
        }
            .netzwerk .pinwall .logos img:hover {
                transform: none;
            }
}

/* ===== Stats ===== */
.stats {
    color: var(--color-white);
    max-width: 70%;
    text-align: center;
    padding-top: calc(var(--section-gap) + 0.5rem);
    padding-bottom: 2rem;
}

    .stats .stats-row {
        display: flex;
        gap: var(--stat-box-gap);
        justify-content: center;
        align-items: stretch;
        flex-wrap: wrap;
        margin: 0 auto;
    }

    .stats ul {
        text-align: center;
        list-style-position: inside;
    }

    .stats p {
        font: var(--unnamed-font-style-normal) normal 500 1rem/1.5rem "Poppins";
        letter-spacing: var(--unnamed-character-spacing-0);
        margin: 1.75rem 1.5rem;
    }

    .stats > p {
        margin-bottom: 0;
    }
    .stats h3 {
        font-size: 1.25rem;
    }

    .stats a {
        margin: 1.5rem 0 1.5rem 0;
    }

.stat-box {
    background: var(--accent-purple);
    border-radius: var(--stat-box-radius);
    color: var(--color-white);
    display: flex;
    flex: 0 1 17rem; /* Basisbreite auf Desktop */
    flex-direction: column;
    gap: 0.25rem;
    min-width: 15rem;
    text-align: center;
    justify-content: start;
    padding: 2rem 1.5rem;
}
    .stat-box img {
        margin-bottom: 2em;
        max-height: 40px;
        object-fit: contain;
    }

    .stat-box .value {
        font-size: 2.2rem;
        font-weight: var(--font-weight-bold);
        margin-bottom: 1rem;
        line-height: 1em;
    }

    .stat-box .label {
        margin: 0;
        font-size: 0.95rem;
        color: rgba(255,255,255,0.95);
    }

/* Responsive: bei kleiner Breite werden Boxen untereinander gestapelt */
@media screen and (max-width: 768px) {
    .stat-box {
        flex: 1 1 100%;
        min-width: auto;
    }

    .stats {
        padding-top: calc(var(--section-gap) / 2 + 1rem);
        padding-bottom: calc(var(--section-gap) / 2);
    }
}

/* ===== Kunden ===== */
.kunden {
    text-align: center;
    margin-bottom: 3rem;
    margin-top: 4rem;
}

    .kunden .pinwall {
        background: var(--named-color-white);
        border-radius: 100px;
        padding: 3rem 10rem 2rem 10rem;
    }

        .kunden .pinwall .logos {
            display: flex;
            gap: 2rem;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }

            .kunden .pinwall .logos img {
                max-height: 3rem;
                object-fit: contain;
            }

                .kunden .pinwall .logos img:hover {
                    transform: translateY(-3px);
                }

        .kunden .pinwall .btn {
            margin-top: 3rem;
        }

        .kunden p {
            margin-top: 1.5rem;
        }

/*@media screen and (max-width: 992px) {
    .kunden {
        display: none;
    }
}*/

/* ===== Apprentice Report 2026 ===== */
.apprep26 {
    background: transparent linear-gradient(118deg, var(--unnamed-color-ff5a7f) 0%, var(--unnamed-color-ff5a7f) 5%, var(--unnamed-color-8660ed) 51%, var(--unnamed-color-03c4ff) 100%) 0% 0% no-repeat padding-box;
    border-radius: 100px;
    padding: 5px;
    margin-top: 3rem;
}

    .apprep26 .outer {
        background: var(--unnamed-color-282424) 0% 0% no-repeat padding-box;
        border-radius: 95px;
        display: flex;
        flex-direction: row;
        gap: 2rem;
        padding: 3rem 6rem;
        flex-wrap: nowrap;
    }

@media screen and (max-width: 992px) {
    .apprep26 .outer {
        flex-direction: column-reverse;
        align-items: center;
        padding: 2rem 3rem;
    }
}

/* ===== Feature ===== */
.feature {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    padding: 3rem 1rem;
    max-width: 70rem;
    flex-wrap: nowrap;
}

.feature.reverse {
    flex-direction: row-reverse;
}

.feature-text {
    flex: 1 1 20rem;
    color: var(--named-color-white);
    max-width: 40rem;
    justify-content: start;
}

    .feature-text ol {
        list-style-position: outside;
    }
        .feature-text ol li {
            font-size: 1.25rem;
            padding-left:1rem;
        }

            .feature-text ol li::marker {
                font-weight: var(--font-weight-bold);
                font-size: 1.25rem;
            }

    .feature-text h3 {
        font-size: 1.25rem;
        display: inline;
    }

    .feature-text p {
        font-size: var(--unnamed-font-size-1rem);
    }

    .feature-text .btn {
        margin-top: 2rem;
    }

.feature-image {
    flex: 1 1 20rem;
    padding: 1rem;
    max-width: 40rem;
}

    .feature-image img {
        max-width: 100%;
    }

@media screen and (max-width: 992px) {
    .feature {
        flex-direction: column-reverse;
        align-items: center;
    }
    .feature.reverse {
        flex-direction: column-reverse;
        align-items: center;
    }
    .feature-text {
        justify-content: center;
        text-align: center;
    }
}

/* ===== Feature-Breaker (Triplet) ===== */
.feature-breaker {
    margin: var(--section-gap) auto;
}
.feature-breaker.alone {
    padding-bottom: 3rem;
}

    .feature-breaker .breaker-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2rem;
    }

.breaker-box {
    background: var(--surface-dark);
    border-radius: 40px;
    flex: 0 1 17rem;
    min-width: 15rem;
    padding: 2rem;
}

    .breaker-box h3 {
        font-size: 1rem;
        margin-bottom: 2rem;
        min-height:3rem;
    }

    .breaker-box p {
        font-size: 1rem;
    }

/* ===== Partner-Range ===== */
.partner-range {
    color: var(--color-white);
    max-width: 70%;
    text-align: center;
}

    .partner-range > p {
        margin: 2rem;
    }

    .partner-range .partner-range-row {
        display: flex;
        gap: var(--stat-box-gap);
        justify-content: center;
        align-items: stretch;
        flex-wrap: wrap;
        margin-top:1rem;
    }

.partner-range-box {
    color: var(--color-white);
    display: flex;
    flex: 0 1 24rem; /* Basisbreite auf Desktop */
    flex-direction: column;
    gap: 0.25rem;
    min-width: 24rem;
    text-align: center;
    justify-content: start;
}

    .partner-range-box > div:first-child {
        background: var(--accent-purple);
        border-radius: var(--stat-box-radius);
        object-fit: contain;
    }

    .partner-range-box .top {
        text-align: center;
        padding: 2rem 1.5rem;
        border-top-left-radius: var(--stat-box-radius);
        border-top-right-radius: var(--stat-box-radius);
        /*background-color: var(--unnamed-color-282424);*/
    }

        .partner-range-box .top .img-container {
            margin-bottom:1rem;
        }

            .partner-range-box .top .img-container img {
                max-height: 8rem;
                max-width: 8rem;
                vertical-align:bottom;
            }

        .partner-range-box .top .label {
            color: rgba(255,255,255,0.95);
            vertical-align: bottom;
            text-transform: uppercase;
        }

    .partner-range-box .bottom {
        text-align: center;
        padding: 0 1.5rem 0 1.5rem;
    }
        .partner-range-box .bottom hr {
            width: 6rem;
            height: 0.25rem;
            margin: 0 auto 2rem auto;
        }

        .partner-range-box .bottom h2 {
            text-align: center;
            margin: 1rem 0;
        }

        .partner-range-box .bottom p {
            text-align: center;
        }

/* Responsive: bei kleiner Breite werden Boxen untereinander gestapelt */
@media screen and (max-width: 768px) {
    .partner-range-box {
        flex: 1 1 100%;
        min-width: auto;
    }
}

/* ===== Partner-Network ===== */
.partner-network {
    margin: var(--section-gap) auto;
    padding: 1rem 0;
    max-width: 70rem;
}
    .partner-network h2 {
        padding-bottom: 2rem;
    }

    .partner-network p {
        font-size: var(--unnamed-font-size-1rem);
    }

    .partner-network .network-item {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2rem;
    }

.network-box {
    border-radius: 40px;
    flex: 0 1 20rem;
    min-width: 15rem;
    padding: 2rem;
}
.network-box:hover {
    background: var(--surface-dark);
}

    .network-box .network-image {
        flex: 1 1 20rem;
        max-width: 100%;
    }

        .network-box .network-image img {
            max-width: 100%;
        }

    .network-box .network-text {
        flex: 1 1 20rem;
        color: var(--named-color-white);
        max-width: 40rem;
        justify-content: start;
    }

        .network-box .network-text h2 {
            margin-top: 2rem;
            margin-bottom: 1rem;
            padding: 0;
            font-size: 1rem;
        }

            .network-box .network-text h2 .network-icon {
                max-width: 1rem;
                padding-right: 0.5rem;
            }

                .network-box .network-text h2 .network-icon img {
                    max-width: 1rem;
                }
        
        .network-box .network-text p {
            margin-bottom: 2rem;
            font-size: 1rem;
            min-height: 5rem;
        }

        .network-box .network-text .btn {
            margin-top: 1rem;
        }

/* ===== Visibility ===== */
.visibility {
    padding: 2rem 1rem 0 1rem;
    text-align: center;
}

    .visibility p {
        font: var(--unnamed-font-style-normal) normal 500 1rem/1.5rem "Poppins";
        letter-spacing: var(--unnamed-character-spacing-0);
        margin: 1.75rem 1.5rem;
    }

@media screen and (max-width: 992px) {
    .visibility {
        max-width: 90%;
    }
}

/* ===== Kontakt ===== */
.kontakt {
    color: var(--named-color-white);
    margin: 1rem auto;
    max-width: 80%;
    padding: 2.5rem;
}

    .kontakt h1 {
        text-align: center;
    }

.contact-form {
    max-width: 80%;
    margin: 0 auto;
}

/* Grid: 2 Spalten Standard (Desktop) */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* Felder (Default: eine Spalte) */
.field-wrapper {
    display: flex;
    flex-direction: column;
    position: relative;
}

    /* Nachricht-Feld soll volle Breite haben */
    .field-wrapper.full {
        grid-column: 1 / -1;
    }

/* Inputs / Textarea */
.contact-form input,
.contact-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.08);
    background-color: #fff;
    color: #000;
    font-family: inherit;
    font-size: 1rem;
    font-weight:800;
}

/* Absenden-Button */
.contact-form .btn-submit {
    margin-top: .5rem;
    cursor: pointer;
}

/* Fehlermeldungen: reservieren immer Platz */
.field-error {
    display: block;
    min-height: 1.2rem; /* verhindert Springen */
    margin-top: 0.35rem;
    color: var(--unnamed-color-ff5a7f);
    font-size: 0.875rem;
    line-height: 1.2;
}

/* Status-Meldung (oberhalb Formular) */
.form-status {
    text-align: center;
    margin-bottom: .75rem;
}

    .form-status.success {
        color: #2ecc71;
    }

    .form-status.error {
        color: var(--unnamed-color-ff5a7f);
    }

.hidden {
    display: none !important;
}

/* =======================
   Responsive: Mobile (max-width 767px)
   ======================= */
@media (max-width: 767px) {
    .contact-grid {
        grid-template-columns: 1fr; /* alles untereinander */
    }

    .field-wrapper.full {
        grid-column: auto;
    }

    .contact-form .btn-submit {
        width: 100%;
    }
}

/* ===== Responsive Feinheiten ===== */
@media (max-width: 992px) {
    .stat-box, .breaker-box {
        flex: 1 1 100%;
    }
}


/* ===== FAQ ===== */
.faq {
    padding: 2rem 1rem 1rem 1rem;
    text-align: center;
    margin-bottom: 4rem;
}
    .faq h2 {
        margin-bottom: 2rem;
    }

    .faq p {
        margin-bottom: 2rem;
    }

    .faq details {
        font: var(--unnamed-font-style-normal) normal 500 1rem/1.5rem "Poppins";
        letter-spacing: var(--unnamed-character-spacing-0);
    }

        .faq details > summary::marker {
            content: none;
        }

        .faq details > summary h3 {
            font: var(--unnamed-font-style-normal) normal 500 1rem/1.5rem "Poppins";
            letter-spacing: var(--unnamed-character-spacing-0);
        }

            .faq details > summary h3::before {
                content: '► ';
            }

        .faq details[open] > summary h3 {
            margin-bottom: 2rem;
        }

            .faq details[open] > summary h3::before {
                content: '▼ ';
            }

        .faq details ul {
            list-style-type: none;
        }

            .faq details ul li details[open] > summary h4 {
                margin-bottom: 2rem;
            }

            .faq details ul li details > summary::marker {
                content: none;
            }

            .faq details ul li details > summary h4 {
                font: var(--unnamed-font-style-normal) normal 500 1rem/1.5rem "Poppins";
                letter-spacing: var(--unnamed-character-spacing-0);
            }

@media screen and (max-width: 992px) {
    .faq {
        max-width: 90%;
    }
}