/*
 * ==========================================================
 * Hauptstylesheet
 * ==========================================================
 *
 * Struktur:
 *
 * 1. Reset & Basis
 * 2. Layout
 * 3. Globale Komponenten
 * 4. Seitenspezifische Komponenten
 * 5. Responsive Design
 *
 * Hinweise:
 * - Globale Regeln stehen vor seitenspezifischen Regeln.
 * - Seitenspezifische Styles werden häufig, aber nicht in allen Fällen
 *   über die body-Klasse eingeschränkt.
 * - Media Queries befinden sich am Ende der Datei.
 *
 * ==========================================================
 */

/* =========================================================
   1. RESET & BASIS
   ========================================================= */

/* Reset */

body {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: 'PT Sans', serif;
}

/* html / body */

body.common-background {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%
}

body.page-cart {
    background-image: url("../img/privacy.jpg");
}

body.page-categories {
    background-attachment: fixed;
    background-image: url('../img/managment_list.png');
    background-color: #fff;
    background-position: center;
    background-size: cover;
}

body.page-contact {
    line-height: 1;
    background-image: url("../images/homepage.png")
}

body.page-form-overview {
    box-sizing: border-box;
    background-image: url("../img/form_bg.svg");
    background-position: center;
    overflow: auto;
    width: 100%;
    background-color: rgb(255, 255, 255);
}

body.page-index {
    line-height: 1;
    background-attachment: fixed;
    background-image: url('../img/homepage.png');
}

body.page-log {
    background-attachment: fixed;
    background-image: url('../img/admin.jpg');
    background-color: #000;
    background-position: center;
    background-size: cover;
    color: #4D891A;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

body.page-login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

body.page-management {
    background-attachment: fixed;
    background-image: url('../img/managment_list.png');
    background-color: #fff;
    background-position: center;
    background-size: cover;
}

body.page-privacy {
    background-image: url("../img/privacy.jpg");
    background-repeat: revert;
}

body.page-product-form-add {
    background-attachment: fixed;
    background-image: url('../img/managment_list.png');
    background-color: #fff;
    background-position: center;
    background-size: cover;
}

body.page-product-form {
    background-attachment: fixed;
    background-image: url('../img/managment_list.png');
    background-color: #fff;
    background-position: center;
    background-size: cover;
}

body.page-product {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100%;
    background-image: url("../img/privacy.jpg");
}

body.common {
    height: 100vh;
    display: flex;
    flex-direction: column;
}



/* =========================================================
   2. LAYOUT
   ========================================================= */

/* Header / Navigation */

.desktop-navbar li a,
.mobile-navbar li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #6C8494;
    text-decoration: none;
}

.desktop-navbar li a .counter {
    background-color: #F3C60A;
    position: absolute;
    top: 8px;
    right: 11%;
    height: 24px;
    width: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    border-radius: 50%;
}

.mobile-navbar li a {
    font-size: 150%;
    padding: 0.5em 0;
}

.mobile-navbar li a .counter {
    background-color: #F3C60A;
    position: absolute;
    top: 8px;
    right: 10px;
    height: 24px;
    width: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    border-radius: 50%;
    z-index: 3;
}

.mobile-navbar,
.desktop-navbar {
    font-family: 'PT Sans', serif;
    box-shadow: 0em 0.3125em 0.375em #00000029;
    position: fixed;
    top: 1%; /* Abstand von oben */
    display: flex;
    background: #F6F6F6;
    width: 75%; /* Standardbreite */
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    z-index: 20;
    border-radius: 25px; /* Runden Ecken für die Navbar */
}

.mobile-navbar {
    display: none;
}

.mobile-navbar ul,
.desktop-navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    width: 100%;
}

