@font-face {

    font-family: 'Figtree';

    src: url('./media/Figtree-VariableFont_wght.ttf');

}



body {

    font-family: Figtree;

    margin: 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    align-items: center;



    background-image: url("media/unnamed.jpg");

    background-size: contain;

    background-position: center center;

    background-attachment: local;

}



.wrapper {

    max-width: 1200px;

    margin: 0 auto;

    background-color: white;

    padding-top: 40px;

    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);

}



nav {

    position: fixed;

    width: 100%;

    padding: 20px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    box-sizing: border-box;

    background-color: white;

    z-index: 5;

}



nav .logo {

    font-size: 1.2em;

    font-weight: bold;

}



nav ul {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    align-items: center;

}



nav li {

    margin-left: 20px;

}



nav a {

    text-decoration: none;

    color: black;

    font-size: 1.2em; /* vroher 1,2 em */

}



nav li:last-child a {

    background-color: #A02858;

    color: white;

    padding: 10px 15px;

    border-radius: 5px;

}





nav .user-info {

    /* display: flex; hat die größe der nav verändert */

    align-items: center;

    justify-content: flex-end;

}



nav .user-info span {

    margin-right: 10px;

    font-size: 1.2em;

    color: black;

}



nav .user-info button {

    padding: 8px 15px;

    font-size: 14px;

    background-color: #A02858;

    color: white;

    border: none;

    border-radius: 5px;

    cursor: pointer;

}



.hero {

    text-align: left;

    padding: 50px;

    padding-left: 90px;

    padding-right: 90px;

    max-width: 800px;

    width: 100%;

    box-sizing: border-box;

}



.hero h1 {

    font-size: 3em;

    margin-bottom: 20px;

}



.hero h2 {

    font-size: 3em;

    margin-bottom: 20px;

}



.hero h3 {

    font-size: 3em;

    margin-bottom: 20px;

}



.hero p {

    font-size: 1.2em;

    line-height: 1.6;

    margin-bottom: 15px;

}



.hero button {

    font-family: Figtree;

    background-color: #A02858;

    color: white;

    border: none;

    padding: 15px 30px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 1em;

    cursor: pointer;

}



.hero input {

    width: 100%;

    max-width: 400px;

    padding: 10px;

    margin-bottom: 10px;

    font-size: 16px;

    border: 2px solid #0077cc; /* Blaue Umrandung */

    border-radius: 5px;

    outline: none;

    transition: all 0.3s ease-in-out;

}



.hero input:focus {

    border-color: #0055aa; /* Dunklere Farbe beim Fokus */

    box-shadow: 0 0 5px rgba(0, 85, 170, 0.5);

}



.hero .achievement table {

    border-collapse: collapse;

}

.hero .achievement td {

    border: none;

    padding: 10px;

    text-align: left;

    color: black;

}

.hero .achievement .left-column {

    width: 64px;


}

.hero .achievement .right-column {

    border-radius: 15px;

    background-color: grey;

}



footer {


    padding: 20px;

    padding-bottom: 5px;

    width: 100%;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    align-items: baseline;

    background-color: white;

    /*position:sticky;

    bottom: 0; */

}



footer table {

    width: 100%;

    margin: 0 auto;

    border-collapse: collapse;

}



footer table td {

    padding: 10px;

    vertical-align: top;

    text-align: left;

}



footer .footer-logo {

    padding-top: 20px;

    padding-left: 20px;

    margin-bottom: 0; /* 10px */

    text-align: center;

}



footer a {

    text-decoration: none;

    color: black;

    font-size: 1.2em;

}



.medaille {

    width: 64px;

    height: 64px;

    margin-right: 20px;

    position: relative;

    z-index: 1;

}



.lock {

    width: 40px;

    height: 40px;

    position: absolute;

    z-index: 2;

    margin-left: 12px;

    margin-right: 32px;

}

.achievement-list {

    display: flex;

    flex-direction: column;

    gap: 20px;

}



.achievement {

    display: flex;

    align-items: center;

    padding: 15px;

    border-radius: 15px;

    background-color: lightgrey;

}

.category-list {

    display: flex;

    flex-direction: column;

    gap: 20px;

}



.category {

    display: flex;

    align-items: flex-start; /*center*/

    padding: 15px;

    border-radius: 15px;

    background-color: grey;

    flex-direction: column;

}



.category .icon {

    font-size: 1.5em; /*2*/

    margin-right: 15px;

}



.geography {

    background-color: #4CAF50;

}



.math {

    background-color: #2196F3;

}



.spelling {

    background-color: #FFC107;

}



.BWL {

    background-color: red;

}



.it {

    background-color: blueviolet;

}



.quiz {

    background-color: blue;

}



.container {

    display: flex;

    flex-wrap: wrap; /* Blöcke umbrechen, wenn kein Platz mehr ist */

    gap: 10px;

}



.box {

    width: calc(50% - 25px); /* 50% Breite minus halber Abstand */

    padding: 10px;

    border-radius: 5px;

}

.linkdesign {

    display: block;

    text-decoration: none;

    color: black;

}





.progress-container {

    width: 100%;

    height: 20px;

    background-color: white; /* Hintergrund */

    border-radius: 10px;

    overflow: hidden; /* Für abgerundete Ecken */

}



.progress-bar {

    height: 100%;

    background-color: black; /* Fortschritt-Farbe */

    width: 0; /* Wird dynamisch aktualisiert */

    transition: width 0.5s ease-in-out; /* Sanfte Animation */

}



.flashcard-container {

    perspective: 1000px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 20px;

}



.flashcard {

    width: 300px;

    height: 400px;

    position: relative;

    transform-style: preserve-3d;

    cursor: pointer;

}



/* Schatten-element */

.flashcard::before {

    content: '';

    position: absolute;

    top: 105%;

    left: 50%;

    width: 90%;

    height: 10px; /* Größe vom Schatten */

    background: rgba(0, 0, 0, 0.6);

    filter: blur(10px);

    z-index: -1;

    transform-origin: top center;

    transform: translateX(-50%) rotateY(0deg);

    transition: transform 0.6s, opacity 0.6s;

    opacity: 1;

    border-radius: 10px;

}





.flashcard-inner {

    position: relative;

    width: 100%;

    height: 100%;

    text-align: center;

    border-radius: 10px;

    overflow: hidden;

    transform-style: preserve-3d;

}



.flashcard-front,

.flashcard-back {

    position: absolute;

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    padding: 20px;

    box-sizing: border-box;

    backface-visibility: hidden;

    transition: transform 0.6s;

    border-radius: 10px;

}



.flashcard-front {

    background-color: #f1f1f1;

    color: #000;

    transform: rotateY(0deg);

}



.flashcard-back {

    background-color: #183769;

    color: white;

    transform: rotateY(180deg);

}



.flashcard.flipped .flashcard-front {

    transform: rotateY(180deg);

}



.flashcard.flipped .flashcard-back {

    transform: rotateY(360deg);

}



.flashcard.flipped::before {

    transform: translateX(-50%) rotateY(180deg);

    opacity: 0.6;

}





.next-card-button {

    padding: 10px 20px;

    font-size: 1em;

    cursor: pointer;

    background-color: #A02858;

    color: white;

    border: none;

    border-radius: 5px;

    margin-top: 50px;

}