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

:root {
    --border-radius: 6px;

    --box-shadow: rgba(197,197,197,0.5) 0px 1px 4px 0px;
    --text-shadow: 0px 1px 4px rgba(197,197,197,1);

    --transition: 0.25s;
    --ani-fade-out: fadeOutElement 0.5s 5s linear forwards, hideElement 0s 5.5s forwards;
    --ani-timer: timer 5s 0s linear forwards;

    --rem-xs: 0.5rem;
    --rem-s: 1rem;
    --rem-m: 1.25rem;
    --rem-xm: 1.5rem;
    --rem-l: 2rem;
    --rem-xl: 2.5rem;
    --rem-xxl: 3rem;
    --rem-4s: calc(4 * var(--rem-s));
    --rem-5s: calc(5 * var(--rem-s));
    --rem-6s: calc(6 * var(--rem-s));

    --ff-primary: "Roboto", sans-serif;
    --ff-accent: "Roboto", sans-serif;

    --fs-small: clamp(var(--rem-xs), 0.5vw, var(--rem-s));
    --fs-normal: clamp(var(--rem-s), 1vw, var(--rem-m));
    --fs-big: clamp(var(--rem-m), 1.25vw, var(--rem-xm));
    --fs-xbig: clamp(var(--rem-xm), 1.5vw, var(--rem-l));
    --fs-xxbig: clamp(var(--rem-l), 1.5vw, var(--rem-xl));

    --fw-light: 100;
    --fw-normal: 300;
    --fw-bold: 400;
    --fw-xbold: 500;
    --fw-xxbold: 700;

    --clr-primary: #3a3a3a;
    --clr-secondary: #989697;
    --clr-secondary-light: #f5f5f5;
    --clr-primary-inverted: #fff;
    --clr-accent: #003c69;
    --clr-accent-dark: #ff9b00;

    --clr-white: white;
	--clr-white-trans: rgba(255,255,255,0.5);
	--clr-accent-trans: rgba(0,60,105,0.65);
    --clr-border-trans: rgba(0,0,0,0.35);

    --clr-background: var(--clr-secondary-light);
    --clr-accent-light: #d6d6d6;
}

@keyframes fadeOutElement {
    to {
        visibility: hidden;
        opacity: 0;
    }
}

@keyframes hideElement {
    to {
        width: 0;
        height: 0;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }
}

@keyframes timer {
    to {
        transform: scaleX(0);
    }
}

*, *::before, *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

a, :hover {
    transition: var(--transition);
    /*-webkit-appearance: none;*/
    outline: none;
}

b, strong { font-weight: var(--fw-xbold); }

body {
    color: var(--clr-primary);
    background-color: var(--clr-background);
    font-family: var(--ff-primary);
    font-weight: var(--fw-normal);
    font-size: var(--fs-normal);
    line-height: 1.5;
}

body, h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-accent);
    font-weight: var(--fw-bold);
    line-height: 1;
    margin-top: 1.5em;
    margin-bottom: 1em;
}

    h1, h2 {
        display: flex;
        gap: var(--rem-xs);
        align-items: center;
    }

    h1:first-of-type, h2:first-of-type, h3:first-of-type, h4:first-of-type, h5:first-of-type, h6:first-of-type {
        margin-top: 0;
    }

        h1.sticky {
            position: sticky;
            top: 0;
            background: white;
            z-index: 9999;
            padding: var(--rem-l) 0 1em 0;
            margin-top: calc(0px - var(--rem-l));
            margin-bottom: 0;
        }

    h2 {
        font-size: inherit;
        font-weight: var(--fw-xbold);
    }

button:has(i[class*="trash"]), button:has(i[class*="xmark"]), a:has(i[class*="trash"]), a:has(i[class*="xmark"]), a:has(i[class*="toggle-off"]) {
    background-color: #d8000c !important;
}

button:has(i[class*="check"]), a:has(i[class*="check"]), a:has(i[class*="toggle-on"]) {
    background-color: #270 !important;
}

p {
    margin-bottom: 1em;
}