.mobile-navbar li,
.desktop-navbar li {
    flex: 1; /* Alle Listenelemente gleich groß */
    text-align: center;
    transition: 0.3s;
    padding: 0;
    border-right: 2px solid #e3e3e4;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.desktop-navbar li:last-child,
.mobile-navbar li:last-child {
    border-right: none;
}

.desktop-navbar li:first-child,
.mobile-navbar li:first-child {
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
}

.desktop-navbar li:last-child,
.mobile-navbar li:last-child {
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}

.mobile-navbar a,
.desktop-navbar a {
    display: block;
    color: #6C8494;
    text-decoration: none;
    font-size: 175%;
    line-height: 3;
}

.mobile-navbar a img,
.desktop-navbar a img {
    height: 2em; /* Anpassung der Höhe der Icons */
    width: auto;
    vertical-align: middle;
}

.mobile-navbar li:hover,
.desktop-navbar li:hover {
    background: #dce5ec;
}

/* Main */

main {
    flex: 1;
}

/* Footer */

.image {
    width: 13em;
    height: auto;
    margin: auto auto 2em auto;
}

.footer_line {
    width: 100%;
    height: 11px;
    background: #657B89;
    box-shadow: inset 0px 3px 6px #00000029, 0px 3px 6px #00000029;
    opacity: 1;
    margin-top: 0;
}

footer {
    font-size: 10px;
    background-color: #6C8494;
    text-align: center;
    color: white;
    margin-top: 5%;
}

.footer-container {
    padding: 2.5% 3%;
    color: #033375;
    font-size: 22px;
    font-family: 'PT Sans', serif;
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.footbox{
    display: inline-block;
    width: 30%;
    margin-right: 3%;
    box-sizing: border-box;
    vertical-align: top;
}

.m-footer-container {
    padding: 0 10px 25px 10px;
    color: #033375;
    font-size: 22px;
    text-align: left;
    margin-left: 50px;
    font-family: 'PT Sans', serif;

    /* TODO: gucken ob gebraucht, wenn nein entfernen*/
    display: block;
}

#contact_txt {
    text-decoration: none;
    margin-bottom: 0;
    font-family: 'PT Sans', serif;
}

.contact_link_b{
    width: 40%;
    margin: auto auto 1em auto;
    border-radius: 21px;
    height: auto;
    vertical-align: middle;
    padding: 2%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid black;
}

/* =========================================================
   3. GLOBALE KOMPONENTEN
   ========================================================= */

/* Buttons */

button {
    margin-left: auto;
    display: block;
    font-size: 100%;
    font-family:'PT Sans', sans-serif;
    width: 45%;
    padding: 10px;
    background-color: #F3C60A;
    color: #6C8494;
    border: none;
    border-radius: 26px;
    cursor: pointer;
}

button:hover {
    background-color: #CDA70DFF;
}

.weiterlbutton .redbutton {
    background-color: #D85841;
    border: 1px solid #707070;
    height: 2em;
    width: 2em;
    border-radius: 25px;
    cursor: pointer;
}

.speicherbutton_secure {

    margin: auto 5% auto auto;
    float: right;
    grid-column: 2;
    justify-self: end;
    display: grid;
}

.speicherbutton_secure button {
    display: block;
    font-size: 100%;
    font-family:'PT Sans', sans-serif;
    padding: 10px;
    background-color: #F3C60A;
    color: #7B919F;
    border: none;
    border-radius: 26px;
    cursor: pointer;
    box-shadow: 0px 3px 6px rgba(0, 0, 41, 0.15);
}

.speicherbutton_secure button:hover {
    background-color: #CDA70DFF;
}

.page-product-add .speicherbutton {
    float: right;
    display: grid;
    grid-column: 3;
    justify-self: end;
    margin: auto 5% auto auto;
}

.page-product_form .speicherbutton {
    margin-top: auto;
}

.page-product-form .speicherbutton button {
    display: block;
    margin-left: auto;
}

.speicherbutton button {
    font-size: 100%;
    font-family:'PT Sans', sans-serif;
    padding: 10px;
    background-color: #F3C60A;
    color: #7B919F;
    border: none;
    border-radius: 26px;
    cursor: pointer;
    box-shadow: 0px 3px 6px rgba(0, 0, 41, 0.15);
}

.speicherbutton button:hover {
    background-color: #CDA70DFF;
}

/* Formulare */

form {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Inputs */

textarea:focus, input:focus{
    outline: none;
}

.search-box input {
    border-radius: 33px;
    border: 3px solid #6C8494;
    width: 100%;
    height: 50px;
    color: #6C849487;
    box-shadow: 0px 3px 6px #00000029;
    box-sizing: border-box; /* Verhindert das Überschreiten der Containerbreite */
}

.search-box input:focus {
    outline: none;
}

input[type="text"]::placeholder {
    color: #6C849487;
}

.page-index input[type="text"] {
    line-height: 50px; /* Gleiche Höhe für line-height */
    padding: 0 10px; /* Optionaler Abstand innen (links/rechts) */
    font-size: 25px;
}

.page-login input {
    box-shadow: 0px 3px 6px #00000029;
    margin-bottom: 16px;
    padding: 8px;
    border: 2px solid #6C8494;
    border-radius: 17px;
    outline-color: #6C8494;
}

.page-management .search input {
    border: none;
    color: #6C8494;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

input:checked + .slider:before {
    background-color: #81D841;
    border: 1px solid #707070;
}

input:focus + .slider {
    box-shadow: 0 0 1px #fff;
}

input:checked + .slider:before {
    -webkit-transform: translateX(27px);
    -ms-transform: translateX(27px);
    transform: translateX(27px);
}

.page-categories .input {
    border: none;
    margin: 1em;
    color: #6C8494;
    max-width: 100%;
}

.preview-box input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.teilnehmer-input::-webkit-outer-spin-button,
.teilnehmer-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
}
.teilnehmer-input {
    appearance: inherit;
    -moz-appearance: textfield !important; /* Entfernt die Pfeile in Firefox */
    outline: none;
    border: none;
    border-radius: 0 0 21px 21px;
    font-size: 1.25rem;
    padding: 0.5rem;
    width: 100%;
    height: fit-content; /* Restliche Höhe des Containers */
    box-sizing: border-box; /* Macht sicher, dass Padding und Border zur Höhe zählen */
}

.checkbox-wrapper-19 input[type=checkbox] {
    display: none;
}




.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box,
.checkbox-wrapper-19 .check-box.checked {
    border-color: #707070;
}

.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box::after,
.checkbox-wrapper-19 .check-box.checked::after {
    height: calc(var(--checkbox-height) / 2);
    -moz-animation: dothabottomcheck-19 0.2s ease 0s forwards;
    -o-animation: dothabottomcheck-19 0.2s ease 0s forwards;
    -webkit-animation: dothabottomcheck-19 0.2s ease 0s forwards;
    animation: dothabottomcheck-19 0.2s ease 0s forwards;
}

.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box::before,
.checkbox-wrapper-19 .check-box.checked::before {
    height: calc(var(--checkbox-height) * 1.2);
    -moz-animation: dothatopcheck-19 0.4s ease 0s forwards;
    -o-animation: dothatopcheck-19 0.4s ease 0s forwards;
    -webkit-animation: dothatopcheck-19 0.4s ease 0s forwards;
    animation: dothatopcheck-19 0.4s ease 0s forwards;
}

.page-form-overview .input {
    display: flex;
    align-items: center;
    width: 80%;
    height: 34px;
    font-size: 14px;
    border: 1px solid #707070;
    border-radius: 0px 16px 16px 0px;
    padding: 3px 3px 3px 3px;
}

/* Dropdowns */

.dropdowngrid {
    display: grid;
    grid-template-rows: auto auto;
    margin-left: 3em;
}

.dropdown {
    position: relative;
    display: inline-block;
    width: 8em;
    margin-bottom: 2em;
}

.dropdown:first-child {
    margin-bottom: 10em;
}

/* Suche */

.search-container {
    align-items: center;
    flex-direction: column;
    display: flex;
    height: auto;
    width: 70%;
    margin-top: 200px;
    margin-right: auto;
    margin-left: auto;
}

.search-container * {
    margin: 0;
}

.search-text {
    letter-spacing: -1px;
    margin-bottom: 5px;
    margin-left: 20px;
    align-self: start;
    color: #6C8494;
    font-size: 32px;
    font-family: 'PT Sans';
}

.search-box {
    width: 100%;
}

.searchnewgrid {
    margin: 1em;
    display: grid;
    flex-flow: column wrap;
    justify-content: flex-end;
}

.searchnew {
    margin-top: 0.8em;
    display: flex;
    background-color: #ECE4DB;
    box-shadow: inset 0 3px 6px #00000029, 0 3px 6px #00000029;
    border: 1px solid #707070;
    border-radius: 15px;
    padding: 0.5em;
    justify-content: center;
    align-items: center;
}

.page-management .searchnewgrid {
    width: 35em;
    grid-template-columns: 87% auto;
    grid-gap: 0.5em;
}

.page-management .search {
    background-color: #fff;
    box-shadow: 0 3px 6px #00000029;
    border: 2px solid #6C8494;
    border-radius: 25px;
    padding: 0.5em;
    display: flex;
    width: 100%;
    height: 1em;
    align-items: center;
}

.page-categories .searchnewgrid {
    width: auto;
    grid-template-columns: 100%;
}

.page-categories .searchnew {
    width: 93%;
}

.page-categories .search {
    background-color: #fff;
    box-shadow: 0 3px 6px #00000029;
    border: 2px solid #6C8494;
    border-radius: 25px;
    padding: 0.5em;
    display: flex;
    width: 100%;
    height: 1em;
    align-items: center;
}

/* etc. */



/* =========================================================
   4. SEITENSPEZIFISCHE KOMPONENTEN
   ========================================================= */

/* Index */

.textbox-container {
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: auto;
    margin-left: auto;
    margin-top: 100px;
    margin-bottom: 50px;
    max-width: 100%;
}

.textbox {
    text-align: center;
    box-shadow: inset 0px 3px 6px #00000029, 0px 3px 6px #00000029;
    font-size: 18px;
    border-radius: 33px;
    padding: 25px;
    border: solid 1px #707070;
    color: #6C8494;
    font-weight: 400;
    font-family: 'PT Sans';
    background-color: #ECE4DB;
    max-width: 70%;


}

.textbox p {
    margin: 0;
}

.textbox_2 {
    margin-top: 30px;
}

/* Kategorien & Management */

.outerbox{
    width: fit-content;
    margin: 8em auto 0 auto;
    background-color: #F0F0F0;
    box-shadow: inset 0 3px 6px #00000029, 0 3px 6px #00000029;
    border-radius: 15px;
}

.searchnewgrid {
    margin: 1em;
    display: grid;
    flex-flow: column wrap;
    justify-content: flex-end;
}

.searchnew {
    margin-top: 0.8em;
    display: flex;
    background-color: #ECE4DB;
    box-shadow: inset 0 3px 6px #00000029, 0 3px 6px #00000029;
    border: 1px solid #707070;
    border-radius: 15px;
    padding: 0.5em;
    justify-content: center;
    align-items: center;
}

.categorie_strich:last-child {
    border-top: none;
}

.clothbox {
    border-radius: 15px;
    background-color: #ECE4DB;
    box-shadow: inset 0 3px 6px #00000029, 0 3px 6px #00000029;
    border: 1px solid #707070;
}

.clothgrid {
    border-radius: 15px;
    background-color: #F0F0F0;
    box-shadow: inset 0 3px 6px #00000029, 0 3px 6px #00000029;
    margin: 0.4em;
    padding: 1em;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 0.5em;
}

.clothboxes {
    background-color: #fff;
    border: 2px solid #738A99;
}

.clothimg {
    display: flex;
    border-radius: 30px;
    justify-content: center;
    align-items: center;
    align-content: center;
    margin: 0.2em;
    height: 12.5em;
    width: auto;
}

.clothimg img {
    border-radius: 30px;
    height: 12.5em;
    width: 10em;
    object-fit: cover;
    border: 1px solid #707070;
}

textarea:focus, input:focus{
    outline: none;
}

#kategorien_titel {
    color: #6C8494;
    margin-left: 10%;
    font-weight: bold;
    width: auto;
}

#kategorien_titel a {
    color: #6C8494;
}

.articlenumbereditgrid {
    margin: 0.2em;
    padding: 2px;
    align-items: center;
}

.articlenumber {
  border: 1px solid #707070;
  border-radius: 30px;
  text-align: center;
  padding: 2px;
  width: 100%;
}

.categorie {
    position: fixed; /* Or fixed, depending on what you want */
    left: 0; /* Keeps it aligned to the left */
    /* Other existing styles */
    background: #DAD3CA;
    box-shadow: inset 0px 3px 6px #00000029, 0px 3px 6px #00000029;
}

