/* Diese Datei wird automatisch erstellt. Nicht direkt bearbeiten. */



/* === mystyle_base.css === */
/** Allgemeine Formatierungen
 * Grundlayout, Typographie, Farben, Buttons, Listen
 * Author: Julian Spangenberg
 */
/* Basis Elemente*/
html {
    /* Farben als css variablen für leichtere Anpassbarkeit und Übersicht 
	 * Verwenden mit var(--variablenname)
	 */
    /* --color-primary: #4E7A3D; */
    /* --color-primary-rgb: 78, 122, 61; */
    /* green */
    /* --color-secondary: #4b3d18; */
    /* --color-secondary-rgb: 75, 61, 24; */
    /* brown */
    /* --black: #2c2c2c; aktuell nicht verwendet */
    /* --color-background: #f9e9d1; */
    /* --color-background-rgb: 249, 233, 209; */
    /* bg */
    --color-section: #ffffff;
    /* white */
    --color-shadow-black-rgb: 60, 60, 60;
    --color-shadow-brown-rgb: 116, 70, 37;

    display: block;
    box-sizing: border-box;
    position: relative;
    margin: 0;
    font-size: 20px;
}

html * {
    box-sizing: border-box;
}

body {
    background-color: var(--color-background);
    display: block;
    margin: 0;
    color: var(--color-secondary);
    font-family: "Teachers", sans-serif;
    position: relative;
}

.content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1em;
}

/**Text der von Logos/Icons abgedeckt wird*/
span.screen-text {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

/*Typographie*/
h1 {
    font-size: 3em;
    line-height: 1.2em;
    font-family: "Sour Gummy", sans-serif;
}

h2 {
    position: relative;
    display: inline-block;
    font-size: 2em;
    font-weight: 600;
    line-height: 1.1em;
    font-family: "Sour Gummy", sans-serif;
}

h2::after {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    bottom: -0.25em;
    border-bottom: solid 3px currentColor;
    width: 80%;
}

h2+p {
    font-size: 1.2em;
}

a {
    color: var(--color-primary);
}

/* Main Elemente*/
main {
    display: block;
}

main section {
    padding: 3em 1em;
    position: relative;
}

main section:first-child {
    padding-top: 6em;
}

main section.green {
    background-color: var(--color-primary);
    color: var(--color-section);
    min-height: 600px;
}

main section.white {
    background-color: var(--color-section);
    color: var(--color-secondary);
}

/* Listen */
ul {
    margin: 0;
    padding-left: 1em;
}

ul.grid {
    padding-left: 0;
    display: flex;
    font-family: "Sour Gummy", sans-serif;
}

.grid li {
    list-style: none;
    display: inline-flex;
    padding: 2em;
    max-width: 50%;
    flex: 1 1 50%;
}

.grid li a {
    width: 100%;
    overflow: hidden;
    background-color: var(--color-secondary);
    text-decoration: none;
    border-radius: 1em;
    box-shadow: rgba(var(--color-shadow-black-rgb), 0.15) 0 0 10px 0px;
    transform-origin: center center;
    transition: all ease-in-out 250ms;
    color: var(--color-section);
}

.grid li a:hover {
    transform: scale(0.98);
}

.grid li img {
    width: 100%;
    height: auto;
    display: block;
}

.grid .wrapper {
    display: block;
    padding: 0.75em 1em 1.25em;
    background-color: var(--color-secondary);
    text-align: center;
    position: relative;
}

.grid .latin-name {
    font-style: italic;
    color: var(--color-background);
    font-weight: 200;
}

.grid .price {
    position: absolute;
    top: 0;
    background-color: var(--color-primary);
    z-index: 333;
    left: 0;
    transform: translateY(-100%);
    padding: 0.5em 1em;
    border-radius: 0 1em 0 0;
    min-width: 8em;
}

.grid .wrapper h3 {
    margin: 0;
    color: var(--color-section);
    font-size: 1.25em;
    line-height: 1.75em;
}

/* Buttons */
.button {
    display: block;
    padding-top: 1em;
    font-family: "Sour Gummy", sans-serif;
}

.button.center,
button.center {
    text-align: center;
}

.button a,
button {
    color: var(--color-section);
    background-color: var(--color-primary);
    display: inline-block;
    padding: 0.75em 1.5em;
    border-radius: 0.5em;
    line-height: 1.25em;
    text-decoration: none;
    transition: all ease-in-out 250ms;
    text-align: center;
    font-size: 1em;
    outline: none !important;
    border: none !important;
}

.button a:hover,
button:hover {
    transform: scale(1.03);
}

/* === mystyle_header.css === */
/** Header Elemente
 * Author: Julian Spangenberg
 */
header {
    background-color: rgba(var(--color-background-rgb), 0.95);
    /* color-background mit 95% Transparenz*/
    box-shadow: rgba(var(--color-shadow-black-rgb), 0.2) 0px 5px 10px 2px;
    display: block;
    position: fixed;
    z-index: 999;
    inset: 0;
    height: 4em;
    font-family: "Sour Gummy", sans-serif;
}

header .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

header .logo {
    height: 5.75em;
    margin-top: 0.625em;
}

.logo a {
    display: block;
    height: 100%;
}

header .logo img {
    height: 100%;
    width: auto;
}

header nav {
    width: 50%;
}

header ul li {
    list-style: none;
    display: inline-flex;
    line-height: 1em;
}

header li.menu-item {
    position: relative;
    padding: 0.5em 1.5em;
    line-height: 1;
}

header li.menu-item a {
    text-decoration: none;
    color: var(--color-secondary);
    font-weight: 600;
    position: relative;
    transition: border ease-in-out 250ms;
}

header .menu-item+.menu-item {
    margin-left: 1em;
}

header li.menu-item:hover>a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    display: block;
    width: 100%;
    border-bottom: solid 3px var(--color-secondary);
}