p:last-child {
    margin-bottom: 0;
}

table, .table {
    display: table;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    width: 100%;
}

    table tr, .tr {
        display: table-row;
    }

    table th, .th {
        display: table-cell;
        font-weight: var(--fw-xbold);
        text-align: left;
        padding: 8px 5px;
        border-bottom: 2px #f0f0f0 solid;
    }

    table td, .td {
        display: table-cell;
        padding: 8px 5px;
        border-top: 1px #f0f0f0 solid;
        white-space: nowrap;
        vertical-align: middle;
    }

    table td.right, .td.right, table th.right, .th.right, section#content table th.right {
        text-align: right;
    }

	table td.flex, .td.flex, table td div.flex, .td div.flex {
		display: flex;
		align-items: center;
		gap: var(--rem-xs);	
	}

img {
    max-width: 100%;
}

.logo_gross {
    margin-bottom: var(--rem-xxl);
    max-height: 35px;
}

div.roundedimg {
    background-position: 50%;
    background-size: cover;
    /*height: 160px;*/
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-primary-inverted);
    background-color: var(--clr-primary);
}

.thumb {
    width: 80px;
    height: 80px;
}

div.logon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100vh;
    gap: var(--rem-l);
}

    div.logon div.form {
        display: flex;
        flex-direction: column;
        max-width: 260px;
        background-color: var(--clr-primary-inverted);
        padding: var(--rem-l);
        box-shadow: var(--box-shadow);
        border-radius: var(--border-radius);
        text-align: center;
    }

button.button, a.button:link, a.button:visited, input[type=submit], button[type=submit], span.button, .custom-file-input {
    padding: var(--rem-xs) var(--rem-s);
    background-color: var(--clr-accent);
    color: var(--clr-primary-inverted) !important;
    text-decoration: none;
    border: none !important;
    font-family: var(--ff-primary);
    font-size: var(--fs-normal);
    font-weight: var(--fw-normal);
    cursor: pointer;
    border-radius: var(--border-radius);
    display: inline-block;
}

	button.disabled, span.button.disabled {
		background-color: var(--clr-background);
		cursor: not-allowed;
	}

button.button:hover, a.button:hover, a.button:active, input[type=submit]:hover, form button[type=submit]:hover, .custom-file-input {
    filter: grayscale();
}

.split {
    display: flex;
    flex-direction: row;
    gap: var(--rem-l);
}

    .split > * {
        width: 50%;
    }

form.inline input, form.inline select, form.inline textarea, input.inline, select.inline, textarea.inline {
    margin-bottom: 0 !important;
    /*width: auto;*/
    font-size: smaller !important;
    padding: 0.5em 5px !important;
}

form.inline td, form.inline .td {
    white-space: normal;
}

input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=date],
input[type=time],
select,
textarea, 
.tox-tinymce {
    transition: background-color var(--transition);
    -webkit-appearance: none;
    width: 100%;
    padding: 0.5em;
    margin-bottom: 0.5em;
    font-size: var(--fs-normal) !important;
    font-family: var(--ff-primary) !important; 
    font-weight: var(--fw-normal) !important;
    border-radius: var(--border-radius) !important;
    background: #fdfdfd;
    border: 1px solid #e8e8e8 !important;
    outline: none;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=number]:focus,
input[type=date]:focus,
input[type=time]:focus,
select:focus,
textarea:focus {
    background: #f6f6f6;
}

textarea {
    height: 15em;
    resize: vertical;
}

input[type=number] {
    text-align: right;
}

::-webkit-input-placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder {
    color: var(--clr-secondary) !important;
}

label > input { /* HIDE RADIO */
    visibility: hidden; /* Makes input not-clickable */
    position: absolute; /* Remove input from document flow */
}

label > input + span { /* IMAGE STYLES */
    cursor:pointer;
    border:3px solid transparent;
}

label > input:checked + span { /* (RADIO CHECKED) IMAGE STYLES */
    border:3px solid #353535;
}