.categorie_2 {
    height: 99%;
    background:#F0F0F0;
    box-shadow: inset 0px 3px 6px #00000029, 0px 3px 6px #00000029;
    padding-bottom: 1.7em;
}

.categorie_2_ober {
    width: auto;
    height: auto;
    bottom: 0;
    margin-bottom: 2%;
    margin-top: 1%;
    flex: 1;
    justify-content: center;
}

.categorie_strich {
    width: 80%;
    height: 3px;
    /*background: #304b7e;*/
    margin-left: 10%;
    margin-bottom: -15%;
}

.edit {
    background-color: #989191;
    border: 1px solid #707070;
    height: 1.4em;
    width: 1.4em;
    border-radius: 25px;
}

.new {
    background-color: #81D841;
    border: 2px solid #707070;
    height: 2em;
    width: 2em;
    border-radius: 25px;
    justify-content: center;
}

.page-categories a {
    color: inherit;
    text-decoration: none;
}

.page-categories .form {
    width: 100%;
}

.page-categories .wrap {
    display: flex; /* Flexbox sorgt für ein flexibles Layout */
    width: 100%; /* Volle Breite */
    max-width: 100vw; /* Verhindert, dass die Breite über den Bildschirm hinausgeht */
    margin: 0; /* Verhindert unerwünschte Ränder */
    padding: 0; /* Entfernt Padding, das den Inhalt verschieben könnte */
}

.page-categories .label {
    width: 100%;
}

.page-categories .searchnewgrid {
    width: auto;
    grid-template-columns: 100%;
}

.page-categories .searchnew {
    width: 93%;
}

.page-categories .search {
    background-color: #fff;
    box-shadow: 0 3px 6px #00000029;
    border: 2px solid #6C8494;
    border-radius: 25px;
    padding: 0.5em;
    display: flex;
    width: 100%;
    height: 1em;
    align-items: center;
}

.page-categories #kategorien_titel {
    font-size: 2.5vmin;
    display: inline-block;
}

.page-categories .articlenumbereditgrid {
    display: flex;
}

.page-categories .categorie {
    top: 10vh;
    width: 15vh;
    padding: 0.5vh;
    border-radius: 0 0.78vw 0.78vw 0;
    border: 0.1042vw solid #2F2F2F;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out; /* Sanfte Transitionen */
    display: none;
}

.page-categories .categorie_2 {
    width: 99%;
    padding-right: 8%;
    border-radius: 0 0.78vw 0.78vw 0;
    border: 0.1042vw solid #738A99;
}

.page-categories .categorie_2_ober {
    border-radius: 0 0.78vw 0 0;
}

.page-categories .categorie_strich {
    border-radius: 0 0 0.78vw 0;
    border-top: 0.2084vw solid #304b7e;
}

#kategorien_unter
{
    color: #6C8494;
    margin-left: 8%;
    width: fit-content;
}

.page-categories .categorie_icon
{
    width: 75%;
    height: 75%;
    margin: auto;
}

.page-categories .categorie_m_ueberschrift
{
    color: #6C8494;
    padding: 5% 0 0 10%;
    font-weight: bold;
    width: auto;
    border-radius: 25px 0 0 0;
}

.page-categories .categorie_m
{
    position: fixed;
    margin: 8.1em 7.5% 0 7.5%;
    height: auto;
    width: 85%;
    background: #F6F6F6;
    z-index: 1;
    border: 2px #6c8494 solid;
    border-radius: 21px;
    transition: 0.3s;
    display: none;

}

.page-categories .categorie_m_unter {
    width: 100%;
}

.page-categories .categorie_2_unter
{
    width: auto;
    height: auto;
    margin-top: 5%;
    border-radius: 0 0 0.78vw 0;
    flex: 1;
    justify-content: center;
}

.page-categories .categorie_m_strich
{
    width: 80%;
    height: 3px;
    background: #304b7e;
    margin-left: 10%;
    margin-top: -1%;
}

.page-categories .categorie_m_symbol { 
    display: flex; 
    width: 3em;
    height: 3em;
    display: flex;
    position: fixed;
    background: #F6F6F6;
    margin: 1% auto auto 0;
    margin-top: 5.5em;
    border-radius: 0 14px 14px 0;
    border: 2px #6c8494 solid;
    border-left-width: 2px;
    border-left-style: solid;
    border-left-color: rgb(108, 132, 148);
    border-left: 0px;
    transition: 0.5s;
}

.page-management .searchnewgrid {
    width: 35em;
    grid-template-columns: 87% auto;
    grid-gap: 0.5em;
}

.page-management .search {
    background-color: #fff;
    box-shadow: 0 3px 6px #00000029;
    border: 2px solid #6C8494;
    border-radius: 25px;
    padding: 0.5em;
    display: flex;
    width: 100%;
    height: 1em;
    align-items: center;
}

.page-management #kategorien_titel a {
    text-decoration: none;
}

.page-management .articlenumbereditgrid {
    display: grid;
    grid-template-columns: auto 1.4em;
    column-gap: 0.7em;
}

.page-management .categorie {
    top: 10%;
    width: 10%;
    padding: 0.5%;
    border-radius: 0 35px 35px 0px;
    border: 2px solid #2F2F2F;
}

.page-management .categorie_2 {
    width: 98%;
    border-radius: 0 25px 25px 0;
    border: 2px solid #738A99;
}

.page-management .categorie_2_ober {
    border-radius: 0 25px 0 0;
}

.page-management .categorie_strich {
    border-radius: 0 0 25px 0;
    border-top: 4px solid #304b7e;
}

.page-management .edit {
    align-content: center;
    justify-content: center;
}

.page-management .new {
    display: flex;
    align-items: center;
}


.delavailabilitybuts {
    display: grid;
    grid-template-columns: auto auto auto ;
    column-gap: 0.7em;
    margin: 0.2em;
    padding: 2px;
    align-items: center;
}

.del {
    background-color: #D85841;
    border: 1px solid #707070;
    height: 2em;
    width: 2em;
    border-radius: 25px;
    justify-content: center;
    
}
.placeholdi
{
    width: 3.5em;
}

.switch {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 2em;
    justify-content: center;
}


.slider {
     position: absolute;
     cursor: pointer;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 0;
     background-color: #fff;
     -webkit-transition: .4s;
     transition: .4s;
     border: 1px solid #707070;
 }

.slider:before {
    position: absolute;
    content: "";
    left: -1px;
    height: 1.75em;
    width: 1.75em;
    background-color: #E67F26;
    -webkit-transition: .4s;
    transition: .4s;
    border: 1px solid #707070;
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* Produkte (Hinzufügen + Bearbeiten) */


/*Wird verwendet für Produktbildzoom*/
.img-zoom-lens {
    position: absolute;
    width: 100px;
    height: 100px;
    cursor: none;
    display: none;
    pointer-events: none;
    z-index: 10;
}

.img-zoom-result {
    background-size: cover;
    background-repeat: no-repeat;
    margin: 2.5% 0 0 0 ;
    position: absolute;
    width: 22.45%;
    height: 60%;
    display: none;

    z-index: 11;
    border-radius: 19px 19px 0  0 ;
    pointer-events: none;
}

.navpic {
    background: #eae2d9;
    border: 2px solid #6f6f6f;
    height: 50px;
    width: 100%;
    margin-top: 4%;
    border-bottom-right-radius: 21px;
    border-bottom-left-radius: 21px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    text-align: center;
    font: normal normal normal 35px/35px PT Sans;
}

.prdkt_box_bg {
    left: 75%;
    width: 75%;
    height: fit-content;
    background: #F6F6F6 no-repeat padding-box;
    border: 2px solid #707070;
    border-radius: 21px;
    opacity: 1;
    margin: 10% auto 0;
    padding: 1% 0.5% 0.75%;
}

.prdkt_box {
    height: auto;
    background: rgba(238, 234, 229, 50%);
    border: 2px solid rgba(112, 112, 112, 0.5);
    border-radius: 21px;
    margin: -0.5% auto 0;
}

.prdkt_bttn_bg {
    background: #ECE4DB no-repeat padding-box;
    border: 1px solid #707070;
    border-radius: 21px;
    opacity: 1;
    margin: 1% 5% 1%;
    padding: 0.5%;
}

.prdkt_bttn {
    width: auto;
    height: auto;
    background: #EEEAE5 no-repeat padding-box;
    border: 1px solid #707070;
    border-radius: 21px;
    opacity: 0.3;
    padding: 0.1%;
    cursor: pointer;
    transition: 0.25s;
}

.prdkt_bttn a {
    text-decoration: none;
    color: #728596;
    width: 100%;
}

.prdkt_bttn:hover {
    background-color: #F3C60A;
    opacity: 75%;
    transition: 0.25s;
}

.prdkt_bttn_txt {
    width: auto;
    height: auto;
    text-align: left;
    font: normal normal bold 42px/55px PT Sans;
    letter-spacing: 0;
    color: #728596;
    opacity: 1;
    margin-left: 2.1%;
}

.prdkt_pic_pic {
    width: 100%;
    height: 300px;
    background: #FFFFFF no-repeat padding-box;
    border: 2px solid #707070;
    opacity: 1;
    padding-top: 0.5%;
    margin: -0.5% -0.1% -8% 0;
    border-top-right-radius: 21px;
    border-top-left-radius: 21px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.prdkt_pic_all {
    width: 25%;
    height: 450px;
    background: rgba(131, 25, 45, 0) no-repeat padding-box;
    border: 2px solid rgba(112, 112, 112, 0);
    opacity: 1;
    margin: 5% auto 0 5%;
    padding-bottom: 5%;
    border-top-right-radius: 21px;
    border-top-left-radius: 21px;
    margin-bottom: 10%;
}

.prdkt_pic {
    object-fit: contain;
    width: 100%;
    height: 90%;
}

.prdkt_titel {
    width: 95%;
    background: #ECE4DB no-repeat padding-box;
    border: 1px solid #707070;
    border-radius: 21px;
    opacity: 1;
}

#prdkt_titel {
    margin: 1.8% 0 1.8% 0 ;
    text-align: center;
    font: normal normal bold 40px/50px PT Sans;
    letter-spacing: 2.55px;
    color: #6F8696;
}

#pfeil {
 margin: 16px;
    display: table-cell;
    color: #6C8494;
    cursor: pointer;
}

