/* style.css */
/* =========================================
   DM SANS (Variable Font oder spezifische)
   ========================================= */

@font-face {
    font-family: 'DM Sans';
    /* Passe den Dateinamen exakt an deine heruntergeladene Datei an */
    src: url('fonts/DMSans.ttf') format('truetype');
    font-weight: 100 1000; /* Definiert den Bereich der variablen Strichstärke */
    font-style: normal;
    font-display: swap; /* Sorgt dafür, dass der Text beim Laden sichtbar bleibt */
}

/* =========================================
   DM MONO (Hat meistens keine Variable Font)
   ========================================= */
/* DM Mono - Regular (400) */
@font-face {
    font-family: 'DM Mono';
    src: url('fonts/DMMono-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Color Palette */
    --dark-blue: #0B192F;      /* Main background */
    --bright-blue: #115DCD;    /* UI elements / gradients */
    --mint-green: #03D9C0;     /* Accent color / Buttons */
    --white: #FFFFFF;          /* Text and contrast */

    /* Typography */
    --font-main: 'DM Sans', sans-serif;
    --font-code: 'DM Mono', monospace;
}

/* Verhindert seitliches Scrollen (Wackeln) auf mobilen Geräten */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

body {
    font-family: var(--font-main);
    background-color: var(--dark-blue);
    color: var(--white);
    margin: 0;
    padding: 0;
}

.top-nav {
    box-shadow: 0px 0px 25px #115DCD;
    position: relative;
    z-index: 1000;
}

.mb-5 {
    margin-bottom: 4.5rem !important;
}
/* Typografie Klassen */
h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
}

.text-white {
    font-size: 1.563rem;
}

.code-style {
    font-family: var(--font-code);
    color: var(--mint-green);
}

.code-style-v2 {
    font-family: var(--font-code);
    color: #ffffff;
    font-size: 1rem;
}

p {
    font-size: 1rem;
}

/* Verhindert, dass Code-Blöcke auf Mobile das Layout sprengen */
pre {
    font-size: 1rem;
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap; /* Lässt extrem lange Code-Zeilen umbrechen */
    word-wrap: break-word;
}

/* Custom Bootstrap Button überschreiben */
.btn-primary, .btn-mint {
    background-color: var(--mint-green);
    border-color: var(--mint-green);
    color: white;
    font-weight: 500;
    border-radius: 50px;
    border: none;
    transition: all 0.2s ease-in-out;
}

.btn-primary:hover, .btn-mint:hover {
    background-color: #02b5a1;
    border-color: #02b5a1;
    color: var(--white);
}

/* --- Typografie & Utilities --- */
.text-dark-blue { color: var(--dark-blue); }
.text-bright-blue { color: var(--bright-blue); }
.text-mint { color: var(--mint-green); }
.bg-dark-blue { background-color: var(--dark-blue); }
.bg-bright-blue { background-color: var(--bright-blue); }

svg {
    color: var(--mint-green);
    font-size: 2.3rem;
}

.container.py-5 {
    max-width: 1000px;
}

.display-5 {
    font-size: 2.813rem;
}

/* --- Farbverlauf Sektion (Mitte bis Unten) --- */
.gradient-section {
    background: linear-gradient(180deg, var(--white) 0%, var(--bright-blue) 40%, var(--bright-blue) 100%);
}

.for_who_section{
    margin-bottom: 7rem !important;
}
/* --- Spezielle Karten-Designs --- */
.blue-card {
    background-color: var(--bright-blue);
    border-radius: 20px;
    color: var(--white);
}

.author-card, .cta-card {
    background-color: #3b82f6;
    border-radius: 20px;
    border: solid 2px var(--mint-green);
}

.cta-form-info{
    font-size: 1rem;
    width: 21.063rem;
    font-weight: 300;
    line-height: 28px;
    word-wrap: break-word;
}

.border-2 {
    border: solid 2px var(--mint-green) !important;
}

.feature-card {
    border: 1px solid var(--bright-blue);
    border-radius: 15px;
    background-color: var(--white);
}

.form-check-label {
    font-size: 0.875rem;
}

/* --- Spezifische Hero Formular Anpassungen --- */
.hero-card {
    background-color: var(--bright-blue);
    border-radius: 30px;
    color: var(--white);
    /* Der negative Margin zieht die Karte in die nächste Sektion hinein */
    margin-bottom: -6rem;
    position: relative;
    z-index: 10;
}

/* Gepunktete Trennlinien */
.border-dotted-end { border-right: 1px dotted white; }
.border-dotted-start { border-left: 1px dotted white; }

/* Formular Styling (Hero Sektion - Linien statt Boxen) */
.form-control-line {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    color: var(--white);
    border-radius: 0;
    padding: 0.5rem 0;
    font-size: 0.9rem;
}
.form-control-line::placeholder { color: rgba(255, 255, 255, 0.6); }
.form-control-line:focus {
    background: transparent;
    color: var(--white);
    box-shadow: none;
    border-bottom: 1px solid var(--white);
}

