:root {
    --background-color: #000000;
    --darker-background-color: #141414;
    --accent-color: #121212;
    --text-color: #ffffff;
    --primary-color: #E30813;
    --lighter-bg: #2d2d2d;
}



h2 {
    font-size: 2.5rem;
}

p {
    line-height: 2.188rem;
}


/*
_________start responsive navigation bar____________
*/

*{
    margin: 0;
    padding: 0;
    color: var(--text-color);
    margin-top: 0px !important;
}

html{
    height: 100%;
    margin-top: 0px !important;
}

body{
    height: 100%;
    margin-top: 0px !important;
}

nav {
    height: 90px;
    background: var(--background-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav .logo {
    margin-left:30px ;
}

nav ul{
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    list-style: none;
}

nav li{
    height: 100%;
    width: 150px;
    text-align: center;
}


nav ul a {
    height: 100%;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;
    transition: transform 0.3s; /* Füge eine Transition hinzu, um den Übergang beim Ändern der Transformation zu animieren */
}


nav input[type="checkbox"]{
    display: none;
}

.toggle_button{
    width: 30px;
    height: 23px;

    position: absolute;
    top: 25px;
    right: 25px;

    display: none;
    flex-direction: column;
    justify-content: space-between;
}

.bar {
    height: 4px;
    width: 100%;
    background: var(--text-color);
    border-radius: 100px;
}

@media(max-width: 850px) {
    .toggle_button {
        display: flex;
    }
    nav ul {
        height: -webkit-min-content;
        height: -moz-min-content;
        height: min-content;
        width: 100%;
        background: var(--background-color);

        display: none;
        position: absolute;
        top: 80px;
    }
    nav li {
        height: -webkit-min-content;
        height: -moz-min-content;
        height: min-content;
        width: 100%;
    }
    nav ul a{
        padding: 30px 0;
    }
    #toggle_button:checked ~ ul {
        display: block;
    }
    nav li:hover {
        background: var(--accent-color);
    }
    #toggle_button:checked ~ header {
        display: none;
    }
}


/* Custom

*/
.toggle_button{
    transition: width 0.3s, height 0.3s; /* Füge eine Transition hinzu, um den Übergang beim Ändern der Breite und Höhe zu animieren */
}  

.toggle_button:hover {
    width: 40px; /* Ändere die Breite auf 40px beim Überfahren mit der Maus */
    height: 33px; /* Ändere die Höhe auf 33px beim Überfahren mit der Maus */
}



nav ul a:hover{
    transform: scale(1.1);
    color: var(--text-color);
    text-decoration: none;
}

nav ul a {
    color: var(--text-color);
    text-decoration: none;
}

.logo img{
   max-width: 90%;
}

/*
_________end responsive navigation bar____________
*/


/*
_________start responsive hero header____________
*/

 /*Hero background */


.hero {
    position: relative;
    width: 100%;
    height: 100vh; /* Das Bild nimmt die gesamte Bildschirmhöhe ein */
    overflow: hidden;
  }
  
  .hero img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    height: auto; /* Das Bild passt sich automatisch an die Breite an, um das Seitenverhältnis beizubehalten */
  }

  /*Hero content */



@media screen and (max-width: 450px) {

.hero-header {
        display: flex;
        position: relative;
        height: 90vh;
        align-items: center;
        max-height: 200px;}

.hero-content-inner h2 {
    text-align: center;
    color: var(--primary-color);
    font-size: 0.825rem;
}

.twb h1 {
    color: var(--accent-color);
    font-weight: bolder;
    font-size: 0.925rem;}


    .hero-content-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    margin-top: -73%;
    }
}

*/

.hero-content-wrapper{
    position: absolute;
    top: 50%; /* Vertikal zentrieren */
    left: 50%; /* Horizontal zentrieren */
    transform: translate(-50%, -50%); /* Zentrierung anpassen */
    text-align: center;

}
  
    .hero-content-inner {
        display: grid;
        justify-content: center;
        z-index: -1;
        position: relative;
    }

    .hero-header{
        display: flex;
        position: relative;
        align-items: center;
    }
    

    .hero-content-inner h2 {
        text-align: center;
        color: var(--primary-color);
    }

    .twb {
        display: flex;
        background-color: #E30813;
        justify-content: center;
        align-items: center;
        padding: 5px 20px 0px 20px;
    }

    .twb h1 {
        color: var(--accent-color);
        font-weight: bolder;
    }



.bpm-title-wrapper{
    background-color: #E30813;
    padding: 5px 20px 0px 20px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    color: var(--accent-color);
}

.bpm-subtitle {
    color: var(--primary-color);
}

.bpm-background{
    background-color: var(--accent-color);
    padding: 2.5rem;
}

.bpm-background-light {
    padding: 2.5rem;
    background-color: var(--accent-color);
}

.about-wrapper {
    max-width: 1100px;
}
.studio-wrapper {
    max-width: 1100px;
}

.studio-wrapper a {
    color: var(--primary-color);
    text-decoration: none; /* Entferne Unterstreichung */
    transition: transform 0.2s ease-in-out; 
}

.studio-wrapper a:hover {
    transform: scale(1.2); /* Vergrößere das Element um 10% */
}

.icon-box-wrapper {
    display: grid;
    justify-content: center;
}

.icon-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

svg {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

.studio-icon-box{
    background-color: var(--lighter-bg);
    margin: 20px;
    padding: 10px;
    border-radius: 20px;
}


.adv-subtitle{
  margin-top: 6.125rem !important;
}

.advantage {
  text-align: center;
}

.advantage:hover p {
    color: var(--primary-color); /* Farbe des Textes beim Hovern über das .advantage-Element */
}

.advantage-wrapper{
  max-width: 990px;
}

.image-wrapper{
    display: grid;
    justify-content: center;
}

.impression-title-wrapper{
  background-color: #E30813;
    padding: 5px 20px 0px 20px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    color: var(--accent-color);
    margin: 0 auto;
}

.repair-image-wrapper img{
  width: 90%;
  max-width: 500px;
}

.repair-wrapper .row {
 
    align-items: center;
}

.repair-text-wrapper a {
  color: var(--primary-color);
    text-decoration: none;
    transition: transform 0.2s ease-in-out;
  }

.repair-text-wrapper h3 {
  font-size: 1.125rem
  }

  .cta-wrapper{
    display: flex;
    justify-content: center;

}

.cta {
    text-align: center;
    padding: 3.125rem 7.125rem;
    background-color: var(--primary-color);
}

.cta h2{
  color: var(--background-color);
}
.cta h3{
  color: var(--background-color);
}
.cta p{
  color: var(--background-color);
}

.cta a{
  color: var(--background-color);
}


footer {
    background-color: var(--primary-color);
}

.footer-bottom {
    background-color: #ffffff !important;
}

.footer-bottom p{
    color: black;
    font-size: 13px;
}