@media (max-width: 850px) {


    .language-label {
        color: red !important;
    }
    
    /* === Section 1: Hero === */
    #section1 .slogan {
        padding: 1rem;
        text-align: center;
    }

    #section1 .hero-img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    #section1 .slogan h3 {
        font-size: 1.5rem;
    }

    /* === Section 2: Über mich === */
    #section2 .about-grid {
        display: flex !important;
        flex-direction: column;
        gap: 1.5rem;
        padding: 1rem;
        text-align: center;
    }

    #section2 .about-image-wrapper {
        justify-content: center;
        align-items: center;
    }

    #section2 .about-image {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        object-fit: cover;
        margin: 0 auto;
    }

    #section2 .about-text {
        text-align: center;
        padding: 0 1rem;
    }

    #section2 .about-heading {
        font-size: 1.5rem;
    }

    /* === Section 3: Technische Beschreibung === */
    #section3 .grid-three-rows-two-columns {
        display: flex !important;
        flex-direction: column;
        gap: 2rem;
        padding: 1rem;
        text-align: center;
    }

    #section3 .grid-three-rows-two-columns img {
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }

    #section3 .grid-three-rows-two-columns h2,
    #section3 .grid-three-rows-two-columns h3,
    #section3 .grid-three-rows-two-columns p {
        text-align: center !important;
        margin: 0 auto;
    }

    #section3 .grid-three-rows-two-columns ul.features-list {
        text-align: left;
        padding-left: 1.25rem;
    }

    /* === Section 4: Prozessgrafik === */
    #section4 .prozess-layout {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1.25rem;
        padding: 1rem;
        width: 100%;
    }

    #section4 .prozess-layout .center-text:first-of-type {
        order: 1;
        text-align: center;
        font-size: 1rem;
        padding: 0 1rem;
        line-height: 1.4;
        width: 100%;
    }

    #section4 .prozess-layout .steps {
        order: 2;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        width: 100%;
    }

    #section4 .prozess-layout .steps button {
        width: 100%;
        display: block;
    }

    #section4 .prozess-layout .steps button img {
        width: 100%;
        height: auto;
        display: block;
    }

    #section4 .prozess-layout .divider {
        order: 3;
        width: 100%;
        height: 3px;
        background-color: var(--jb24-primary-90);
        border-radius: 1px;
    }

    #section4 .prozess-layout .result {
        order: 4;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        width: 100%;
    }

    #section4 .prozess-layout .result button {
        width: 100%;
        display: block;
    }

    #section4 .prozess-layout .result button img {
        width: 100%;
        height: auto;
        display: block;
    }

    #section4 .prozess-layout .center-text:last-of-type {
        order: 5;
        text-align: center;
        font-size: 1rem;
        padding: 0 1rem;
        line-height: 1.4;
        width: 100%;
    }

    #section4 .center-text strong.rot {
        color: red;
        font-weight: bold;
    }

    /* === Section 5: Features === */
    #section5.grid-three-columns {
        display: flex !important;
        flex-direction: column;
        gap: 2rem;
        padding: 1rem;
    }

    #section5 .feature-box {
        width: 100%;
    }

    #section5 .feature-img {
        max-width: 100%;
        height: auto;
    }

    #section5 .section-heading {
        font-size: 1.5rem;
        text-align: center;
    }

    #section5 .section-heading-wrapper {
        width: 100%;
    }

    .feature-btn {
        width: 100%;
    }

    /* === Section 6: Kontaktformular === */
    #section6 form {
        padding: 1rem;
    }

    #section6 .input-with-star {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
    }

    #section6 .input-with-star input,
    #section6 .input-with-star textarea {
        width: 100%;
    }

    /* === Section 7: Downloadbereich === */
    #section7.grid-three-columns {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
    }

    .download-btn-container {
        flex-direction: column;
        align-items: center;
    }

    .download-btn {
        width: 100%;
        min-width: 300px;
        height: 60px;
    }

    /* === Section 8: Lizenzen === */
    #section8.grid-three-columns {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem;
    }

    .license-card {
        width: 100%;
        padding: 1rem;
        margin-bottom: 1.5rem;
    }

    .license-card-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .license-card-grid > * {
        width: 100% !important;
        margin: 0 !important;
    }

    .license-card-grid .card-title {
        font-size: 1.6rem;
        text-align: center;
        margin-bottom: 0.5rem;
        color: #1e293b;
    }

    .license-card-grid .license-content {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .license-card-grid .bullet-list {
        padding-left: 1.2rem;
        font-size: 1rem;
        text-align: left;
    }

    .license-card-grid .bullet-list li {
        margin-bottom: 0.25rem;
        line-height: 1.3;
    }

    .license-card-grid .tools-label {
        font-size: 1.1rem;
        font-weight: 600;
        color: #1e293b;
    }

    .price-line {
        font-size: 1.05rem;
        text-align: center;
        margin: 0.5rem 0;
    }

    .price-line.rot {
        color: red !important;
    }

    .feature-btn {
        width: 100%;
        margin-top: 0.75rem;
    }

    /* === Checkout PAGE === */
    /* === Bilder ausblenden === */
    .start-image,
    .cart-image,
    .billing-image,
    .done-image {
        display: none !important;
    }

    /* === Container in Spalten-Flow bringen === */
    .checkout-grid-container,
    .checkout-edit-form-container,
    .billig-edit-form-container {
        display: flex !important;
        flex-direction: column !important;
        padding: 1rem;
    }

    /* === Alle form-grid-Varianten: einspaltig === */
    .form-grid,
    .checkout-form-grid-contact,
    .checkout-form-grid-billig {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1rem;
        width: 100%;
    }

    /* === Input-Felder auf volle Breite === */
    .form-control,
    .form-control.full {
        width: 100% !important;
        grid-column: auto !important;
        box-sizing: border-box;
    }

    /* === Footer ganz unten, untereinander === */
    .checkout-footer {
        order: 999;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
               width: 100% !important;
    }

    /* === Footer-Inhalte: volle Breite, stacked === */
    .form-grid-agb,
    .checkout-paypal {
        width: 100% !important;
        display: block !important;
    }
    
    .form-grid-agb {
       padding-left: 16px;
    }

    .checkout-paypal {
        text-align: center;
    }

    .checkout-paypal button,
    .paypal-button {
        width: 100% !important;
        max-width: 400px;
    }

    /* === Zentrierung für Titel/Textbereiche === */
    .checkout-title-container,
    .checkout-contact,
    .checkout-address {
        text-align: center;
        width: 100%;
    }

    /* === Form Control Number Borderless: Mobile Layout === */
    .form-control.full.number.borderless {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
        width: 100% !important;
        padding: 1rem !important;
        box-sizing: border-box;
    }

    /* === Alle Kinder-Elemente: volle Breite und Block-Display === */
    .form-control.full.number.borderless > * {
        width: 100% !important;
        display: block !important;
        text-align: right !important;
        margin: 0 !important;
    }

    /* === Input-Feld spezifische Anpassungen === */
    .form-control.full.number.borderless input[type="number"],
    .form-control.full.number.borderless .width.numbers {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0.5rem !important;
        margin: 0 !important;
        text-align: right !important;
    }

    /* === Label-Text Anpassungen === */
    .form-control.full.number.borderless .label-text {
        font-size: 1rem !important;
        text-align: right !important;
        padding: 0.25rem 0 !important;
    }

    /* === Rechts-ausgerichtete Labels: bleiben rechtsbündig in Mobile === */
    .form-control.full.number.borderless .label-text.right {
        text-align: right !important;
    }

    /* === Spacer in Mobile ausblenden oder minimieren === */
    .form-control.full.number.borderless .spacer {
        display: none !important;
        /* Alternativ: height: 0.5rem !important; wenn Sie etwas Abstand wollen */
    }

    /* === Min-width Beschränkungen entfernen === */
    .form-control.full.number.borderless .minwidth {
        min-width: auto !important;
    }

    /* === Grüne Labels hervorheben === */
    .form-control.full.number.borderless .label-text.green {
        color: #22c55e !important;
        font-weight: 600 !important;
    }
    
}