header li.menu-item:hover .submenu {
    display: block;
}

header .submenu {
    display: none;
    position: absolute;
    top: 100%;
    background-color: var(--color-primary);
    border-radius: 0.5em;
    box-shadow: rgba(var(--color-shadow-black-rgb), 0.1) 0 2px 10px 5px;
    width: 100%;
    text-align: center;
    left: 0;
    padding: 0.5em 0;
}

header .submenu li+li {
    margin-top: 0.25em;
    border-top: dashed 1px var(--color-background);
}

header .submenu li a {
    padding: 0.5em 1em;
    color: var(--color-background);
}

header .submenu li a:hover {
    text-decoration: underline;
}

header li.warenkorb {
    margin-left: 1em;
    position: relative;
}

.warenkorb a {
    text-decoration: none;
    color: var(--color-secondary);
}

header li.warenkorb a::before {
    content: "";
    background-image: url("../images/icon_warenkorb_leer.svg");
    width: calc(2.5em * 1.356);
    height: 2.5em;
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    vertical-align: middle;
}

header li.warenkorb a.has-items::before {
    background-image: url('../images/icon_warenkorb_voll.svg');
}

header .cart-count {
    position: absolute;
    left: 4px;
    top: -10px;
    background-color: rgba(var(--color-background-rgb), 0.28);
    /* color-background mit 28% Transparenz (Hex 47 = Dezimal 71; 71 / 255 = 0.28*/
    border-radius: 50%;
    padding: 0.2em;
    color: var(--color-secondary);
    /*backdrop-filter: blur(2px);*/
    width: 28px;
    height: 28px;
    text-align: center;
}

header li.info a {
    color: var(--color-primary);
}

/* === mystyle_forms.css === */
/* Fomulare */
/* Author: Annabell Attmer */
.content.form input:not([type="radio"]):not([type="checkbox"]) {
    background-color: rgba(var(--color-primary-rgb), 0.5);
    color: var(--color-secondary);
    border: 1px solid var(--color-secondary);
    padding: 0.75em 1em;
    border-radius: 0.5em;
}

/* Author: Johanna Hamel */
.content.form form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 620px;
    width: min(100%, 620px);
    margin: 0;
}

.content.form form>div {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.content.form .button {
    width: min(100%, 620px);
    margin: 0;
}

.content.form .button a {
    display: block;
    width: 100%;
}

.content.form label,
.content.form p {
    font-weight: 600;
    margin: 0;
}

.content.form input[type="text"],
.content.form input[type="password"],
.content.form input[type="email"],
.content.form input[type="number"],
.content.form input[type="tel"],
.content.form textarea,
.content.form select {
    width: 100%;
    margin-top: 0.2rem;
    font-size: 0.8rem;
    line-height: 0.75rem;
}

.content.form .radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.content.form .radio-group label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 400;
}

