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

:root {
    /* --- Original XD-Variablen (behalte diese) --- */
    --unnamed-color-282424: #282424; /* Schwarzgrau aus XD */
    --unnamed-color-8660ed: #8660ED; /* Lila aus XD */
    --unnamed-color-03c4ff: #03C4FF;
    --unnamed-color-ff5a7f: #FF5A7F;
    --weiß: #FFFFFF;
    --schwarz: #000000;
    --unnamed-font-family-montserrat: "Montserrat Black", sans-serif;
    --unnamed-font-family-open-sans: "Open Sans", sans-serif;
    --unnamed-font-family-poppins: "Poppins", sans-serif;
    --unnamed-font-family-times-new-roman: "Times New Roman", serif;
    --unnamed-font-style-normal: normal;
    --unnamed-font-style-italic: italic;
    --unnamed-font-weight-300: 300;
    --unnamed-font-weight-bold: 700;
    --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 --- */
    --page-bg: var(--schwarz);
    --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(--weiß);
    --color-on-light: #111111;
    /* 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-headline-family: var(--unnamed-font-family-times-new-roman);
    --font-section-title-family: var(--unnamed-font-family-montserrat);
    --font-paragraph-family: var(--unnamed-font-family-poppins);
    --font-ui-family: var(--unnamed-font-family-open-sans);
    --font-weight-300: var(--unnamed-font-weight-300);
    --font-weight-bold: var(--unnamed-font-weight-bold);
}

/* ===== Global ===== */
body {
    background-color: #000;
    color: #fff;
    font-family: 'Titillium Web', sans-serif;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h6 {
    font-family: var(--font-section-title-family);
    font-weight: 700;
    color: var(--weiß);
}

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

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

/* ===== 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(--weiß);
}

/* ===== 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 .nav-link {
    color: var(--weiß);
    font-weight: 500;
    margin: 0 0.75rem;
}

    .site-header-nav .nav-link:hover {
        color: #ff007a;
    }

.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-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(--weiß);
            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 h1 {
        font-weight: 900;
        font-size: 0;
        line-height: 2rem;
        color: var(--weiß);
        padding: 0 4rem;
        margin-bottom: 2rem;
    }
        .hero h1 span {
            font-size: 3rem;
        }

        .hero h1 .exclamation-as-i {
            color: var(--accent-pink);
        }

    .hero .collage {
        display: flex;
    }

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

    .hero p {
        color: var(--weiß);
        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;
}

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

.hero-collage {
    padding: 1rem 2rem 0 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 1rem 6rem;
}
    .hero-collage img {
        max-width: 100%;
        margin: 1rem;
    }

@media screen and (max-width: 992px) {
    .hero {
        max-width: 90%;
    }
        .hero h1 {
            padding: 0;
        }
            .hero h1 span {
                font-size: 2.5rem;
            }
    .hero-buttons .desktop {
        display: none;
    }
    .hero-collage {
        display: none;
    }
    .hero p {
        font-size: 1rem;
        line-height: 1.5rem;
    }
}

@media screen and (min-width: 992px) {
    .hero .collage {
        display: none;
    }

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

/* ===== Netzwerk ===== */
.netzwerk {
    text-align: center;
}
    .netzwerk h2 {
        font-size: 2.5rem;
        margin-bottom: 2rem;
    }

    .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%;
    padding-top: calc(var(--section-gap) + 0.5rem);
    padding-bottom: calc(var(--section-gap) + 0.5rem);
}

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

.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 h2 {
        font-size: 2.5rem;
        margin-bottom: 2rem;
    }

    .kunden .pinwall {
        background: var(--weiß);
        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;
        }

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

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

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

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

    .feature-text h2 {
        margin-bottom: 2rem;
        font-size: 2.5rem;
    }

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

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

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

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

.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;
    }
    .breaker-box p {
        font-size: 1rem;
    }

@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-text h2 {
            font-size: 2rem;
        }
}

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

.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%;
    }
}