/* ==========================================================
   3D-WUNSCHMANUFAKTUR
   GLOBAL
========================================================== */


/* ==========================================================
   RESET
========================================================== */

*,
*::before,
*::after{

    margin:0;
    padding:0;

    box-sizing:border-box;

}


/* ==========================================================
   HTML / BODY
========================================================== */

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Manrope",sans-serif;

    font-size:18px;

    line-height:1.7;

    color:var(--color-text);

    overflow-x:hidden;

    background:
        linear-gradient(
            rgba(6,10,16,.15),
            rgba(6,10,16,.15)
        ),
        url("/assets/img/Image_I.png")
        center top
        no-repeat
        fixed;

    background-size:cover;

}


/* ==========================================================
   MEDIEN
========================================================== */

img{

    display:block;

    max-width:100%;

    height:auto;

}

svg{

    display:block;

}


/* ==========================================================
   TYPOGRAFIE
========================================================== */

h1,
h2,
h3,
h4,
h5,
h6{

    margin:0;

    font-weight:700;

    line-height:1.15;

    color:var(--color-text);

}

p{

    margin:0;

    line-height:1.8;

    color:var(--color-text-soft);

}


/* ==========================================================
   LINKS
========================================================== */

a{

    color:inherit;

    text-decoration:none;

}


/* ==========================================================
   LISTEN
========================================================== */

ul,
ol{

    list-style:none;

}


/* ==========================================================
   BUTTON RESET
========================================================== */

button{

    font:inherit;

    color:inherit;

    background:none;

    border:none;

    cursor:pointer;

}


/* ==========================================================
   FORMULARE
========================================================== */

input,
textarea,
select{

    font:inherit;

    color:inherit;

}


/* ==========================================================
   SELECTION
========================================================== */

::selection{

    background:var(--color-primary);

    color:#ffffff;

}


/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#0b1620;

}

::-webkit-scrollbar-thumb{

    background:#2b4256;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#3b5870;

}
/* --- FIX FÜR DEN ABLAUF-BLOCK (MOBILE) --- */

/* 1. Stelle sicher, dass der Hauptcontainer nie breiter als der Bildschirm ist */
#ablauf, 
.ablauf-section, 
.section-ablauf { 
    /* Ersetze diese Klasse/ID durch die, die deinen äußeren Ablauf-Rahmen umgibt */
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important; /* Wichtig: Padding wird in die Breite eingerechnet */
    overflow-x: hidden !important; /* Verhindert das horizontale Scrollen */
}

/* 2. Passe das Padding auf kleinen Bildschirmen an */
@media (max-width: 768px) {
    #ablauf, 
    .ablauf-section, 
    .section-ablauf {
        padding-left: 20px !important;  /* Reduziere den linken Abstand */
        padding-right: 20px !important; /* Reduziere den rechten Abstand */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Falls es einen inneren Container gibt (oft .container oder .inner) */
    #ablauf .container,
    #ablauf .inner {
        max-width: 100% !important;
        padding: 0 !important;
    }
}
/* FIX FÜR HERO-LAYERS AUF MOBILE & WEBVIEW */
/* Verhindert, dass die animierten Hintergrund-Layer über den Rand stehen */
div[style*="position:fixed"][style*="inset:0"] {
    max-width: 100vw !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    overflow: hidden !important;
}

/* Zusätzlicher Schutz für den body, falls horizontales Scrollen entsteht */
body {
    overflow-x: hidden !important;
    max-width: 100vw;
}

/* Spezifisch für den Ablauf-Block, um ihn vor Überlagerung zu schützen */
#ablauf {
    position: relative; /* Stellt sicher, dass er im normalen Fluss bleibt */
    z-index: 5; /* Legt ihn über eventuelle Hintergrund-Reste, aber unter den Header */
}
/* --- NOTFALL-FIX FÜR DEN ABLAUF-BLOCK AUF MOBILE --- */
@media (max-width: 900px) {
    
    /* 1. Den Hauptcontainer zwingen, nichts nach außen zu lassen */
    #ablauf {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 16px !important;  /* Sicherer Abstand links */
        padding-right: 16px !important; /* Sicherer Abstand rechts */
        box-sizing: border-box !important;
    }

    /* 2. ALLE direkten Kinder und Enkel zwingen, sich anzupassen */
    #ablauf *, 
    #ablauf * * {
        max-width: 100% !important;
        box-sizing: border-box !important;
        /* Verhindert, dass lange Texte oder Pfade den Container sprengen */
        word-wrap: break-word !important; 
        overflow-wrap: break-word !important;
    }

    /* 3. Flexbox-Container im Ablauf zwingen, untereinander zu gehen */
    /* Das ist kritisch, wenn dort zwei Spalten nebeneinander sind */
    #ablauf div[style*="flex-direction: row"],
    #ablauf .flex-row,
    #ablauf .row {
        flex-direction: column !important;
        gap: 20px !important;
    }

    /* 4. Die vertikale Trennlinie auf Mobile entfernen (wie im Footer gelöst) */
    #ablauf div[style*="border-right"],
    #ablauf .border-right {
        border-right: none !important;
        border-bottom: 2px solid rgba(142, 207, 22, 0.4) !important;
        padding-bottom: 20px !important;
        margin-bottom: 20px !important;
    }

    /* 5. Falls es Inline-Styles mit festen Breiten gibt, diese überschreiben */
    #ablauf [style*="width:"],
    #ablauf [style*="max-width:"] {
        /* Wir lassen max-width zu, aber verhindern, dass es > 100% wird */
        max-width: 100% !important; 
    }
}