.content.form input[type="radio"] {
    margin: 0;
}

/*Author: Annabell Attmer */
.content.form input[type="submit"] {
    text-align: center;
    font-family: "Sour Gummy", sans-serif;
    color: var(--color-section);
    background-color: var(--color-primary);
    display: inline-block;
    padding: 0.75em 1.5em;
    text-decoration: none;
    transition: all ease-in-out 250ms;
    border-radius: 0.5em;
    border: none;
    font-size: medium;
    width: 100%;
}

.content.form input[type="submit"]:hover {
    transform: scale(1.03);
}

/*Textarea*/
textarea {
    background-color: rgba(var(--color-primary-rgb), 0.5);
    color: var(--color-secondary);
    border-width: 1px;
    border-color: var(--color-secondary);
    padding: 0.75em 1.5em;
    border-radius: 0.5em;
    font-family: "Teachers", sans-serif;
}

input[type="number"] {
    background-color: rgba(var(--color-primary-rgb), 0.5);
    color: var(--color-secondary);
    border-width: 1px;
    border-color: var(--color-secondary);
    padding: 0.75em 1.5em;
    border-radius: 0.5em;
    font-family: "Teachers", sans-serif;
}

/* Julian: Error Message Formular*/
.error-message.content {
    border: solid 3px red;
    border-radius: 3px;
    font-weight: 600;
}

/* === mystyle_footer.css === */
/* Footer Elemente 
* Author: Julian Spangenberg
*/
footer {
    background-color: var(--color-primary);
    color: var(--color-section);
}

footer .content {
    text-align: center;
}

.copyright {
    display: inline-block;
    color: var(--color-primary);
    position: relative;
    z-index: 200;
    margin-right: 0.5em;
}

.copyright::before {
    content: "";
    background-image: url("../images/icon_copyright.svg");
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: 1.25em;
    height: 1.25em;
    z-index: -1;
    transform: translate(-50%, -50%);
    background-repeat: no-repeat;
    background-size: cover;
}

.ki-disclaim {
    color: var(--color-secondary);
}

/* === mystyle_index.css === */
/* Author: Annabell Attmer */
/* Einzelseiten: Startseite */
.start .hero {
    box-shadow: inset rgb(var(--color-shadow-brown-rgb), 0.35) 0 -10px 10px 0;
    overflow-x: clip;
}

.start .hero img {
    position: absolute;
    right: calc((100vw - 1400px) / 2);
    width: 500px;
    top: 7em;
}

.start .hero h1 {
    font-size: 5em;
    line-height: 1.1em;
    font-weight: 800;
    color: var(--color-primary);
}

.start .hero p {
    font-size: 1.5em;
}

/* === mystyle_product.css === */
/* Author: Julian Spangenberg
 * Einzel–Produktseite */
main.product-page section.product {
    padding-bottom: 2em;
}

.product-page section.product .content {
    display: flex;
    flex: 1 1 50%;
    gap: 2em;
}

.product-page section.product .content>div {
    max-width: 50%;
}

.product-page section+section {
    padding-top: 2em;
}

.product-page .product-image {
    position: relative;
}

.product-page .product-image img {
    max-width: 100%;
    border-radius: 1em;
}

.product-page .zoom-btn {
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--color-primary);
    z-index: 20;
    padding: 0.25em;
    border-radius: 1em 0;
}

.product-page .product-image .zoom-btn img {
    width: 1.5em;
    height: auto;
    display: block;
}

.product-page .product-details {
    padding: 0 1em;
    display: block;
}

.product-details h1 {
    margin-top: 0;
    margin-bottom: 0.2em;
    font-size: 2.5em;
}

.product-page h2 {
    margin-top: 0;
}

.product-page .latin-name {
    font-size: 1.55em;
    font-style: italic;
    font-family: "Sour Gummy";
    font-weight: 300;
    color: rgba(var(--color-primary-rgb), 0.8);
}

/* Preistabelle Produktseiten 
 * Struktur wird für Preisberechnung per JavaScript benötigt
*/
.product-details .price-wrapper {
    padding: 2em 0em 1em;
}

.product-details .price-wrapper table {
    border-spacing: 0;
    width: 100%;
}

.product-details .price-wrapper thead th {
    border-bottom: solid 1px var(--color-secondary);
    padding: 0.25em 1em 0.25em 0.5em;
    text-align: left;
}

