@import url('https://fonts.googleapis.com/css2?family=Chivo:wght@400;700&display=swap');

/* Basis-Stile für HTML und Body */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Chivo', sans-serif;
    margin: 0;
    padding: 0;
    background-color: rgb(148, 153, 153);
}
.viewport-marker {
    position: fixed;
    top: 0;
    height: 100%;
    width: 0;
    border-left: 2px dashed red;
    z-index: 9999;
    pointer-events: none;
}

.viewport-marker.left {
    left: 10vw;
}

.viewport-marker.right {
    left: 90vw;
}


.hero {
    position: relative;
    background-image: url('../images/preventics_schreibtisch.avif');
    background-size: cover;
    /*background-attachment: fixed;         für Parallax */
    background-position: center;
    height: 150vh;
    width: 100%;
    margin-top: 12vh;
    /*margin-top: 170px;*/
    /*border: 5px solid #36FF36;*/
}

.hero::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20vh; /* vorher 20%, jetzt mehr Überblendfläche */
    background: linear-gradient(to bottom,
    rgba(148, 153, 153, 0) 0%,
    rgba(148, 153, 153, 0.9) 90%,
    rgb(148, 153, 153) 100%);
    pointer-events: none;
    z-index: 1;

}


main {
    margin-top: 15vh;
    position: relative;
    background-color: rgb(148, 153, 153);
    /*border: 3px solid red;*/
}
/*.main-blend-top {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: 60px; !* Übergangshöhe *!*/
/*    background: linear-gradient(to bottom,*/
/*        rgb(148, 153, 153) 0%,*/
/*        rgba(148, 153, 153, 0.9) 40%,*/
/*        rgba(148, 153, 153, 0) 100%);*/
/*    z-index: 2;*/
/*    pointer-events: none;*/
/*}*/


.dotted-wrapper {
    position: relative;
    overflow: hidden;
}