.pfeil{
    font-weight: bold;
}


.bigcontainer {
    background-color: #ECE4DB;
    border: 1px solid #707070;
    border-radius: 25px;
    box-shadow: inset 0 3px 6px #00000029, 0 3px 6px #00000029;
    margin: 7% auto 2% auto;
    width: 1000px;
}

.shadow {
    display: grid;
    grid-template-columns: 2.2em auto 6.6em;
    background-color: rgba(240, 240, 240, 0.2);
    margin: 10px;
    box-shadow: inset 0 3px 6px rgba(0, 0, 41, 0.05), 0 3px 6px rgba(0, 0, 41, 0.05);
    border-radius: 25px;
    padding: 1% 2% 2% 1%;
}

.weiterlbutton .redbutton {
    background-color: #D85841;
    border: 1px solid #707070;
    height: 2em;
    width: 2em;
    border-radius: 25px;
    cursor: pointer;
}

.content {
    display: grid;
    grid-template-columns: auto 610px auto;
    column-gap: 5px;
    margin: 1% 4em 0 3em;
}

.dropdowngrid {
    display: grid;
    grid-template-rows: auto auto;
    margin-left: 3em;
}

.dropdown {
    position: relative;
    display: inline-block;
    width: 8em;
    margin-bottom: 2em;
}

.dropdown:first-child {
    margin-bottom: 10em;
}

.middledropdown p {
    margin-bottom: 1px;
}

.input_fields {
    width: 425px;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background-color: #F0F0F0;
    border: 1px solid #707070;
    color: #6C8494;
    cursor: pointer;
}

.input_fields_writing {
    width: 403px;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background-color: #F0F0F0;
    border: 1px solid #707070;
    color: #6C8494;
    cursor: pointer;
}

.circle {
    display: block;
    font-size: 100%;
    font-family:'PT Sans', sans-serif;
    padding: 10px;
    background-color: #F3C60A;
    color: #7B919F;
    border: none;
    border-radius: 26px;
    cursor: pointer;
    box-shadow: 0 3px 6px rgba(0, 0, 41, 0.15);
}


/* Farbe CSS*/
.custom-select-wrapper {
    position: relative;
    width: 5em;
}

.custom-select .color-select .size-select {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 5em;
    z-index: 10; /* Ensure the custom select is above other elements */
}

.oberkat-select {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 425px; /* Ensure the custom select is above other elements */
    margin-bottom: 2em;
}

.custom-select-trigger {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background-color: #F0F0F0;
    border: 1px solid #707070;
    color: #6C8494;
    cursor: pointer;
}

.custom-select-trigger span {
    display: block;
    font-size: 14px;
}

.custom-options {
    position: absolute;
    width: 4.9em;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    background-color: #fff;
    border: 1px solid #707070;
    color: #6C8494;
    flex-direction: column;
    z-index: 10; /* Ensure the custom options are above other elements */
}

.custom-options .custom-option {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

.custom-options-long {
    width: 423px;
    z-index: 10;
}

.custom-options .custom-option img {
    width: 25px;
    height: 25px;
}

.custom-options .custom-option:hover {
    background-color: #f0f0f0;
}

.custom-select.open .custom-options {
    display: flex;
}

#color-select {
    display: none;
}

#size-select {
    display: none;
}

#product_geschlecht {
    display: none;
}

#product_stoff {
    display: none;
}

.middlegrid {
    width: 550px;
    justify-content: center;
}

.upload-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.preview-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.preview-box {
    position: relative;
    width: 200px;
    height: 300px;
    border: 1px solid #ccc;
    margin: 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
}
.preview-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.bear-preview-box {
    position: relative;
    width: 200px;
    height: 300px;
    border: 1px solid #ccc;
    margin: 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.bear-preview-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.preview-box input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.preview-box .placeholder {
    position: absolute;
    color: #aaa;
    pointer-events: none;
}

.preview-box .placeholder p {
    z-index: -10;
}

.middledropdown {
    width: 425px;
    margin: 1em auto 2em auto;
}

/* Warenkorb */


.wrnkrb_list{
    /* Layout Properties */
    width: 40%;
    height: 2.938em;
    margin: auto;
    margin-top: 20%;
    margin-bottom: 1%;
    /* UI Properties */
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 4px solid #7B919F;
    border-radius: 29px;
    opacity: 1;
    justify-content: center;
    align-items: center;
    display: flex;
}

.wrnkrb_artikel {
    /* Layout Properties */
    margin: auto;
    width: 20.625em;
    height: 118px;
    display: flex;
    /* UI Properties */
    background: #F6F6F6 0% 0% no-repeat padding-box;
    border: 4px solid #738A99;
    border-radius: 27px;
    opacity: 1;
    padding: 0.5%;
    margin-bottom: 1%;
}

.wrnkrb_artikel_no_artikel {
    /* Layout Properties */
    margin: auto;
    width: 39%;
    height: 0em;
    /* UI Properties */
    opacity: 1;
    padding: 0.5%;
    margin-bottom: 1%;

}

.wrnkrb_artikel_txt{
    margin: auto;
    margin-left: 20%;
    /* Layout Properties */
    top: 476px;
    left: 711px;
    width: 634px;
    height: 8.125em;
    /* UI Properties */
    text-align: left;
    letter-spacing: 0px;
    color: #033375;
    opacity: 1;
}

.wrnkrb_artikel_bttn{
    /* Layout Properties */
    float: right;
    margin: auto;
    width: 35%;
    height: 6.7em;
    display: flex;
    justify-content: center;
    align-items: center;

    /* UI Properties */
    background: #D85841 0% 0% no-repeat padding-box;
    border-radius: 21px;
    opacity: 1;
}

.wrnkrb_artikel_bttn a {
    display: flex;
    justify-content: center;
    align-items: center;
}

#wrnkrb_pic{
    object-fit: contain;
    border: 2px solid #728998;
    height: 95%;
    border-radius: 12px;
    margin: auto auto auto 2%;

}

#wrnkrb_trash{
    width: 100px;
    height: 100px;
    max-width: 75%;
    max-height: 75%;
}

#wrnkrb_list_txt{
    color: #6C8494;
    font: normal normal normal 17px/22px PT Sans;
}

.wrnkrb_confirm{
    /* Layout Properties */
    width: 40%;
    height: 2.938em;
    /* UI Properties */
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 4px solid #7B919F;
    border-radius: 21px;
    opacity: 1;
    margin: auto;
    margin-bottom: 5%;
    display: flex;
    justify-content: right;
    align-items: center;
}