.product-details .price-wrapper tbody td {
    text-align: right;
    padding: 0.5em 1em 0.25em;
}

.product-details .price-wrapper thead th+th,
.product-details .price-wrapper tbody td+td {
    border-left: dashed 1px var(--color-secondary);
}

.product-features {
    margin-top: 2.65em;
    padding: 1em 1.5em;
    background-color: rgba(var(--color-primary-rgb), 0.29);
    border-radius: 1em;
}

.product-features h2 {
    font-size: 1.5em;
}

.product-features ul {
    padding: 0;
    list-style: none;
    margin: 0;
}

.product-features ul li {
    padding: 0.25em 0;
}

.product-features ul li span {
    font-weight: 600;
}

/*
 * Modal
 */
#modal {
    position: fixed;
    z-index: 1000;
    inset: 0 0 0 0;
    background-color: rgba(var(--color-secondary-rgb), 0.66);
    padding: 1em;
    display: none;
    max-height: 100vh;
}

.modal-control {
    position: relative;
    display: flex;
    width: 100%;
    justify-content: flex-end;
}

#modal-content {
    position: relative;
    padding: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 6em);
}

#modal-content>img {
    height: 100%;
    border-radius: 1em;
}

/* === mystyle_darkmode.css === */
/* Author: Chiara Bunk */
/* Dark Mode */
body.dark-mode {
    --color-primary: #1a1a1a;
    /* green*/
    /* --black: #f5f5f5; aktuell nicht verwendet */
    --color-secondary: #9d9482;
    /* brown */
    --color-background: #314c27;
    /* bg */
    --color-section: #dcdcdc;
    /* white */

    /*background-color: var(--color-background);
	color: var(--color-secondary);*/
}

body.dark-mode header {
    background-color: var(--color-background);
}

/* Dark Mode Button */
header li.dark-mode a::before {
    content: "";
    background-image: url("../images/icon_darkmode.svg");
    width: 1.5em;
    height: 1.5em;
    margin-left: 2px;
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    vertical-align: middle;
}

header li.dark-mode {
    margin-left: 1em;
    position: relative;
}

/* === mystyle_layout.css === */
/* Author: Chiara Bunk */
/* Layout Horizontal/Vertikal */
/* Desktop: Horizontal */
.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* Mobile: Vertikal */
@media (max-width: 750px) {
    .container {
        grid-template-columns: 1fr;
    }

    .auth-actions {
        flex-direction: column;
    }
}

/* === mystyle_checkout.css === */
/* Author: Johanna Hamel 
 * Checkout-Seiten: Warenkorb, Login/Registrierung, Adresse, Zahlung
 */
/* Cart-Layout */
.cart-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
}

.cart-table th,
.cart-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-secondary);
}

/* Preis-Spalten rechtsbündig */
.cart-table th:nth-child(2),
.cart-table td:nth-child(2),
.cart-table th:nth-child(3),
.cart-table td:nth-child(3),
.cart-table th:nth-child(4),
.cart-table td:nth-child(4) {
    text-align: right;
}

.cart-summary {
    width: 300px;
    margin-left: auto;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-secondary);
}

.summary-row.total {
    font-weight: bold;
    font-size: 1.25em;
    border-bottom: 2px solid var(--color-secondary);
    margin-top: 0.5rem;
}

.summary-row.total h3 {
    margin: 0;
    padding: 0;
    font-size: 1.3rem;
    font-weight: bold;
}

/* Checkout Login/Registrierung */
.auth-actions {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 2rem;
    padding-left: 1.5rem;
}

.auth-actions .auth-box {
    flex: 1 1 45%;
    min-width: 220px;
}

.auth-actions .auth-box .button {
    margin-top: 0rem;
}

/* Checkout: Adresse */
.hidden {
    display: none !important;
}

#paymentForm p,
#addressForm p {
    font-weight: 300;
    font-size: 0.8em;
}

.content.form .paymentForm .content.form .addressForm {
    width: 100%;
    flex: 1 1 100%;
}

/* === mystyle_validation.css === */
/* Author: Johanna Hamel */
/* Fomular Validierung */
.content.form input.korrekt {
    border: 2px solid green;
}

.content.form input.fehler {
    border: 2px solid red;
}

.form-response {
    margin-bottom: 1.5em;
    font-weight: 600;
    font-size: 1.2em;
}