.rate {
    display: inline-block;
    width: 175px;
    height: 40px;
    text-align: center;
    border-radius: var(--border-radius);
    line-height: 34px;
    box-shadow: var(--box-shadow);
    margin: 8px 12px 8px 0px;
}

    .radio {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin: 0;
    }

    .checkbox {
        width: 20px;
        height: 20px;
        margin: 0;
    }

.input_container {
    border: 1px solid #e8e8e8;
    border-radius: var(--border-radius);
    display: flex;
    /*max-width: 83%;*/
}

    input[type=file] {
        background-color: #fdfdfd;
        padding: var(--rem-xs) var(--rem-s);
        font-family: var(--ff-primary);
        font-size: var(--fs-normal);
        font-weight: var(--fw-normal);
        border-radius: var(--border-radius);
        display: flex;
        align-self: center;
    }

    input[type=file]::file-selector-button {
        display: none;
    }

    .input_container > label {
        background-color: var(--clr-accent);
        color: white;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        cursor: pointer;
        font-family: var(--ff-primary);
        font-size: var(--fs-normal);
        font-weight: var(--fw-normal);
    }

    .input_container > label:hover {
        filter: grayscale(1);
    }    

#sidebar {
    width: 20%;
    min-height: 100vh;
    padding: var(--rem-l);
    background-color: var(--clr-primary-inverted);
    box-shadow: var(--box-shadow);
}

    #sidebar nav {
        position: sticky;
        top: var(--rem-l);
    }

    #sidebar ul {
        list-style-type: none;
        padding: 0;
    }

        #sidebar ul a {
            text-decoration: none;
            color: var(--clr-primary);
        }

        #sidebar ul a:hover {
            color: var(--clr-accent);
        }

            #sidebar ul a li {
                border-top: 1px var(--clr-background) solid;
                padding: var(--rem-xs) 0;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            #sidebar ul a:first-child li {
                border-top: none;
            }

                #sidebar ul a li i {
                    font-size: var(--fs-small);
                }
    
    #sidebar div {
        position: fixed;
        padding-bottom: var(--rem-l);
        bottom: 0px;
    }

        #sidebar div a:link, #sidebar div a:visited {
            color: var(--clr-primary);
            text-decoration: none;
            font-weight: var(--fw-bold);
        }

        #sidebar div a:hover, #sidebar div a:active {
            color: var(--clr-accent);
        }

#main {
    width: 80%;
    padding: var(--rem-l);
    display: flex;
    flex-direction: column;
    gap: var(--rem-l);
}

    #main a:link, #main a:visited {
        color: var(--clr-accent);
        text-decoration: none;
    }

    #main a:hover, #main a:active {
        color: var(--clr-primary);
        border-bottom: 2px var(--clr-primary) solid;
        transition: var(--transition);
    }

    #main>div {
        background-color: var(--clr-primary-inverted);
        padding: var(--rem-l);
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
    }

#bilder {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--rem-s);
}

    #bilder div.bild {
        height: 100px;
        background-position: 50%;
        background-size: cover;
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--rem-xs);
        gap: var(--rem-xs);
    }

        #bilder div.bild a, #bilder div.bild span {
            background-color: var(--clr-accent);
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            color: var(--clr-primary-inverted);
            text-decoration: none;
            padding: var(--rem-xs);
            width: 25px;
            height: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        #bilder div.bild a:hover, #bilder div.bild span:hover {
            filter: grayscale();
        }

ul.style2 {
    list-style: none;
    padding-left: 0;
    /*padding-top: 1em;*/
    margin: 0;
}

    ul.style2 > li {
        position: relative;
        padding: 0.7em 0 0.7em 0em;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        /*white-space: nowrap;
        overflow: hidden;*/
        display: flex;
        align-items: center;
        gap: var(--rem-l);
    }

        ul.style2 > li:before {
            position: absolute;
            left: 0;
            top: 0.35em;
            display: block;
            color: #3a71d8;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 1.4em;
        }

        ul.style2 > li > span {
            display: flex;
            gap: var(--rem-xs);
        }

        ul.style2 > li:first-child {
            padding-top: 0;
            border-top: none;
        }

            ul.style2 > li:first-child:before {
                top: 0;
            }
        
        ul.style2 > li:last-child {
            padding-bottom: 0;
        }

    ul.style2 a {
        text-decoration: none;
        color: #353535;
    }

        .shop ul.style2 a, #fancyWarenkorb ul.style2 a { width: auto !important; }

        ul.style2 a:hover {
            /*text-decoration: underline;*/
            border-bottom: none !important;
        }