.wrnkrb_confirm_bttn{
    white-space: nowrap;
    /* Layout Properties */
    margin-right: 2.5%;
    height: 2.375em;
    /* UI Properties */
    background: #F3C60A 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 13px;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 2% 0 2%;
    text-decoration: none;
}

.wrnkrb_confirm_bttn a {
    text-decoration: none;
    width: 100%;
}

.wrnkrb_confirm_bttn:hover {
    background: #ffd811;

}

.wrnkrb_artikel_bttn:hover{
    background: #ef4425;
}

#wrnkrb_confirm_bttn_txt{
    /* Layout Properties */
    margin-top: 5%;
    height: 1.813em;
    /* UI Properties */
    text-align: center;
    font: normal normal normal 25px/32px PT Sans;
    letter-spacing: 0px;
    color: #6C8494;
    opacity: 1;
}

/* Login */

.exit {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 4.688em;
    height: 4.688em;
    border-radius: 50%;
    background-color: #ece4db;
    border: 3px solid #fccc04;

    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

}
.exit a {
    display: flex;
    width: 100%;
    height: 100%;
}
.exit_pic{
    margin: auto;
    width: 75%;
    height: auto;
}

.pw
{
    float: left;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    margin-right: 0;
    width: 79%;
    height: 110%;
}
.toggle-password
{
    padding: 1em;
    padding-bottom: 0.44em;
    padding-top: 0.44em;
    object-fit: contain;
    height: 90%;
    margin-left: 0;
    float: left;
    width: 15%;
    border-top-left-radius: 0px ;
    border-bottom-left-radius: 0px ;
}


#background {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: -1;
    opacity: 30%;
}

.stretch {
    width:100%;
    height:100%;
    object-fit: cover;
}

.fontlogo {
    max-width: 100%;
    margin: auto;
    padding: 10px;
    position: relative;
}
.tooltip{

    display: flex;
    justify-content: end;
    height: 10px;
    width: 100%;
}
.avatar {
    align-content: end;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-image: url('../img/image_question.png');
    background-size: cover;
    background-position: center;
    position: absolute;
    }
.avatar::before,
.avatar::after {
    --scale: 0;
    --arrow-size: 20px;
    --tooltip-color: #ece4db;

    position: absolute;
    top: -.25rem;
    left: 50%;
    transform: translateX(-50%) translateY(var(--translate-y, 0)) scale(var(--scale));
    transition: 150ms transform;
    transform-origin: bottom center;
}

.avatar::before {
    border: solid 1px #707070;
    font-weight: bold;
    font-family:'PT Sans', sans-serif;
    --translate-y: calc(-100% - var(--arrow-size));
    width: 10rem;
    content: attr(data-tooltip);
    color: #6f8696;
    padding: .5rem;
    border-radius: .3rem;
    text-align: center;
    background: var(--tooltip-color);
}

.avatar:hover::before,
.avatar:hover::after {
    --scale: 1;
}

.avatar::after {
    --translate-y: calc(-1 * var(--arrow-size));

    content: '';
    border: var(--arrow-size) solid transparent;
    border-top-color: var(--tooltip-color);
    transform-origin: top center;
}

.dfs-text {
    color: #0D3A65;
    font-size: 33px;
    bottom: -32px;
    left: 0;
    position: absolute;
    font-family:"Akaya Kanadaka";
}
.responsive-img {
    width: 100%;
    bottom: 5px;
    right: 0;
    position: absolute;
    height: auto;
    max-width: 180px;
}

.form-container {
    border: 5px solid #FCCC04;
    background-color: #ECE4DB;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 350px;
    text-align: center;
}

.page-login label {
    font-family:'PT Sans', sans-serif;
    color: #6C8494;
    padding-top: 20px;
    margin-bottom: 8px;
    font-weight: bold;
    text-align: left;
}

/* Kontakt */


.middle-container {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3.125rem;
    margin-top: 300px;
    border-radius: 4rem;
    outline: 4px solid #7B919F;
    min-width: 0px;
    max-width: 62.5rem;
    background: #F6F6F6;
    height: 31.25rem;
    padding: 1.25rem 0.25rem 1.25rem 0.25rem;
}
i {
    margin-left: 5px;
}
.kontakt{
    text-align: center;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    display: flex;
    height: 3.125rem;
}

.container1 h3{
    font-weight: lighter;
    letter-spacing: 0.188rem;
    font-size: 1.688rem;
    color: #7B919F;
}

/*TODO: herausfinden, wofür diese Regel ist und Klasse vergeben und anpassen*/

/* input {
    width: 100%;
    text-align: center;
} */


.email-top {
  	font-size: 25px;
 	text-align: center;
    font-weight: bold;
    color: #6F8696;
    justify-content: center;
    display: flex;
    align-items: center;
    outline: 1px solid #707070;
    width: 30%;
    height: 3.25rem;
    border-radius: 1.313rem 0rem 0rem 1.313rem;
    background: #ECE4DB;
  
}


.container2{
    width: 60%;
    height: 3.438rem;
}

::placeholder{
    color: #6C849487;
}

#to_email {
    outline: none;
    border: 1px solid #707070;
    border-radius: 0rem 1.313rem 1.313rem 0rem;
    font-size: 1.25rem;
    font-weight: bold;
    color: #7B919F;
    height: 3.125rem;
    width: 100%;
    text-align: center;
}

.small-boxes{
    flex-wrap: wrap;
    align-items: flex-start; /* Neue Eigenschaft */
    display: flex;
    flex-direction: row;
    margin-top: 1.25rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 90%;

}
.datum-container {
    margin-right: 10px;
    border: 1px solid #707070;
    border-radius: 21px;
    width: 300px;
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
}

.datum-top {
    align-items: center;
    display: flex;
    justify-content: center;
    border-radius: 21px 21px 0px 0px;
    font-size: 25px;
    border-bottom: 1px solid #707070;
    background-color: #ECE4DB;
    text-align: center;
    font-weight: bold;
    color: #6F8696;
    height: 46px;
}


.datum-select {
    outline: none;
    width: 100%;
    height: 71px;
    border-radius: 0px 0px 21px 21px;
    background-color: #FFFFFF;
    color: #333333;
    font-size: 16px;
    padding: 5px;
    box-sizing: border-box;

}

.datum-select select {
    outline: none;
    width: 100%;
    height: 71px;
    border-radius: 0px 0px 21px 21px;
    background-color: #FFFFFF;
    color: #333333;
    font-size: 16px;
    padding: 5px;
    box-sizing: border-box;
}

/* Stil für das Datumsauswahl-Menü im Firefox */
.datum-select select::-ms-expand {
    display: none; /* Entfernt den Pfeil im Internet Explorer */
}



/* Wrapper, um das Dropdown-Menü zu positionieren */
.datum-select-wrapper {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
    border: 0;
}

/* Stil für Optionen im Dropdown */
.datum-select option {
    padding: 10px;
    background-color: #F6F6F6;
}

/* Hover-Effekt für Optionen */
.datum-select option:hover {
    background-color: #E0E0E0;
}


.teilnehmer-container {

    margin-right: 10px;
    border: 1px solid #707070;
    border-radius: 21px;
    width: 300px;
    height: 118px;
    display: flex;
    flex-direction: column;
}

.teilnehmer-top {
    align-items: center;
    display: flex;
    justify-content: center;
    outline: none;
    border-radius: 21px 21px 0px 0px;
    font-size: 25px;
    border-bottom: 1px solid #707070;
    background-color: #ECE4DB;
    text-align: center;
    font-weight: bold;
    color: #6F8696;
    height: 46px;
}
.teilnehmer-input::-webkit-outer-spin-button,
.teilnehmer-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
}
.teilnehmer-input {
    appearance: inherit;
    -moz-appearance: textfield !important; /* Entfernt die Pfeile in Firefox */
    outline: none;
    border: none;
    border-radius: 0 0 21px 21px;
    font-size: 1.25rem;
    padding: 0.5rem;
    width: 100%;
    height: fit-content; /* Restliche Höhe des Containers */
    box-sizing: border-box; /* Macht sicher, dass Padding und Border zur Höhe zählen */
    text-align: center;
}


.produkte-container{

    height: 280px;
    border: 1px solid #707070;
    border-radius: 21px;
    width: 270px;
    background-color: #FFFFFF;
}