/* Preis Typografie */
.price-display { line-height: 1; }
.price-currency { font-size: 1.2rem; vertical-align: super; }
.price-amount { font-size: 5rem; font-weight: 300; margin: 0 0.2rem; }
.price-cents { font-size: 1.2rem; vertical-align: super; }

/* --- Formular Styling (Bottom CTA - Weiße Boxen) --- */
.form-control-pill {
    border-radius: 50px;
    padding: 0.75rem 1.5rem;
}

.dsa-logo {
    background-color: #0b1c2c; /* dunkler Hintergrund wie im Bild */
    padding: 15px 0;
}

.powered-text {
    color: #aab6c4;
    margin-right: 10px;
    font-size: 16px;
}

.dsa-img {
    height: 35px;
    object-fit: contain;
}

p.code-style-v2.mb-0 {
    width: 13.375rem;
}

/* ========================================================================= */
/* MEDIA QUERIES (RESPONSIVE FIXES FÜR MOBILE & TABLET)                      */
/* ========================================================================= */

@media (max-width: 992px) {
    .border-dotted-end, .border-dotted-start {
        border: none;
    }
    .border-dotted-end {
        padding-bottom: 2rem;
        margin-bottom: 1rem;
    }
    .border-dotted-start {
        border-top: 1px dotted white;
        padding-top: 2rem;
        margin-top: 1rem;
    }

    .display-5 {
        font-size: 2.2rem;
    }

    section.bg-white.py-5.text-dark-blue {
        padding: 0 4rem;
    }

    section.gradient-section.text-white.py-5{
        padding: 0 4rem;
    }

    .hero-card {
        margin-bottom: -38rem;
    }

    .feature-sec {
        padding-top: 37rem !important;
    }
}

@media (max-width: 767px) {

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

    .desktop-br{
        display: none;
    }

    .first-form{
        padding: 0rem 1.125rem;
    }

    p.code-style-v2.mb-0 {
        width: 100%;
    }

    /* Zwingt den Browser, lange Texte umzubrechen. Überschreibt das HTML text-nowrap */
    .text-nowrap {
        white-space: normal !important;
    }

    /* Passt die große Hero-Karte für Mobile an */
    .hero-card {
        margin-bottom: -2rem;
        padding: 1.5rem !important;
    }

    .code-position{
        justify-content: start;
    }

    /* Kleinere Preise auf Handys */
    .price-amount {
        font-size: 3.5rem;
    }

    /* Macht den JSON-Code etwas kleiner */
    pre.code-style {
        font-size: 1rem;
    }

    /* Setzt Ränder zurück, damit nichts aus dem Bildschirm ragt */
    .code-style-v2 {
        margin-right: 0;
    }

    /* Das Bild des Autors auf Mobile zentrieren und begrenzen */
    .author-card img {
        max-width: 140px;
        margin-bottom: 1rem;
    }

    section.bg-white.py-5.text-dark-blue.master-api-section {
        padding: 0 1.125rem;
    }

    section.gradient-section.text-white.py-5 {
        padding: 0 1.125rem;
    }


    .text-white {
        font-size: 1.2rem;
    }

    h1 {
        font-size: 2.3rem !important;
    }

    .display-6{
        font-size: 2.2rem;
    }

    .feature-sec {
        padding-top: 0rem !important;
    }

    .cta-form-info {
        width: 17.063rem;
    }

    .footer-brand{
        padding: 0rem 1.125rem;
    }

    .footer-links-wrapper{
        padding-left: 1.125rem !important;
    }
    .contents-desktop{
        display: none;
    }

    /* Basis-Styling für Mobile (Horizontale Linie unten) */
    .border-dotted-end {
        position: relative;
        padding-bottom: 25px; /* Platz für die Linie schaffen */
    }

    .border-dotted-end::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%); /* Zentriert die Linie exakt */

        /* HIER steuerst du die Breite der Linie (wie auf dem Foto) */
        width: 150px; /* Alternativ z.B. 60% */

        /* HIER steuerst du das Aussehen der Punkte */
        border-bottom: 2px dotted white;
    }
}

/* ========================================================================= */
/* DESKTOP ONLY OVERRIDES                                                    */
/* ========================================================================= */

@media (min-width: 768px) {

    /* Spezifisches Styling nur für die Author-Card auf Desktop */
    .author-card .col-md-9 {
        flex: 0 0 auto;
        width: 60%;
        margin-left: 3rem;
    }

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

    .author-card .col-md-3 {
        flex: 0 0 auto;
        width: 30%;
    }

    .code-style-v2 {
        margin-right: 2rem;
    }
}


@media (min-width: 992px) {
    .contents-mobile{
        display: none;
    }

    .code-position{
        justify-content: end;
    }
}
@media (min-width: 1200px) {
    /* Behält deine exakte Wunsch-Breite für den Hero-Bereich auf großen Bildschirmen bei */
    .col-xl-10 {
        flex: 0 0 auto;
        width: 71.333333%;
    }

    .hero-card {
        margin-bottom: -25rem;
    }

    .feature-sec {
        padding-top: 25rem !important;
        max-width: 1095px;
    }

    .container.py-5 {
    max-width: 1095px;
    }

    .row.justify-content-center.mb-5.pb-3
    {
        margin-left: -7rem;
    }
}