/* 1. VARIABLEN */
:root {
    --Orange: #ff4f00;
    --G-Grey: #2b2f36;
    --S-Grey: #6b7280;
    --Bg-White: #ffffff;
    --Bg-Grey: #f7f8fa;
    --Block-Font: 12px;
    --Btn-Radius: 6px;
    --Section-PT: 60px;
    --Section-PB: 60px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 2. BASIS STYLES */
body, html {
    margin: 0;
    font-family: Helvetica, Arial, sans-serif;
    color: var(--G-Grey);
    line-height: 1.6;
    padding: 0;
    scroll-behavior: smooth;
}   
h1 {
    font-size: 56px;
    font-weight: 600;
    line-height: 1.1;
}
h2{
    font-size: 35px;
    font-weight: 600;
    line-height: 1.1;
    padding-top: 0;
    margin-bottom: 20px;
}
h2 span {
    color: var(--Orange);
    margin-top: 0;
}
h3{
    font-size: 30px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 5px;
    margin-top: 0;
}
.title-line{
    width: 50px;
    height: 2px;
    background-color: var(--Orange);
    margin: 0 auto;
    margin-bottom: 30px;
}
h4{
    font-size: 18px;
}
p{
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
}

/* 3. NAVIGATION */
.navigation{
    position: -webkit-sticky;
    position: sticky; 
    top: 0px;
    z-index: 1000; /* Sorgt dafür, dass die Navi über anderem Inhalt liegt */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--Bg-White);
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #b6b2b2;
}
.nav-container{
    width: 1200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
nav {
    padding: 15px 0;
    box-shadow: none;
}
nav a {
    color: var(--S-Grey);
    text-decoration: none;
    margin: 0 15px;
    font-size: 14px;
}
nav a:hover {
    color: #333; /* Dunkler Effekt beim Drüberfahren */
}
.nav-btn{
    background: var(--Orange);
    color: white;
    border-radius: var(--Btn-Radius);
    padding: 0px 0 0px 0;
    box-shadow: none;
    border: none;
    cursor: pointer;
    padding: 12px 24px;
    margin-right: 0;
}
.nav-btn a{
    padding: 0;
    margin: 0;
    text-decoration: none;
}
.nav-btn:hover{
    background-color: #e55f14;
    color: #ffffff;
}
.logo{
    width: 150px;
    height: 50px;
    background-image: url('../media/archeus-logo-new.png');
    background-position: center;    
    background-repeat: no-repeat;
    background-size: contain;
}
/* DESKTOP STYLES */
.burger-menu { 
    display: none;
    cursor: pointer;
} /* Auf Desktop unsichtbar */

.burger-menu span { 
    display: block;
    width: 25px;
    height: 3px;
    background: black; margin: 5px;
}
.burger {
    display: none; /* Auf Desktop versteckt */
    cursor: pointer;
}

.burger span {
    display: block;
    width: 25px;
    height: 3px;
    background: #333;
    margin: 5px;
}

/* 4. BUTTONS */
.prm-btn{
    background: var(--Orange);
    color: white;
    border-radius: var(--Btn-Radius);
    padding: 16px 0 16px 0;
    box-shadow: none;
    border: none;
    cursor: pointer;
    width: 47%;
}
.prm-btn:hover{
    background-color: #e55f14;
}
.scd-btn{
    border: 1px solid #2b2f36;
    padding: 16px 0 16px 0;
    box-shadow: none;
    cursor: pointer;
    border-radius: var(--Btn-Radius);
    background-color: transparent;
    width: 47%;
}
.scd-btn:hover{
    background-color: #2b2f36;
    color: #ffffff;
}
.btn-container{
    display: flex; 
    justify-content: space-between;
    margin-top: 30px;
}

/* 5. CONTAINER */
.container {
    width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* 6. HERO */
.hero-section {
    height: calc(100vh - 70px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-section .container{
    background-image: url(../media/decision-architecture-landing.png);
    background-position: right center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: transparent;
}
.hero-content-container{
    width: 50%;
}
.hero-section h1 span{
    color: var(--Orange);
}

/* 7. SECTION 2 */
.screen-2  {
    padding-top: var(--Section-PT);
    padding-bottom: var(--Section-PB);
    background-color: var(--Bg-Grey);
}
.screen-2-content-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.screen-2-text-side{
    width: 50%;
}
.screen-2-media-side{
    width: 50%;
}
.screen-2-media-side_item-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.screen-2-media-side_item-container div{
    width: 100px;
    height: 100px;
    background: url('../media/wedo-inventory.png');
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: top center;
    margin: 3px;
    display: flex;
    justify-content: center;
    align-items: end;
}
.screen-2-media-side_item-container div p{
    font-size: 9px;
    text-align: center;
    color: var(--S-Grey);
}
.screen-2-media-side_item-container div:first-child{
    background-image: url('../media/challenge-rules.png');
}
.screen-2-media-side_item-container div:nth-child(2){
    background-image: url(../media/challenge-decisions.png);
}
.screen-2-media-side_item-container div:nth-child(3){
    background-image: url(../media/challenge-service.png);
}
.screen-2-media-side_item-container div:nth-child(4){
    background-image: url(../media/challenge-loyalty.png);
}
.screen-2-media-side_item-container div:nth-child(5){
    background-image: url(../media/challenge-capital.png);
}


/* 8. SCREEN 3 */
.screen-3{
    padding-top: var(--Section-PT);
    padding-bottom: var(--Section-PB);
    scroll-margin-top: 70px; 
}
.screen-3-blocks-container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.screen-3-blocks-container div{
    width: 380px;
    height: 200px;
    box-sizing: border-box;
    border: 1px solid var(--G-Grey);
    border-radius: var(--Btn-Radius);
    margin: 10px;
    padding: 10px 30px 10px 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: baseline;
    background-size: 80px;
    background-repeat: no-repeat;
    background-position: 20px center;
}
.screen-3-blocks-container div:first-child{
    background-image: url('../media/wedo-strategy.png');
}
.screen-3-blocks-container div:nth-child(2){
    background-image: url(../media/wedo-market-setup.png);
}
.screen-3-blocks-container div:nth-child(3){
    background-image: url(../media/wedo-digital-era.png);
}
.screen-3-blocks-container div:nth-child(4){
    background-image: url(../media/wedo-inventory.png);
}
.screen-3-blocks-container div:nth-child(5){
    background-image: url(../media/wedo-parts.png);
}
.screen-3-blocks-container div:nth-child(6){
    background-image: url(../media/wedo-supply-chain.png);
}

.screen-3-blocks-container div h3{
    margin: 0 0 10px 0;
}
.screen-3-blocks-container div p{
    font-size: var(--Block-Font);
    margin: 0;
}

/* 9. SCREEN 4 */
.screen-4{
    padding-top: var(--Section-PT);
    padding-bottom: var(--Section-PB);
    background-color: var(--Bg-Grey);
}
.screen-4-blocks-container{
    display: flex;
    align-items: center;
    justify-content: center;
}
.screen-4-blocks-container div{
    flex: 1;
    padding: 100px 20px 0 20px;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    background-size: 220px;
    background-repeat: no-repeat;
    background-position: center 0;
}
.screen-4-blocks-container div:first-child{
    background-image: url('../media/approach-diagnose.png');
}
.screen-4-blocks-container div:nth-child(2){
    background-image: url('../media/approach-design.png');
}
.screen-4-blocks-container div:nth-child(3){
    background-image: url('../media/approach-simulate.png');
}
.screen-4-blocks-container div:nth-child(4){
    background-image: url('../media/approach-implement.png');
}
.screen-4-blocks-container div:nth-child(5){
    background-image: url('../media/approach-stabilize.png');
}

/* 10. SCREEN 5 */
.screen-5{
    padding-top: var(--Section-PT);
    padding-bottom: var(--Section-PB);
}
.screen-5-content-container{
    display: flex;
    align-items: start;
    justify-content: center;
}
.screen-5-content-container div{
    margin: 0 10px 0 10px;
    width: 500px;
}
.screen-5-content-container div ul{
    padding-left: 0;
    line-height: 27px;
}
.screen-5-content-container div ul li{
    text-decoration: none;
    list-style-type: none;
    padding-left: 30px;
    background: url('../media/icons8-check-50.png');
    background-size: 15px;
    background-position: 0 center;
    background-repeat: no-repeat;
}

/* 11. SCREEN 6 */
.screen-6{
    padding-top: var(--Section-PT);
    padding-bottom: var(--Section-PB);
    background-color: var(--G-Grey);
    color: #ffffff;
    border-bottom: 1px solid var(--S-Grey);
}
.screen-6-content-container{
    display: flex;
    align-items: center;
    justify-content: center;
}
.screen-6-left-side{
    width: 50%;
}
.screen-6-left-side h3{
    text-align: left;
}
.title-line-left{
    width: 50px;
    height: 2px;
    background-color: var(--Orange);
    margin-bottom: 30px;
}
.screen-6-right-side{
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: start;
}
.screen-6-right-side div{
    width: 280px;
    height: 150px;
    background-color: #424242 ;
    margin: 5px;
    padding-left: 90px;
    padding-right: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    background-size: 50px;
    background-repeat: no-repeat;
    background-position: 20px center;
}
.screen-6-right-side div:first-child{
    background-image: url('../media/about-experience.png');
}
.screen-6-right-side div:nth-child(2){
    background-image: url('../media/about-competency.png');
}
.screen-6-right-side div:nth-child(3){
    background-image: url('../media/wedo-parts.png');
}
.screen-6-right-side div:nth-child(4){
    background-image: url('../media/wedo-strategy.png');
}

.screen-6-right-side div span{
    font-size: 25px;
}
.screen-6-right-side div p{
    font-size: 12px;
    margin-top: 0;
}

/* 12. SCREEN 7 */
.screen-7{
    padding-top: var(--Section-PT);
    padding-bottom: var(--Section-PB);
    background: linear-gradient(to bottom, #383838, var(--G-Grey) );
    border-bottom: 1px solid var(--S-Grey);
}
.screen-7-content-container{
    display: flex;
}
.screen-7-left{
    width: 20%;
    position: relative;
}
.screen-7-left img{
    width: 600px;
    position: absolute;
    left: -320px;
    top: -120px;
}
.screen-7-center{
    width: 50%;
}
.screen-7-center h2{
    color: #ffffff;
    margin-bottom: 0;
}
.screen-7-center h2 span{
    color: var(--Orange);
}
.screen-7-center p{
    color: #ffffff;
}
.screen-7-right{
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
}
.scr-7-btn-1, .scr-7-btn-2{
    width: 100%;
    padding: 20px 0 20px 0;
    border-radius: var(--Btn-Radius);
    color: white;
}
.scr-7-btn-1{
    background-color: var(--Orange);
    border: 0;
    margin-bottom: 5px;
}
.scr-7-btn-2{
    background-color: transparent;
    border: 1px solid var(--S-Grey);
    margin-top: 5px;
}
.scr-7-btn-1:hover{
    background-color: #e55f14;
    color: #ffffff;
    cursor: pointer;
}
.scr-7-btn-2:hover{
    cursor: pointer;
    background-color: var(--S-Grey);
}

/* FOOTER */
footer{
    background: var(--G-Grey);
}
.footer-content{
    display: flex;
    color: var(--S-Grey);
}
.footer-content div:last-child{
    margin-left: auto;
}
.footer-logo{
    width: 300px;
    margin-right: 50px;
    padding-top: 30px;
}
.footer-logo img{
    width: 100%;
}
.footer-menu-container{
    display: flex;
    padding-top: 30px;
}
.footer-menu-container div{
    margin-left: 30px;
    margin-right: 30px;
}
.footer-menu-container div h5{
    padding: 0;
    margin: 0;
    color: white;

}
.footer-menu-container div div{
    display: flex;
    flex-direction: column;
    padding: 20px 0 0 0;

}
.footer-menu-container div div a{
    padding: 0;
    margin: 0;
	font-size: 12px;
	color: var(--S-Grey);
	text-decoration: none;
}
.footer-menu-container div div a:hover{
    color: white;
}
.footer-contact{
    padding-top: 30px;
    
}
.footer-contact h5{
    color: white;
    padding: 0;
    margin: 0 0 20px 0;
}
.footer-contact div{
    color: white;
}
.footer-contact img{
    width: 30px;
    margin-top: 20px;
}
.copywright{
    color: var(--S-Grey);
}

/* Schedule a call Form*/
.schedule-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.7);
}

.schedule-modal-content {
    position: relative;
    width: 100%;
    max-width: 520px;
    padding: 32px;
    border-radius: 16px;
    background: #fff;
    color: #111;
}

.schedule-modal-content h3 {
    margin-top: 0;
}

.schedule-modal-content input,
.schedule-modal-content textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    margin-top: 6px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font: inherit;
}

.schedule-modal-content label {
    font-weight: 600;
}

.schedule-close {
    position: absolute;
    top: 12px;
    right: 16px;
    border: 0;
    background: transparent;
    font-size: 32px;
    cursor: pointer;
}

.prm-btn.scheduleButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 32px;
    padding-right: 24px;
}

.form-row {
    margin-bottom: 16px;
}

/* ANIMATION */
#complexity {
  position: absolute;
  width: 200px;
  height: 200px;
  margin: auto;
  transform: rotate(45deg);
  top: 0; bottom: 0; left: 0; right: 0;
}