.produkte-top{
    align-items: center;
    display: flex;
    justify-content: center;
    border-radius: 21px 21px 0px 0px;
    font-size: 25px;
    border-bottom: 1px solid #707070;
    background-color: #ECE4DB;
    text-align: center;
    font-weight: bold;
    color: #6F8696;
    height: 46px;
}

.datum-bottom,
.teilnehmer-bottom,
.produkte-bottom,
.uhrzeit-bottom {
    height: 100%; /* Höhe auf automatisch setzen */
    color: #6F8696;
}

.produkte-bottom{
    padding: 8px 0 0 8px;
}

.datum-bottom {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100%; /* Fill the height of the container */
    width: 100%; /* Optional: Ensures it fills the full width too */
    text-align: center;
    margin: 0;
    font-size: 1.25rem;
}

.datebottom {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100%; /* Fill the height of the container */
    width: 100%; /* Optional: Ensures it fills the full width too */
    text-align: center;
    margin: 0;
    font-size: 1.25rem;
}

.teilnehmer-bottom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    border-radius: 0 0 21px 21px;
}

.uhrzeit-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 130px;
    position: absolute;
    height: 118px;
    border: 1px solid #707070;
    border-radius: 21px;
    width: 300px;
    background-color: #FFFFFF;
}

.uhrzeit-top{
    align-items: center;
    display: flex;
    justify-content: center;
    border-radius: 21px 21px 0px 0px;
    font-size: 25px;
    border-bottom: 1px solid #707070;
    background-color: #ECE4DB;
    text-align: center;
    font-weight: bold;
    color: #6F8696;
    height: 46px;
    width: 100%;
}

.uhrzeit-bottom {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100%; /* Fill the height of the container */
    width: 100%; /* Optional: Ensures it fills the full width too */
    text-align: center;
    margin: 0;
    font-size: 1.25rem;
}

.checkbox-container {
    margin-right: 50px;
    margin-top: 30px;
    height: 50px;
    max-width: 100%;

    display: flex;
    flex-direction: row;
    justify-content: right;
}


.datenschutz-text {
    font-family: 'PT Sans';
    margin-right: 10px;
    padding: 7px;
    height: 20px;
    text-align: center;
    background-color: #FFFFFF;
    border: 2px solid #707070;
    border-radius: 21px;
    color: #7B919F;
}

.datenschutz-text a {
    color: #F3C60A;
    text-decoration-line: underline;
    text-decoration-style: wavy;
    font-weight: bold;
}

.checkbox-wrapper-19 {
    box-sizing: border-box;
    --background-color: #fff;
    --checkbox-height: 25px;
}

.checkbox-wrapper-19 .check-box {
    height: var(--checkbox-height);
    width: var(--checkbox-height);
    background-color: transparent;
    border: calc(var(--checkbox-height) * .1) solid #000;
    border-radius: 5px;
    position: relative;
    display: inline-block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-transition: border-color ease 0.2s;
    -o-transition: border-color ease 0.2s;
    -webkit-transition: border-color ease 0.2s;
    transition: border-color ease 0.2s;
    cursor: pointer;
}

.checkbox-wrapper-19 .check-box::before,
.checkbox-wrapper-19 .check-box::after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    height: 0;
    width: calc(var(--checkbox-height) * .2);
    background-color: #FFCC00;
    display: inline-block;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    border-radius: 5px;
    content: " ";
    -webkit-transition: opacity ease 0.5s;
    -moz-transition: opacity ease 0.5s;
    transition: opacity ease 0.5s;
}