/* Helpers */
/***********/

.message {
    width: 100%;
    padding: var(--rem-s);
    border-radius: var(--border-radius);
    display: flex;
    align-items: baseline;
    gap: var(--rem-s);
    text-align: left !important;

    animation: var(--ani-fade-out);
    transition: var(--transition);
}

    .error {
        background-color: #FFBABA;
        color: #D8000C;
    }

    .success {
        background-color: #DFF2BF;
        color: #270;
    }

    .info {
        background-color: #ecf7ff;
        color: #158df7;
    }

    .timer {
        margin-top: calc((var(--rem-s) + 3px) * -1);
        margin-bottom: var(--rem-xm);
        border-bottom-left-radius: var(--border-radius);
        padding-top: var(--rem-s);
        border-bottom-width: 3px;
        border-bottom-style: solid;

        animation: var(--ani-timer), var(--ani-fade-out);
        transition: var(--transition);
        transform-origin: left;
    }

        .timererror { border-color: #D8000C; }
        .timersuccess { border-color: #270; }
        .timerinfo { border-color: #158df7; }

.w25 {
    width: 25% !important;
}

.w50 {
    width: 50% !important;
}

.w70 {
    width: 70% !important;
}

.w75 {
    width: 75% !important;
}

.w100 {
    width: 100% !important;
}

.alignright {
	text-align: right !important;
}

.aligncenter {
    align-items: center !important;
}

.justify-center { justify-content: center !important; }

.secondary {
    color: var(--clr-secondary) !important;
}

.bgsecondary { background-color: var(--clr-secondary) !important; }
.bgsecondarylight { background-color: var(--clr-secondary-light) !important; }

.background {
    background-color: var(--clr-background) !important;
}

.whitegradient {
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 35%, rgba(255,255,255,1) 70%, rgba(255,255,255,1) 100%) !important;
}

.nobackground {
    background: none !important;
}

.noborder {
    border: none !important;
}

.nowrap {
    white-space: nowrap !important;
}

.nomargin {
    margin: 0 !important;
}

.wrap {
    white-space: normal !important;
}

.smallonly, .notice {
    display: none !important;
}

.hide {
    display: none !important;
}

.flex {
    display: flex;
}

.fleba25 { flex-basis: 25%; }
.fleba75 { flex-basis: 75%; }

.spacebetween {
    justify-content: space-between;
}

.column {
    flex-direction: column;
}

.littlegap {
    gap: var(--rem-xs) !important;
}

.nogap {
    gap: initial !important;
}

.marginTop {
    margin-top: 1.5em !important;
}

.textshadow {
    text-shadow: var(--text-shadow);
}

.gap-xs { gap: var(--rem-xs); }
.gap-s { gap: var(--rem-s); }
.gap-m { gap: var(--rem-m); }
.gap-xm { gap: var(--rem-xm); }
.gap-l { gap: var(--rem-l); }
.gap-xl { gap: var(--rem-xl); }
.gap-xxl { gap: var(--rem-xxl); }
.gap-4s { gap: calc(var(--rem-s) * 4); }
.gap-5s { gap: calc(var(--rem-s) * 5); }
.gap-6s { gap: calc(var(--rem-s) * 6); }


@media (max-width: 1024px) {
    #bilder {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1023px) {
    .bigonly {
        display: none !important;
    }

    .smallonly {
        display: block !important;
    }

    .notice {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100vw;
        height: 100vh;
        padding: var(--rem-xxl);
    }
}