.dotted-background {
    position: absolute;
    top: 200vh;
    left: -100vw;
    width: 1350vw;
    height: 100%;
    background-image: radial-gradient(#2AFF00 3%, transparent 8%);
    background-size: 70px 70px;
    rotate: 10deg;
    z-index: 0;
    pointer-events: none;

    /* Weiche Darstellung */
    filter: blur(2px) brightness(0.7);

    /* Sichtbarkeit von oben nach unten */
    mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
}



/* dein eigentlicher Inhalt soll über dem Background liegen */
.dotted-wrapper > *:not(.dotted-background) {
    position: relative;
    z-index: 1;
}


/* Karten-Grid */
.card-grid {
    position: relative;
    z-index: 1;
    margin-top: 10vh;
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Spalten */
    grid-template-rows: repeat(3, auto);    /* 3 Zeilen */
    gap: 1vw;
    padding: 0 10vw;
    margin-bottom: 20vh;
    background-color: transparent;
}

.mobile-only {
    display: none;
}
.desktop-only {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1vw;
    padding: 0 10vw;
    margin-bottom: 20vh;
}

/* Freier Text  */
.freetext {
    margin-top: 170px;
    margin-bottom: 1vh;
    margin-left: 10vw;
    margin-right: 10vw;
    font-family: 'Chivo', sans-serif;
    color: #fff;
}

.freetext h1{
    font-size: 4.5rem;
    letter-spacing: -2px;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

/* Karten */
.card {
    perspective: 1500px; /* Ermöglicht den 3D-Effekt */
    /* Da wir den Flip über die .card-inner steuern,
       werden hier keine weiteren 3D-Styles benötigt */
}

/* ---------- Allgemeine Kartenstruktur ---------- */
.card-inner {
    will-change: transform;
    position: relative;
    width: 90%;
    height: 65vh;
    padding: 5%;
    background-size: cover;
    background-position: center;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
    transform-style: preserve-3d;
    -webkit-transition: transform 0.8s ease;
    transition: transform 0.8s  ease;
    cursor: pointer;
}

.card:hover .card-front,
.card:hover .card-back {
    box-shadow: inset 0 -250px 200px -100px rgba(0, 0, 0, 0.3);
}


.card.is-flipped .card-inner {
    transform: rotateY(180deg) translate3d(0, 0, 0);
}
/*
.card,
.card-inner,
.card-front,
.card-back {
    overflow: hidden;
}

*/

.card, .card-front, .card-back {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}
/*
.card-inner {
    -moz-transform-style: preserve-3d;
    -moz-transform: rotateY(180deg);
}

.card-front, .card-back {
    -moz-backface-visibility: hidden;
}*/


.card-front,
.card-back {
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    
}

.card-front {
    overflow: hidden;
    z-index: 2;
    backface-visibility: hidden;
}

.card-back {
    z-index: 1;
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    text-align: justify;
    font-size: 1.0vw;
    padding: 20px;
    line-height: 1.4;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /*background-color: rgba(0, 0, 0, 1);*/
    
}

.card-back-content {
    padding: 30px;
    backface-visibility: hidden;
}

/* ---------- Titel, Text & Pfeile ---------- */
.card-title {
    position: absolute;
    top: 10px;
    left: 10px;
    margin: 20px;
    font-weight: bold;
    font-size: 2vw;
    letter-spacing: -3px;
}

.card-text {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 2vw;
    margin: 20px;
    text-align: right;
    
}

.card-arrow-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 20px;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    scale: 1.5;
}
/* Wackel-Animation bei Hover */
/* Wackel-Animation bei Hover je nach Richtung */
.card:hover .arrow-front {
    animation: arrow-wiggle-front 0.8s ease-in-out;
}

.card:hover .arrow-back {
    animation: arrow-wiggle-back 0.8s ease-in-out;
}

@keyframes arrow-wiggle-front {
    0% { transform: rotate(45deg) scale(1); }
    25% { transform: rotate(35deg) scale(1.1); }
    50% { transform: rotate(55deg) scale(1.1); }
    75% { transform: rotate(40deg) scale(1.05); }
    100% { transform: rotate(45deg) scale(1); }
}

@keyframes arrow-wiggle-back {
    0% { transform: rotate(-135deg) scale(1); }
    25% { transform: rotate(-145deg) scale(1.1); }
    50% { transform: rotate(-125deg) scale(1.1); }
    75% { transform: rotate(-140deg) scale(1.05); }
    100% { transform: rotate(-135deg) scale(1); }
}

.arrow-front {
    transform: rotate(45deg);
}

.arrow-back {
    transform: rotate(-135deg);
}

.arrow-green {
    background-image: url("data:image/svg+xml;charset=UTF-8,<svg fill='%232AFF00' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z'/></svg>");
}

.arrow-white {
    background-image: url("data:image/svg+xml;charset=UTF-8,<svg fill='%23FFFFFF' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z'/></svg>");
}

.arrow-black {
    background-image: url("data:image/svg+xml;charset=UTF-8,<svg fill='%23000000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z'/></svg>");
}

/* ---------- Textfarben ---------- */
.title-white { color: #fff; }
.title-black { color: #000; }
.title-green { color: #2AFF00; }

.text-white { color: #fff; }
.text-black { color: #000; }
.text-green { color: #2AFF00; }

/* ---------- Beispiel-Hintergründe ---------- */
.card-front-theme1 { background-color: #000; }
.card-back-theme1  { background-color: #808080; }
.card-front-theme2 { background-color: #2AFF00; }
.card-back-theme2  { background-color: #88d279; }
.card-front-theme3 { background-color: white; }
.card-back-theme3  { background-color: #dedede; }
/* weitere Theme-Klassen können bei Bedarf ergänzt werden */
.card1-image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    transform: translate(-75%, -20%) scale(1.2);
    opacity: 0.4;
    filter: brightness(50%);
    transition: transform 1s ease, opacity 1s ease, filter 1s ease;
    z-index: 1;
    rotate: -15deg;
    scale: 1.2;

}

/* Aktivierter Zustand */
.card1-image.animate {
    transform: translate(-75%, -20%) scale(1.2);
    opacity: 1;
    filter: brightness(100%);
}
.card6-image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    transform: translate(-55%, -20%) scale(2);
    opacity: 1;
    filter: brightness(50%);
    transition: transform 1s ease, opacity 1s ease, filter 1s ease;
    z-index: 1;
    rotate: 10deg;

}







.kontakt-cta {
    display: flex;
    box-sizing: border-box;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    margin-left: 10vw;
    margin-bottom: 10vh;
    gap: 10vw;
    padding: 40px;
    border: solid #2AFF00;
    background-color: #2AFF00;
    color: black;
    font-family: 'Chivo', sans-serif;
    max-width: 80vw;
}

/* Überschrift links */
.kontakt-cta h1 {
    font-size: 4vw;
    flex: 1;
    /*margin-right: 10vw;*/
    letter-spacing: -5px;
}

.cta-heading-with-arrow {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.cta-arrow {
    fill: black;
    margin-top: 10px;
    rotate: 90deg;
    scale: 2;
    margin-top: -50px;
    padding-left: 40px;
}


/* Formular rechts */
.kontakt-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 0;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-field {
    display: flex;
    flex-direction: column;
}
.form-field label{
    font-size: 1.0vw;
}

.kontakt-form input {
    padding: 20px;
    font-size: 1.0vw;
    border: 2px solid #000;
    font-family: inherit;
    background-color: #000;
    color: white;
}
.kontakt-form textarea {
    resize: none;
    padding: 20px;
    font-size: 1.0vw;
    border: 2px solid #000;
    font-family: inherit;
    background-color: #000;
    color: white;
    height: 15vh;
}

.kontakt-form input::placeholder,
.kontakt-form textarea::placeholder {
    color: #a9a9a9;
}

.kontakt-form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-color: #000;
    color: #fff;
    font-size: 1.0vw;
    padding: 20px;
    border: 2px solid #000;
    font-family: inherit;
    cursor: pointer;
    border-radius: 0;

    background-image: url('data:image/svg+xml;charset=UTF-8,<svg fill="%23fff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-position: right 10px center;
    background-size: 1.2em;
    background-repeat: no-repeat;
    padding-right: 40px; /* Platz für den Pfeil */
}
.kontakt-form select:invalid {
    color: #a9a9a9;
}

.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.2vw;
    user-select: none;
}

/* Checkbox-Reset + Styling */
.checkbox-wrapper input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    width: 2px;
    height: 2px;
    background-color: #000;
    border: 2px solid black;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
}

/* Haken-Stil */
.checkbox-wrapper input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 10px;
    width: 15px;
    height: 30px;
    border: solid #2AFF00;
    border-width: 0 5px 5px 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Haken aktivieren */
.checkbox-wrapper input[type="checkbox"]:checked::after {
    opacity: 1;
}

.btn-to-contact {
    padding: 15px 30px;
    background-color: transparent;
    border: 3px solid #000;
    font-size: 1.5vw;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-to-contact:hover {
    background-color: #000;
    color: #fff;
}
    .success-message, .error-message {
      margin-top: 10px;
      font-weight: bold;
    }
    .success-message { color: #007a1f; }
    .error-message { color: #c00; }



/*.open-letter {*/
/*    position: relative;*/
/*    background-image: url("images/paper texture by freeject.net 3.jpg");*/
/*    text-align: justify;*/
/*    !*left: 10vw;*!*/
/*    width: 100vw;*/
/*    !*margin-bottom: 10vh;*!*/
/*    padding: 10vh 0;*/
/*    z-index: 1;*/
/*    overflow: hidden;*/
/*}*/
.open-letter {
    position: relative;
    height: auto;
    max-width: 50vw;
    background-image: url("../images/paper texture by freeject.net.avif");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin: 10vh auto 10vh auto; /* oben 10vh, zentriert */
    padding: 5vh 5vw 20vh 5vw; /* unten 10vh Platz für Textabstand */
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.open-letter h1{
    font-size: 1.5vw;
}
.open-letter p{
    text-align: justify;
    /*width: 50vw;*/
    font-size: 1vw;
    margin-bottom: -10vh;
    line-height: 1.5;
}
.letter-signature {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.signature-image {
    max-width: 120px;
    height: auto;
    margin-top: -3vh;
    filter: brightness(0%) saturate(100%) invert(0);
}

.signature-name {
    font-size: 1.5vw;
    font-weight: bold;
    margin-top: -10vh;
}

.signature-position {
    font-size: 1.2vw;
    color: #333;
    margin-top: 10vh;
}




/*.referenz-und-3d {*/
/*    display: flex;*/
/*    flex-direction: row;*/
/*    align-items: center;*/
/*    justify-content: flex-start;*/
/*    gap: 5vw;*/
/*}*/

/*.projekt-referenz{*/
/*    !*margin-top: 10vh;*!*/
/*    margin-left: 10vw;*/
/*    margin-bottom: 30vh;*/
/*    display: inline-block;*/
/*    padding: 20px;*/
/*    border: solid #2AFF00;*/
/*    background-color: #2AFF00;*/
/*}*/
/*.projekt-referenz h1{*/
/*    font-size: 4vw;*/
/*}*/

/*.btn-to-projects{*/
/*    width: 30vw;*/
/*    padding: 30px 30px;*/
/*    border: 5px solid #000000;*/
/*    background-color: transparent;*/
/*    font-size: 4vh;*/
/*    font-weight: bold;*/
/*    transition: background-color 0.5s ease;*/
/*}*/
/*.btn-to-projects:hover{*/
/*    background-color: #000;*/
/*    color: #2AFF00;*/
/*}*/

/*#viewer3d {*/
/*    width: 400px;*/
/*    height: 400px;*/
/*    scale: 2.5;*/
/*    !*border: 5px solid #000000;*!*/
/*    background-color: transparent;*/
/*}*/



/* Navigation für mittlere Desktop-Bildschirme */
@media (min-width: 1201px) and (max-width: 1900px) {
    .navbar {
        flex: 1;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, auto);
        row-gap: 25px;
        column-gap: 3vw;
        text-align: center;
        align-items: center;
        justify-items: center;
        font-size: large;
        padding: 0 5vw;
    }
    .navbar a {
        color: #2AFF00;
        text-decoration: none;
    }
    .menu-toggle {
        display: none;
    }
}

/* Navigation für kleine Desktop-Bildschirme */
@media (min-width: 769px) and (max-width: 1200px) {
    .navbar {
        display: none;
    }
    .navbar a {
        color: #2AFF00;
        text-decoration: none;
    }
    .kontakt-box {
        display: none;
    }
    .menu-toggle {
        display: block;
        background-color: #2AFF00;
        padding: 20px 35px;
        color: black;
        text-decoration: none;
        font-weight: 600;
        font-size: 14pt;
        border: none;
    }
}