/* Grundstile und Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* Einbindung der Schriftarten mit unterschiedlichen Gewichtungen */
@font-face {
    font-family: 'M_PLUS_1p';
    src: url('./M_PLUS_1p/MPLUS1p-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'M_PLUS_1p';
    src: url('./M_PLUS_1p/MPLUS1p-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'M_PLUS_1p';
    src: url('./M_PLUS_1p/MPLUS1p-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'M_PLUS_1p';
    src: url('./M_PLUS_1p/MPLUS1p-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'M_PLUS_1p';
    src: url('./M_PLUS_1p/MPLUS1p-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}


body {
    font-family: 'M_PLUS_1p', sans-serif;
    font-weight: 300; /* Standardgewicht light */
    color: #fff;
    background-color: #2a2f39;
}

/* Hero-Bereich */
.hero {
    background-image: url('hero.jpg'); /* Pfad anpassen */
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
}

/* Hero-Bereich */
.hero {
    background-image: url('hero.jpg'); /* Pfad anpassen */
    background-size: cover;
    background-position: center;
    height: 100vh; /* Nimmt die volle Höhe des Viewports ein */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
}

.hero-content {
    position: absolute; /* Absolut positioniert auf der linken Seite */
    left: 5%; /* Abstand von der linken Seite */
    max-width: 45%; /* Begrenzung auf weniger als die Hälfte der Seite */
    color: white;
    text-align: left;
    top:15%;
    margin-top:0;
    padding: 1rem; /* Optionales Padding innerhalb des Blocks */
}

.hero h1 {
    font-family: 'M_PLUS_1p', sans-serif;
    font-weight: 100; /* Dünnste Variante für den Titel */
    text-transform: uppercase;
    font-size: 3.4rem;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
    color: #fff;
    line-height: 1.2; /* Zeilenhöhe für dreizeiligen Text */
}

.hero p {
    font-size: 1.2rem;
    font-weight: 300;
    color: #fff;
}


h2 {
    font-family: 'M_PLUS_1p', sans-serif;
    font-weight: 100; /* Dünnste Variante für den Titel */
    font-size: 1.4rem;
    margin-bottom: 1rem;
}
h3 {
    font-family: 'M_PLUS_1p', sans-serif;
    font-weight: 300; /* Dünnste Variante für den Titel */
    text-transform: uppercase; /* Große Buchstaben */
    font-size:0.8rem;
    letter-spacing: 0.5rem;
    text-align:center;
    padding-bottom:8px;
}

.angebot, .ansatz, .ueber-mich, .service-text {
    font-weight: 300; /* Light für Haupttexte */
}


/* Kleine Texte und CSS-Komponenten */
small, .caption {
    font-weight: 400; /* Regular für kleine Texte oder Bildunterschriften */
}


/* Standard Service-Bereich für Desktop */
.service {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem 2rem;
    background-color: #404550; /* Transparenter Hintergrund */
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
}

/* Stile für den Service-Text */
.service-text p {
    font-size: 1rem;
    margin: 0;
    max-width: 80%;
}

.service-text p {
    font-size: 1.2rem;
    line-height: 1.5;
    font-weight:100;
    text-align:left;
}

.service-button {
    text-align: right;
}

.service-button button {
    font-weight: 500; /* Medium für Buttons */
    text-transform: uppercase;
    background-color: #404550;
    color: #fff;
    border: none;
    padding: 0.8rem 1.5rem;
    cursor: pointer;
    font-size: 1rem;
    border:1px solid #818896;
}
a {
    color:#a0beff;
    text-decoration:none;
}
a:hover {
    color:#709dff;
    text-decoration:none;
}

/* Mobile Ansicht: Button unter dem Text */
@media (max-width: 768px) {
    .service {
        flex-direction: column;
        align-items: flex-start;
    }
    /* Stile für den Service-Text */
    .service-text p {
        font-size: 1rem;
        margin: 0;
        max-width: 100%;
        text-align:center;
    }
    .service-text {
        max-width: 100%; /* Text nimmt die volle Breite ein */
        margin-bottom: 1rem; /* Abstand zwischen Text und Button */
        text-align:center;
        max-width:100%;
    }

    .service-button {
        text-align: center; /* Button linksbündig ausrichten */
        width: 100%; /* Button in voller Breite, falls gewünscht */
    }

    .service-button button {
        width: auto; /* Anpassen, um die Breite je nach Bedarf anzupassen */
    }
    h2 {
        font-size: 1.4rem;
    }
    h3 {
        font-size:0.6rem;
    }

}
/* Wichtige Hervorhebungen */
strong, .highlight {
    font-weight: 700; /* Bold für wichtige Highlights */
}

/* Inhaltsbereiche */
.ansatz {
    background-color: #404550;
}

.responsive {
    display:none;
    visibility:hidden;
}
.noresponsive {
    display:block;
    visibility:visible;
}

.contentbox {
    padding: 3rem 2rem;
    margin: 0rem auto;
    max-width: 900px;
    text-align:justify;

}
.footerbox {
    padding: 2rem 2rem 2rem 2rem;
    margin: 0rem auto;
    max-width: 900px;
    text-align:center;
    width:100%;

}

blockquote {
    font-size: 2rem;
    font-style: italic;
    font-weight: 100; /* Light für Haupttexte */
}
/* Tabelle und Überschrift-Formatierung */
.kosten-tabelle {
    width: 60%; /* Setzt die Breite der Tabelle auf 60% des Inhaltsbereichs */
    margin: 1rem auto; /* Zentriert die Tabelle und fügt Abstand zum restlichen Inhalt hinzu */
    border-collapse: collapse; /* Sorgt dafür, dass sich Rahmen nicht überlappen */
    font-family: Arial, sans-serif;
}

.kosten-tabelle table {
    width: 100%; /* Tabelle nimmt die gesamte Breite des Containers ein */
    border:1px solid #818896;
}

.kosten-tabelle th,
.kosten-tabelle td {
    padding: 0.8rem;
    text-align: left;
    border: 0px solid #404550; /* Feiner Rahmen zwischen den Zellen */
}

.kosten-tabelle th {
    background-color: #818896; /* Leichter Hintergrund für Kopfzeilen */
    font-weight: bold;
}

.kosten-tabelle h2 {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}
/* Footer-Bereich */
.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width:100%;
    font-size:0.8rem;
    background-color: #404550;
}

/* Über mich-Bereich */
.ueber-mich {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ueber-mich img {
    height: auto;
    border-radius: 4%;
}
.foto {
    width: 46%;
    margin-right:4%;
    float:left;
    margin-bottom:12rem;
}

.footerbox a {
    line-height:1.6rem;
}

.footer1 {
    text-align:left;float:left;width:33%;margin-bottom:0rem;
}
.footer2 {
    text-align:center;float:left;width:33%;margin-bottom:0rem;
}
.footer3 {
    text-align:right;float:right;width:33%;margin-bottom:0rem;
}

/* Responsive Design */
@media (max-width: 1200px) {

    .hero-content {
        left: 5%; /* Abstand von der linken Seite */
        max-width: 50%; /* Begrenzung auf weniger als die Hälfte der Seite */
        top:15%;
        margin-top:0;
    }

    .hero h1 {
        font-size: 2.4rem;
        letter-spacing: 0px;
        line-height: 1.2; /* Zeilenhöhe für dreizeiligen Text */
    }
}




/* Responsive Design */
@media (max-width: 768px) {

    body {

        hyphens: auto;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;

    }
.kosten-tabelle {
    width: 80%; /* Setzt die Breite der Tabelle auf 60% des Inhaltsbereichs */
    margin: 0 auto; /* Zentriert die Tabelle und fügt Abstand zum restlichen Inhalt hinzu */
    border-collapse: collapse; /* Sorgt dafür, dass sich Rahmen nicht überlappen */
    font-family: Arial, sans-serif;
}
    /* Hero-Bereich */
    .hero {
        background-position: 60% center; /* Verschiebt das Bild nach links */

    }
    .hero-content {
        left: 5%; /* Abstand von der linken Seite */
        max-width: 80%; /* Begrenzung auf weniger als die Hälfte der Seite */
        top:7%;
        margin-top:0;
    }

    .foto {
        width: 70%;
        margin-right:0px;
        clear:both;
        float:none;
        margin: 0 auto 1rem auto;
        display:block;
        margin-bottom:2rem;
    }
    .responsive {
        display:block;
        visibility:visible;
    }
    .noresponsive {
        display:none;
        visibility:hidden;
    }

    .hero h1 {
        font-size: 2.4rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .angebot, .ansatz, .ueber-mich {
        padding: 2rem 0rem;
    }

h2 {
    font-size:1.2rem;
}

    .buttons button {
        padding: 0.6rem 1rem;
    }
blockquote {
        font-size: 1.4rem;
    }

    .footer1 {
        text-align:center;float:none;width:99%;margin-bottom:2rem;
    }
    .footer2 {
        text-align:center;float:none;width:99%;margin-bottom:0rem;
    }
    .footer3 {
        text-align:center;float:none;width:99%;margin-bottom:2rem;
    }

}

/* Responsive Design */
@media (max-width: 650px) {

    .kosten-tabelle {
        width: 96%; /* Setzt die Breite der Tabelle auf 60% des Inhaltsbereichs */
        margin: 0 auto; /* Zentriert die Tabelle und fügt Abstand zum restlichen Inhalt hinzu */
        border-collapse: collapse; /* Sorgt dafür, dass sich Rahmen nicht überlappen */
        font-family: Arial, sans-serif;
    }
    .hero h1 {
        font-size: 1.8rem;
    }
}