.checkbox-wrapper-19 .check-box::before {
    top: calc(var(--checkbox-height) * .72);
    left: calc(var(--checkbox-height) * .41);
    box-shadow: 0 0 0 calc(var(--checkbox-height) * .05) var(--background-color);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.checkbox-wrapper-19 .check-box::after {
    top: calc(var(--checkbox-height) * .37);
    left: calc(var(--checkbox-height) * .05);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.absenden-button {

    height: 40px;
    width: 100%;
    display: flex;
    justify-content: right;
}

#absenden{
    font-size: 20px;
    color: #7B919F;
    margin-right: 50px;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 13px;
    background-color: #F3C60A;
    width: 15%;
    border: none;
}

.tooltiptext {
    margin-bottom: 50px;
    margin-left: 500px;
    font-size: 12px;
    border: 1px solid #707070;
    justify-content: center;
    display: flex;
    height: 50px;
    visibility: hidden;
    width: 200px;
    background-color: #ECE4DB;
    color: #6F8696;
    align-items: center;
    border-radius: 21px;
    padding: 5px 0;
    position: absolute;
}

.email-top:active .tooltiptext {
    visibility: visible;
}

.teilnehmer-top:active .tooltiptext {
    visibility: visible;
}

/* Anfragen */

.box_bg_bg
{
    margin: auto;
    left: 50%;
    width: 75%;
    display: flex;
    justify-content: center;
}
.box_bg {
    left: 50%;
    width: 75%;
    height: fit-content;
    background: #F6F6F6 no-repeat padding-box;
    border: 2px solid #707070;
    border-radius: 21px;
    opacity: 1;
    margin: 0 auto 4%;
    padding: 1% 0.5% 0.75%;
    display: inline-block;

}

.mail{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ECE4DB;
    color: #707070;
    width: 20%;
    height: 30px;
    padding: 5px 20px 5px 15px;
    margin: 0px 0px 0px 20px;
    border: 1px solid #707070;
    border-radius: 16px 0px 0px 16px;
}

.box_bg:first-child {
    margin: 10% auto 4%;

}

.contact-mail{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 95%;
    height: 45px;
    margin: 20px;

}

.page-form-overview .input {
    display: flex;
    align-items: center;
    width: 80%;
    height: 34px;
    font-size: 14px;
    border: 1px solid #707070;
    border-radius: 0px 16px 16px 0px;
    padding: 3px 3px 3px 3px;
}

.answer_mail{
    width: 100%;
    height: 170px;
    border: 2px solid #707070;
    border-radius: 16px ;
}
.form-left
{
    font: normal 16px/18px PT Sans;
    letter-spacing: 0px;
    color: #7B919F;
    padding: 20px;
    max-width: 96.25%;
    min-width: 96.25%;
}


.list{
    margin: 20px;
    height: 250px;
}

.list_reply{
    margin: 20px;
    height: 418px;
    text-align: left;
}

.nachricht{
    background: #ECE4DB;
    color: #707070;
    width: 20%;
    height: 30px;
    padding: 2.5px 20px 0px 15px;
    margin: 0px 0px 0px 40px;
    border: 1px solid #707070;
    border-radius: 16px 16px 0px 0px;
}

.box {
    display: flex;
    justify-content: center;
    width: 100%;
    border: 3px solid #707070;
    border-radius: 21px;
    margin: 0 auto 1%;



}

.left-box {
    float: left;
    width: 65%; /* Für drei gleich breite Boxen */
    border-right: #dce5ec solid 3px;
    margin: 0px 0px 0px 0px;
}

.right-box {
    float: left;
    width: 30%; /* Für drei gleich breite Boxen */
    padding: 5px;
}

.del_button {
    float: left;
    background-color: rgba(255, 0, 0, 0.74); /* Grün */
    border: none;
    border-radius: 5px;
    color: #ffffff;
    padding: 15px 1px 15px 1px;
    text-align: center;
    font-size: 16px;
    margin: 20px 30px 40px 15px;
    cursor: pointer;
}

.del_button2 {
    float: left;
    background-color: rgb(87, 185, 18); /* Grün */
    border: none;
    border-radius: 5px;
    color: #ffffff;
    padding: 15px 1px 15px 1px;
    text-align: center;
    font-size: 16px;
    margin: 20px 30px 40px 15px;
    cursor: pointer;
}

.button {
    float: right;
    background-color: #F3C60A; /* Grün */
    border: none;
    border-radius: 5px;
    color: #707070;
    padding: 15px 5px;
    text-align: center;
    font-size: 16px;
    margin: 20px 30px 40px 15px;
    cursor: pointer;
}

textarea {
    width: 99%;
    padding: 5px;
    border: 3px solid #707070;
    border-radius: 21px;
}

/* Datenschutzerklärung & Impressum */

.textbox_ds{
    /* Layout Properties */
    width: 97%;
    height: auto;
    margin: 1% 1% 1% 1%;
    opacity: 100%;
    /* UI Properties */
    background:rgba(238,234,229,50%);
    border: 2px solid rgba(112, 112, 112, 0.5);
    border-radius: 1.3125em;
    padding-left: 1%;
    padding-right: 1%;
}
.textbox_bg{

    /* UI Properties */
    background: rgba(246, 246, 246, 1);
    border: 1px solid #707070;
    border-radius: 1.3125em;
    padding-right: 1%;
    width: 80%;
    margin: 15% auto;
}

/* Logs (logaz.php & logza.php) */


.page-log * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.logo {
    position: absolute;
    background-color: #4D891A;
    border: 1px solid #707070;
    border-radius: 100%;
    margin: 1%;
}

canvas {
    position: absolute;
    z-index: -100;
}

.log {
    background-color: rgb(0,0,0, 0.5);
    display: grid;
    grid-template-rows: auto auto;
    align-items: center;
    align-content: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    z-index: 0;
}

.bar {
    margin: 1rem 1rem 0 1rem;
    padding-right: 0.5rem;
    border: 1px solid #2F2F2F;
    background-color: #000;
    border-radius: 7px;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: flex-end;
    font-size: 2rem;
}

.sort {
    border: 1px solid #1A450D;
    background-color: #1C1C1C;
    border-radius: 7px;
    padding: 0.2rem 0.4rem 0.2rem 0.4rem;
    margin: 0.2rem;
    width: 2rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;

}

.sort img {
    height: 2rem;
}

.date {
    border: 1px solid #1A450D;
    background-color: #1C1C1C;
    border-radius: 7px;
    padding: 0.2rem 0.4rem 0.2rem 0.4rem;
    margin: 0.2rem;
    height: 2.5rem;
}

.vonbis {
    padding: 0.2rem 0.4rem 0.2rem 0.4rem;
    margin: 0.2rem;
    font-size: 1rem;
    text-align: center;
    height: 2.5rem;
}

.page-log .search {
    border: 1px solid #1A450D;
    background-color: #1C1C1C;
    border-radius: 7px;
    padding: 0.2rem 0.4rem 0.2rem 0.4rem;
    margin: 0.2rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
}

.txt {
    border: 1px solid #2F2F2F;
    background-color: #000;
    opacity: 100%;
    text-align: left;
    justify-self: center;
    margin: 1rem;
    padding: 0.5rem;
    font-size: 1rem;
    height: 90vh;
    overflow-y: scroll;

}

/* TODO: schauen ob die Scrollbar wegen dieser Regel auch auf anderen Seiten weg ist 
-> wenn ja, dann body.log davorsetzen und in php dateien auch anpassen*/

::-webkit-scrollbar {
    display: none;
}

/* =========================================================
   5. RESPONSIVE DESIGN - Media Queries
   ========================================================= */

/* Handy-Ansicht */
@media (max-width: 576px) {
    #absenden {
        font-size: 20px;
        color: #7B919F;
        margin-right: 20px;
        box-shadow: 0px 3px 6px #00000029;
        border-radius: 13px;
        background-color: #F3C60A;
        width: 40%;
        border: none;
    }

    #prdkt_inhalt {
        text-align: left;
        font: normal normal normal 25px/39px PT Sans;
        color: #6C8494;
        opacity: 1;
        margin: 2.5% 0 0 2.5%;
    }

    #to_email {
        outline: none;
        border: 1px solid #707070;
        /*border-radius: 1.313rem 1.313rem 1.313rem 1.313rem;*/
        font-size: 1.25rem;
        font-weight: bold;
        color: #7B919F;
        height: 30px;
    }

    #wrnkrb_list_txt {
        font: normal normal normal 17px/22px PT Sans;
        letter-spacing: 0px;
    }

    #wrnkrb_pic { height: 80%; }

    /* TODO: Verhalten des .absenden-buttons überprüfen, da es noch eine Query dazu gibt */
    .absenden-button { margin-top: 35px; }

    .avatar::before {
        margin-right: 15px;
        width: 100px;
        font-size: 12px;
    }

    .checkbox-container { margin-right: 10px; }

    .container1 {
        margin-right: 180px;
        justify-content: center;
        display: flex;
        align-items: center;
        outline: 1px solid #707070;
        width: 40%;
        height: 20px;
        border-radius: 1.313rem 1.313rem 0rem 0rem;
        background: #ECE4DB;
    }

    .container1 h3 {
        font-weight: lighter;
        letter-spacing: 0rem;
        font-size: 10px;
        color: #7B919F;
    }

    .container2 {
        width: 100%;
        height: 20px;
    }

    /* TODO: Verhalten überprüfen, da margin-left in anderer zusätzlicher Query nicht vorkommt */
    .datenschutz-text {
        text-align: center;
        height: 45px;
        font-size: 12px;
        margin-left:20px;
    }

    .datum-container { 
        order: 2;
        height: 90px;
        margin-bottom: 20px;
        width: 100%;
        margin-right: 5px;
    }

    .datum-select {
        height: 46px;

    }

    .desktop-navbar { 
        display: none; 
        width: 100%;
    }

    .email-top {
      height: 32.5px;
      width: 40%;
      margin-top: 13.75px;
      font-size: 15px; 
    }

    .footer-container { display: none; }

    .kontakt { height: 20px }

    .m-footer-container{ display: block; }

    .middle-container {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 100px;
        margin-top: 100px;
        border-radius: 21px;
        outline: 4px solid #7B919F;
        width: 80vw;
        max-width: 19rem;
        background: #F6F6F6;
        height: 55rem;
        padding: 1.25rem;
    }

    .mobile-navbar { 
        display: flex; 
        width: 100%;
    }

    .page-categories .articlenumbereditgrid { grid-template-columns: none; }

    .page-categories .clothgrid { 
        padding: 0.5em; 
        grid-template-columns: auto auto;
    }

    .page-categories .clothimg { height: 10em}

    .page-categories .clothimg img {
        height: 10em;
        width: 8em;
    }

    .page-categories .outerbox { width: 100%; }

    .page-index input[type="text"] {
        font-size: 17px;
        text-align: left;
    }

    .prdkt_box_bg { margin-top: 15%; }

    .prdkt_bttn_bg { margin: 1% 2.5%; }

    .prdkt_inhalt {
        width: 95%;
        height: fit-content;
        background: #ECE4DB no-repeat padding-box;
        border: 1px solid #707070;
        border-radius: 21px;
        opacity: 1;
        margin: 0 2.5% 3%;
    }

    .prdkt_pic {
        margin-left: 0;
        top: 0;
        left: 0;
        max-height: 112.5%;
        max-width: 112.5%;
        width: 85%;/* 
        padding-bottom: 5%; */
    }

    .prdkt_pic_all {
        width: 85%;
        height: 24em;
        margin: 5%  7.5% 1.5em 7.5%;
    }

    .prdkt_titel {
        /* height: 60px; */
        margin: 10% 2.5% 2.5% 2.5%;
    }

    .produkte-container{
        margin-left: auto;
        margin-right: auto;
        outline: 1px solid #707070;
        border: 0px solid #F6F6F6;
        height: 260px;
        border-radius: 21px;
        width: 100%;
        background-color: #FFFFFF;
        padding: 0 0 0 0;

        order: 1;
        margin-bottom:20px;
        margin-top: 20px;
    }

    .produkte-top {
        align-items: center;
        display: flex;
        justify-content: center;
        font-size: 25px;
        background-color: #FFFFFF;
        text-align: center;
        font-weight: bold;
        color: #6F8696;
        height: 46px;
        border: none;
    }

    .search-text {
        letter-spacing: normal;
        margin-left: 0;
        text-align: center;
        font-size: 25px;
    }

    .small-boxes {
        /*align-items: center;*/
        flex-direction: column;
        display: flex;
        justify-content: center;
        margin-left: 14px;
        margin-right: auto;
        align-items: center;
    }

    .teilnehmer-container {
        order: 4;

        height: 90px;
        width: 100%;
        margin-bottom: 20px;
    }

    .textbox_bg {
        /* Layout Properties */
        width: 98%;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        margin-top: 15%;

        /* UI Properties */
        background: rgba(246, 246, 246, 1);
        border: 2px solid #707070;
        border-radius: 1.3125em;
        padding-right: 1%;
    }

    .tooltiptext {
        font-size: 12px;
        border: 1px solid #707070;
        justify-content: center;
        display: flex;
        height: 80px;
        visibility: hidden;
        width: 130px;
        background-color: #ECE4DB;
        color: #6F8696;
        align-items: center;
        border-radius: 21px;
        padding: 5px 0;
        position: absolute;
        margin-bottom: 120px;
        margin-right: 175px;
        z-index: 1;
        min-width:0;
    }

    .uhrzeit-container {
        order: 3; 
        height: 100px;
        width: 100%;
        margin: 0;
        margin-bottom: 20px;
        position: relative;
    }

    .wrnkrb_artikel { display: flex; }

    .wrnkrb_confirm {
        /* Layout Properties */
        width: 20.625em;
        height: 3.688em;
        /* UI Properties */
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 4px solid #7B919F;
        border-radius: 27px;
        opacity: 1;
        justify-content: center;
    }

    .wrnkrb_confirm_bttn {
        /* Layout Properties */
        width: 350px;
        height: 36px;
        /* UI Properties */
        background: #F3C60A 0% 0% no-repeat padding-box;
        box-shadow: 0px 3px 6px #00000029;
        border-radius: 13px;
        opacity: 1;
        margin-left: 2%;
    }

    .wrnkrb_list {
        /* Layout Properties */
        width: 20.625em;
        height: 31px;
        /* UI Properties */
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 4px solid #7B919F;
        border-radius: 21px;
        opacity: 1;
        margin-top: 20%;
    }

    input {
        width: 100%;
        text-align: center;
        border-radius: 21px 21px 21px 21px;
    }

    input[type="text"] {
        width: 100%; /* Verhindert das Überlaufen der Suchbox */
    }
}

