body {
    font-family: Arial, sans-serif;
    margin: 2em;
}

h1, h2 {
    color: #333;
}

form label {
    display: block;
    margin-top: 10px;
}

form label {
    display: block;
    margin-top: 10px;
}

input[type="text"], input[type="url"], input[type="date"] {
    width: 399px;
    align-content: right;
    padding: 5px;
    background-blend-mode: multiply;
    background-image: linear-gradient(
			                               270deg,
			                               hsl(144deg 89% 79%) 0%,
			                               hsl(152deg 90% 83%) 0%,
			                               hsl(159deg 88% 88%) 3%,
			                               hsl(164deg 74% 93%) 11%,
			                               hsl(164deg 74% 93%) 89%,
			                               hsl(159deg 88% 88%) 97%,
			                               hsl(152deg 90% 83%) 100%,
			                               hsl(144deg 89% 79%) 100%
                                     ),
                      linear-gradient(
                                        180deg,
                                        hsl(144deg 89% 79%) 0%,
                                        hsl(152deg 90% 83%) 0%,
                                        hsl(159deg 88% 88%) 3%,
                                        hsl(164deg 74% 93%) 11%,
                                        hsl(164deg 74% 93%) 89%,
                                        hsl(159deg 88% 88%) 97%,
                                        hsl(152deg 90% 83%) 100%,
                                        hsl(144deg 89% 79%) 100%
                                      );
}

textarea {
    width: 399px;
    height: 200px;
    padding: 5px;
    background-blend-mode: multiply;
    background-image: linear-gradient(
                                        270deg,
                                        hsl(144deg 89% 79%) 0%,
                                        hsl(152deg 90% 83%) 0%,
                                        hsl(159deg 88% 88%) 3%,
                                        hsl(164deg 74% 93%) 11%,
                                        hsl(164deg 74% 93%) 89%,
                                        hsl(159deg 88% 88%) 97%,
                                        hsl(152deg 90% 83%) 100%,
                                        hsl(144deg 89% 79%) 100%
                                      ),
                                      linear-gradient(
                                        180deg,
                                        hsl(144deg 89% 79%) 0%,
                                        hsl(152deg 90% 83%) 0%,
                                        hsl(159deg 88% 88%) 3%,
                                        hsl(164deg 74% 93%) 11%,
                                        hsl(164deg 74% 93%) 89%,
                                        hsl(159deg 88% 88%) 97%,
                                        hsl(152deg 90% 83%) 100%,
                                        hsl(144deg 89% 79%) 100%
                                      );
}

table {
    border: 2px solid rgb(231, 231, 210);
    border-collapse: collapse;
    background-blend-mode: multiply;
    background-image: linear-gradient(
                                        270deg,
                                        hsl(144deg 89% 79%) 0%,
                                        hsl(152deg 90% 83%) 0%,
                                        hsl(159deg 88% 88%) 3%,
                                        hsl(164deg 74% 93%) 11%,
                                        hsl(164deg 74% 93%) 89%,
                                        hsl(159deg 88% 88%) 97%,
                                        hsl(152deg 90% 83%) 100%,
                                        hsl(144deg 89% 79%) 100%
                                      ),
                                      linear-gradient(
                                        180deg,
                                        hsl(144deg 89% 79%) 0%,
                                        hsl(152deg 90% 83%) 0%,
                                        hsl(159deg 88% 88%) 3%,
                                        hsl(164deg 74% 93%) 11%,
                                        hsl(164deg 74% 93%) 89%,
                                        hsl(159deg 88% 88%) 97%,
                                        hsl(152deg 90% 83%) 100%,
                                        hsl(144deg 89% 79%) 100%
                                      );
    margin: 20px;
}

th, td {
    border-radius: 15px;
    background-blend-mode: multiply;
    background-image: linear-gradient(
                                        270deg,
                                        hsl(144deg 89% 79%) 0%,
                                        hsl(152deg 90% 83%) 0%,
                                        hsl(159deg 88% 88%) 3%,
                                        hsl(164deg 74% 93%) 11%,
                                        hsl(164deg 74% 93%) 89%,
                                        hsl(159deg 88% 88%) 97%,
                                        hsl(152deg 90% 83%) 100%,
                                        hsl(144deg 89% 79%) 100%
                                      ),
                                      linear-gradient(
                                        180deg,
                                        hsl(144deg 89% 79%) 0%,
                                        hsl(152deg 90% 83%) 0%,
                                        hsl(159deg 88% 88%) 3%,
                                        hsl(164deg 74% 93%) 11%,
                                        hsl(164deg 74% 93%) 89%,
                                        hsl(159deg 88% 88%) 97%,
                                        hsl(152deg 90% 83%) 100%,
                                        hsl(144deg 89% 79%) 100%
                                      );
    padding: 10px;
    width: 20px;
    border: 2px solid rgb(231, 231, 210);
}

.container {
    padding-right: 10px;
    border-radius: 25px;
    margin-left: 5px;
    margin-right: 20px;
    width: 420px;
    text-align: right;
    display: grid, flex;
}

.container-outer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 20px;
}

.container-a, .container-t {
    padding: 20px;
    border-radius: 25px;
    background-color: #ffffffcc;
    border: 3px solid rgb(231, 231, 210);
}


.item-b {
    border-radius: 25px;
    margin-left: 20px;
    width: 440px;
    height: 190px;
    text-align: left;
    display: inline-block;
}

.item-s {
    border-radius: 25px;
    margin-left: 20px;
    width: 440px;
    height: 30px;
    text-align: left;
    display: inline-block;
}

.item-u {
    border-radius: 25px;
    margin-top: 10px;
    margin-left: 20px;
    width: auto;
    height: 30px;
    text-align: left;
    font-size: 16;
}

.item-t {
    border-radius: 25px;
    margin: 20px;
    width: auto;
    height: auto;
    text-align: left;
    display: inline-block;
}

.vl {
    background-blend-mode: overlay;
    box-shadow: 0 0 10px rgba(0, 255, 128, 0.8),
                0 0 20px rgba(0, 255, 128, 0.6),
                0 0 30px rgba(0, 255, 128, 0.4);
    width: 4px;
    background: linear-gradient(
                                    to right,
                                    rgba(0, 255, 128, 0) 0%,
                                    rgba(0, 255, 128, 0.5) 40%,
                                    rgba(0, 255, 128, 1) 50%,
                                    rgba(0, 255, 128, 0.5) 60%,
                                    rgba(0, 255, 128, 0) 100%
                                    );
     
    height: auto;
    display: grid, flex;

}
.questboard {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}

.quest-card {
    padding: 15px;
    border-radius: 20px;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

.quest-card:hover {
    transform: scale(1.02);
}

/* Farbvarianten nach Status */
.status-verfügbar {
    background-color: #d9fdd3;
    border-left: 8px solid #4caf50;
}

.status-in-bearbeitung {
    background-color: #fff9c4;
    border-left: 8px solid #fbc02d;
}

.status-beantwortet {
    background-color: #e0e0e0;
    border-left: 8px solid #616161;
}

.status-form {
    margin-top: 10px;
}

.status-form select,
.status-form input[type="submit"] {
    margin-right: 5px;
}