:root {
    --color-bg-1: #f7f4f4;
    --color-bg-2: #eeedee;
    --color-accent-1: #592da0;
    --color-accent-2: #b026bc;
    --hover-color: #e1cf49;
    --color-text-header-standard: #151515;
    --color-text-standard: #363636;
}

@font-face {
    font-family: 'Barlow Semi Condensed';
    src: url(/fonts/BarlowSemiCondensed-Regular.ttf) format('truetype');
    font-weight: 400;
    font-style: normal;
}

.wrapper_about {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    gap: 50px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 1200px;
}

#profilbild {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: solid 4px var(--color-accent-2);
}

@media (min-width: 700px) {
    #profilbild {
        width: 300px;
        height: 300px;
    }
}

#warum {
    position: relative;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Barlow Semi Condensed", sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    scroll-behavior: smooth;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

/**Global Styles**/
a {
    text-decoration: none;
    color: inherit;
}

/**Body**/

body {
    color: rgb(234, 234, 234);
    width: 100%;
    height: 100vh;
    background-color: var(--color-bg-1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 50px 20px;
    width: 100%;
}

/**Liste**/


li {
    list-style: none;
    padding: 10px 20px;
    border-radius: 4px;
}

.liste_ps {
    display: flex;
    flex-direction: row;
}

/**Section Box**/
.section_light {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    width: 100%;
}


/**Button**/

.btn_dark {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border: solid 2px var(--accent-color);
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn_light {
    background-color: var(--accent-color);
    color: var(--primary-color);
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

section {
    scroll-margin-top: 60px;
}

.price {
    font-size: 2rem;
    font-weight: bold;
    background: linear-gradient(90deg, var(--color-accent-1), var(--color-accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 auto;
    margin-top: 16px;
    margin-bottom: 16px;

}


.card_wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin: 20px auto;
}

.btn {
    padding: 15px 20px;
    text-align: center;
}

.wrapper_btn {
    margin: 20px 0 40px 0;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}
.contact {
    color: var(--color-accent-1);
}

.contact:hover {
    color: var(--hover-color);
}

.section_header {
    padding: 50px auto;
}

.deko {
    width: 100%;
    height: 800px;
    background: linear-gradient(45deg, var(--color-bg-1), var(--color-bg-2));
    z-index: -9999;
    position: absolute;
    clip-path: polygon(
        0% 0%, 
        100% 20%, 
        100% 100%, 
        0% 80%
        );
}

.card {
    position: relative;
}

.card_bubble_yellow, .card_bubble_purple, .card_bubble_blue {
    font-size: 1.6rem;
    display: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex; 
    justify-content: center;
    align-items: center;
}

.lighter {
    background-color: var(--color-bg-2);
}

.card_bubble_yellow {
    background-color: #ef9292;;
}

.card_bubble_purple {
    background-color: #8fb4eb;;
}

.card_bubble_blue {
    background-color: #c0e081;;
}

.bg-color {
    background: linear-gradient(45deg, var(--color-accent-1), var(--color-accent-2));
}

.font-white {
    color: var(--color-bg-1);
}

.card-special {
    background: linear-gradient(90deg, var(--color-accent-1), var(--color-accent-2));
    border-radius: 25px;
    position: absolute;
    top: -15px;
    left: 70px;
    color: #ffffff;
    width: 150px;
    display: flex;
    justify-content: center;
    gap: 10px;

}

.pfeil {
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

footer {
    margin-top: 50px;
    padding: 20px;
    background: linear-gradient(90deg, var(--color-accent-1), var(--color-accent-2));
    color: var(--color-bg-1);
    width: 100%;
    text-align: center;
    position: relative;
    bottom: 0;
}

/**Logo**/

.logo {
    display: flex;
    align-items: center;
}

.headerText {
    margin-left: 10px;
}

.spruch-hell {
    margin: 20px;
    font-size: 0.8rem;
    background-image: linear-gradient(90deg, var(--color-accent-1), var(--color-accent-2));
    border-radius: 20px;
    display: flex;
    align-items: center;
    color: #ffffff;

}

.spruch {
    padding: 8px 20px;
}

.spruch img {
    margin-right: 5px;
}


/**Navigation**/

/* Grundzustand: Die Menüleiste ist unsichtbar und nach oben verschoben */
.nav-links {
    display: none; /* Oder nutze opacity: 0 für Animationen */
    list-style: none;
    padding: 0;
    margin: 10px 0;
    background-color: #f4f4f4; /* Beispielfarbe */
    border: 1px solid #ccc;
}

.skill_header {
    color: var(--color-text-header-standard);
    font-weight: bold;
    margin: 20px 20px 16px 20px;
}

/* Wenn die Checkbox aktiviert ist, zeige die Liste an */
#menu-toggle:checked ~ .nav-links {
    display: block;
    width: 100%;
}


/* Optional: Ein bisschen Styling für die Links */
.nav-links li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.nav-links li a {
    text-decoration: none;
    color: #333;
}

/* Cursor-Pointer für das Icon, damit man sieht, dass es klickbar ist */
.menu_icon_trigger {
    cursor: pointer;
    display: inline-block;
}

.menu_icon_trigger:hover .menu_icon {
    transform: scale(1.2);
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    width: 100%;
    position: fixed;
    background-color: rgba(255, 255, 255, 0.918);
    backdrop-filter: blur(5px);
    z-index: 9999;
}   

.nav-links {
    display: none;
}

.hero {
    position: relative;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-image: linear-gradient(rgba(255, 255, 255, 0.6)),url("/img/img_hero_banner.jpg");
    background-attachment: fixed;
    margin-top: 40px;
    padding-top: 100px;
    overflow: hidden;
    z-index: 1;

}

@media (max-width: 700px) {
    .hero {
        background-image: none;
    }   
}

.hero_header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 3rem;
    font-weight: bold;
    color: var(--primary-color);
}

.hero_name {
    color: var(--accent-color);
    font-size: 3.5rem;

}

.hero_text {
    max-width: 600px;
    margin: 20px auto;
}

.light {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    width: 100%;
}

/* Der Container, der das Icon und das Menü hält, 
   muss relativ sein, damit "absolute" darin funktioniert */
header, .nav-container { 
    position: relative; 
}

.nav-links {
    visibility: hidden;
    list-style: none;
    transition: opacity 0.3s ease;
    padding: 10px;
    margin: 0;
    background-color: white;
    border: 1px solid #ddd;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.1);

    /* --- DER WICHTIGE TEIL --- */
    position: absolute;  /* Schwebt über dem Content */
    top: 60px;           /* Abstand zum oberen Rand (an dein Icon anpassen) */
    right: 0;             /* Oder right: 0; je nach Design */
    z-index: 1000;       /* Sorgt dafür, dass es ÜBER allem anderen liegt */
    width: 200px;        /* Feste Breite, damit es nicht die ganze Zeile füllt */
}

/* Einblenden bei Klick */
#menu-toggle:checked ~ .nav-links {
    opacity: 1;
    visibility: visible;
}

/* Verhindert das Verschieben der Menüpunkte selbst */
.nav-links li {
    display: block;
    padding: 8px 12px;
}

.link-clr {
    color: var(--color-accent-1);
}

.link-clr:hover {
    color: var(--hover-color);
}

.button-n {
    border-radius: 25px;
    min-width: auto;
    padding: 10px 20px;
    box-shadow: 0 4px 8px rgba(19, 19, 19, 0.712);
}

.button-portfolio {
    background-color: var(--color-bg-1);
    border: solid 3px var(--color-accent-2);
    color: var(--color-accent-2);
}

.button-paket {
    background: linear-gradient(90deg, var(--color-accent-1), var(--color-accent-2));
    color: var(--color-bg-1);
}

/** Kontaktformular**/

.kontakt {
    margin-top: 100px;
}

.formular {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-width: 400px;
}

.section_first {
    margin-top: 50px;
}

.formular input, .formular textarea {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
}

input[type="submit"] {
    background-color: var(--accent-color);
    color: var(--primary-color);
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

input[type="submit"]:hover {
    background-color: var(--hover-color);
}

/** Karten **/
.card {
    position: relative;
    background-color: white;
    color: var(--color-text-standard);
    border-radius: 14px;
    border: solid 4px var(--accent-color);
    padding: 25px;
    margin: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    width: 300px;
    min-height: 300px;
}

.card_me {
    position: relative;
    background-color: white;
    color: var(--color-text-standard);
    border-radius: 14px;
    border: solid 4px var(--accent-color);
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    width: 300px;
    min-height: min-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.price_light, h4 {
    color: var(--color-bg-1);
}

.card_dark {
    background: linear-gradient(30deg, var(--color-accent-1), var(--color-accent-2));
    color: var(--color-bg-1);
}



.card:hover {
    transform: translateY(-10px);
    transform: rotateX(20px);
    box-shadow: 1px 1px 8px 4px var(--color-accent-1);
    transition: all 0.3s ease;
}

.impressum h2 {
    width: 100%;
}

.impressum p {
    font-size: 1.2rem;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 600px;
}

.impressum {
    margin-top: 100px;
    padding: 10px;
}

.footer_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.login-button {
    color:#af26bc00;
}

@media (max-width: 700px) {
    .footer_container {
        flex-direction: column;
        gap: 5px;
    }

    .discl_container {
        margin-top: 10px;
        gap: 5px;
        display: flex;
        flex-direction: column;
    }
    .discl_container span {
        font-size: 0.9rem;
    }
}