/* Tablet-Ansicht */
/* @media (min-width: 768px) */
@media (min-width: 577px) {
    #prdkt_inhalt {
        text-align: left;
        font: normal normal normal 30px/39px PT Sans;
        color: #6C8494;
        opacity: 1;
        margin: 2.5% 0 0 3%;
    }

    #wrnkrb_confirm_bttn_txt {
        /* Layout Properties */
        margin-top: 5%;
        height: 1.813em;
        font: normal normal normal 19px/30px PT Sans;
        /* UI Properties */
    }

    .datenschutz-text {
        font-size: 13px;
    }

    .datum-container, .uhrzeit-container, .teilnehmer-container, .produkte-container { width: 170px; }

    .middle-container {
        max-width: 45em;
    }
    
    .desktop-navbar { width: 60%; }

    .mobile-navbar { display: none; }

    .navpic { float: left; }

    .page-categories .categorie_m_symbol {
        margin-top: 4.5%;
    }

    /* TODO: gucken was das macht */
    .page-categories .clothimg { height: 12.5em; }

    .page-categories .clothimg img {
        height: 12.5em;
        width: 10em;
    }

    .page-categories .outerbox { width: fit-content; }

    .prdkt_inhalt {
        width: 55%;
        height: 436px; color: #6C8494;
        background: #ECE4DB no-repeat padding-box;
        border: 1px solid #707070;
        border-radius: 21px;
        opacity: 1;
        margin: 0 5% 3% auto;
    }

    .prdkt_pic {
        width: 70%;
        margin-left: 15%;
        margin-right: 15%;
    }

    .prdkt_pic_all {
        width: 25%;
        float: left;
    }

    .prdkt_pic_pic { 
        padding-bottom: 15%; 
        float: left;
    }

    .prdkt_titel {
        width: 55%;
        height: 80px;
        margin: 5% 5% 5% auto;
    }

    .textbox_bg {
        /* Layout Properties */
        width: 80%;
        margin: 15% auto auto;
    }

    .wrnkrb_artikel { display: flex; }
 
    .wrnkrb_confirm_bttn {
        margin-right: 2.5%;
        width: 80%;
        height: 2.375em;
        padding: 0 6% 0 6%;
    }

    :hover.categorie_m_symbol { background: #dce5ec; }
}

/* Desktop-Ansicht */
@media (min-width: 992px) {
    #prdkt_titel { margin-right: 8%; }

    #wrnkrb_confirm_bttn_txt {
        /* Layout Properties */
        margin-top: 5%;
        height: 1.813em;
        font: normal normal normal 19px/30px PT Sans;
        /* UI Properties */
    }

    #wrnkrb_list_txt {
        font: normal normal normal 17px/22px PT Sans;
    }

    #wrnkrb_trash { width: 75%; }

    .datum-container, .uhrzeit-container, .teilnehmer-container, .produkte-container { width: 250px; }

    .desktop-navbar {
        width: 50%;
        display: flex;
    }

    .footer-container { display: block; }

    .img-zoom-result { height: 60%; }

    .m-footer-container{ display: none; }

    .middle-container { 
        max-width: 45rem; 
        min-width: 1000px;
    }

    .prdkt_bttn_bg { margin: 1% 5% 1%; }

    .prdkt_pic {
        width: 90%;
        margin-left: 10%;
        margin-right: 10%;
        height: auto;
        display: flex;
        object-fit: contain;
    }

    .prdkt_pic_all {
        width: 30%;
        float: left;
    }

    .prdkt_pic_pic {
        height: auto;
        max-height: 150%;
        display: flex;
        overflow: hidden;
        justify-content: center;
        align-items: center;
    }

    .search-container { width: 50%; }

    .textbox { max-width: 50%; }

    .textbox_bg{
        /* Layout Properties */
        width: 65%;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10%;

        /* UI Properties */
        background: rgba(246, 246, 246, 1);
        border: 2px solid #707070;
        border-radius: 1.3125em;
        padding-right: 1%;
    }

    .wrnkrb_artikel {
        /* Layout Properties */
        margin: auto;
        width: 39%;
        height: 9.5em;
        /* UI Properties */
        background: #F6F6F6 0% 0% no-repeat padding-box;
        border: 4px solid #738A99;
        border-radius: 27px;
        opacity: 1;
        padding: 0.5%;
        margin-bottom: 1%;
        display: flex;
    }

    .wrnkrb_artikel_bttn {
        /* Layout Properties */
        float: right;
        margin: auto;
        width: 15%;
        height: 9.5em;
        display: flex;
        justify-content: center;
        align-items: center;

        /* UI Properties */
        background: #D85841 0% 0% no-repeat padding-box;
        border-radius: 29px;
        opacity: 1;
    }

    .wrnkrb_artikel_pic {
        margin-top: 0%;
        width: auto;
        height: 9.4em;
    }

    .wrnkrb_artikel_txt {
        margin: auto;
        margin-left: 5%;
        /* Layout Properties */
        top: 476px;
        left: 711px;
        width: 634px;
        height: 157px;
        /* UI Properties */
        text-align: left;
        letter-spacing: 0px;
        color: #033375;
        opacity: 1;
    }

    .wrnkrb_confirm{
        width: 40%;
        height: 2.938em;
        justify-content: right; /* horizontal zentrieren */
        align-items: center;
    }

    .wrnkrb_confirm_bttn{
        margin-right: 2.5%;
        width: 30%;
        height: 2.375em;
        padding: 0 6% 0 6%;
    }

    .wrnkrb_list{
        /* Layout Properties */
        width: 40%;
        height: 2.938em;
        margin: auto;
        margin-top: 10%;
        margin-bottom: 1%;
        /* UI Properties */
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 4px solid #7B919F;
        border-radius: 29px;
    }


}

/* Große Desktop-Ansicht */
@media (min-width: 1400px) {
    #wrnkrb_confirm_bttn_txt { margin-top: 2%; }

    #wrnkrb_pic { margin: auto 0 auto 2%; }

    #wrnkrb_trash { width: 45%; }

    .datum-container { width: 300px; }

    /* TODO: evaluieren bzw. testen */
    .img-zoom-result {
        width: 22.3%;
        height: 44.6%;
       /*height: 54%;*/
    }

    .middle-container { max-width: 55rem; }

    .page-categories .categorie { display: flex; }

    .page-categories .categorie_m_symbol { display: none; }

    .prdkt_pic {
        width: 55%;
    }

    .wrnkrb_artikel_bttn { 
        width: 10%; 
        height: 9.5em;
    }

    .wrnkrb_artikel_pic {
        margin-top: 0%;
        width: 16%;
        height: 100%;
    }
}