/*
  Definitionen
 */
html
{
    background-color: var(--hintergrundfarbe, #D44208);
    color: var(--textfarbe, #FFFFFF);
}

body
{
    color: var(--textfarbe, #FFFFFF);
    background-color: var(--hintergrundfarbe, #D44208);
    background: linear-gradient(var(--hintergrundWinkel, 135deg), var(--hintergrundStartGradient, #F27E2E), var(--hintergrundfarbe, #D44208));
    min-height: 100vh;
    display: grid;
    /*
    background-image: url('/Bierratgeber_war/images/kunden/guenter/hintergrund.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-attachment: fixed;
    background-size:cover;
    z-index: -10;
	
	background-color: DeepSkyBlue; 
	background-image: linear-gradient(white, DeepSkyBlue);
	color: midnightblue;
	min-height: 100vh;
	display: grid;
	grid-template-rows: 1fr 8em;
    */
}

button
{
    background-color: var(--hintergrundButtonLink, #F09415);
    color: var(--farbeButtonLink, #000000);
    font-size: unset;
    text-align: unset;
    text-decoration: unset;
    font-weight: unset;
    display: unset;
    height: unset;
    border: 0;
    border-radius: 0;
    box-shadow: 0 0 0 0 var(--farbeBoxShadow);
    margin: 0;
    padding: 0;
}

h1, h2, h3
{
 color: var(--farbehx);
}

td
{
  vertical-align: top;
}

input[type=submit]
{
    background-color: var(--hintergrundfarbe, #D44208);
    color: var(--farbeButtonLink, #000000);
    border-style: none;
    border-width: 0;
    border-color: transparent;
    padding: 0.2em 0.1em 0.2em 0.1em;
    margin: 0;
    font-size: large;
    cursor: pointer;
}

input[type=submit].submitbuttonsuche
{
    padding: 0.4em 0.2em 0.4em 0.2em;
    font-size: x-large;
    font-weight: bolder;
}

.custom-select {
    position: relative;
    background-color: var(--hintergrundfarbe, #D44208);
    padding: 0.4em 0.1em 0.4em 0;
    margin: 0;
    border-style: solid;
    border-width: 0 2px 0 1px;
    border-color: #000000;
}

.custom-select select {
    display: none; /*hide original SELECT element: */
}

.select-selected {
    background-color: var(--hintergrundfarbe, #D44208);
    min-width: 19em;
    max-width: 19em;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* Style the arrow inside the select element: */
.select-selected:after {
    position: absolute;
    top: 14px;
    right: 10px;
    width: 0;
    height: 0;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
    border-color: transparent transparent #fff transparent;
    top: 7px;
}

/* style the items (options), including the selected item: */
.select-items div, .select-selected {
    padding: 8px 16px;
    background-color: var(--hintergrundfarbe, #D44208);
    cursor: pointer;
}

/* Style items (options): */
.select-items {
    position: absolute;
    background-color: var(--hintergrundButtonLink, #D44208);
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* Hide the items when the select box is closed: */
.select-hide {
    display: none;
}

.select-items div:hover, .same-as-selected {
    background-color: var(--hintergrundButtonLink, #D44208);
}

.kundebackgroundcolor
{
    background-color: var(--hintergrundfarbe, #D44208);
}

.footer {
    background-color: var(--hintergrundFooter, #000000);
    height: auto;
}

.hintergrundimg
{
    width: available;
    min-height: 100vh;
    background-image: url('../../../images/kunden/guenter/hintergrund.png');
    background-repeat: no-repeat;
    background-position: top right;
    z-index: -10;
}

a:link, a:visited, a:hover, a:active {
    color: var(--farbeLink, #000000);
}

a.linktext
{
    color: var(--farbeLinkText, #000000);
    background-color: var(--hintergrundButtonLink, #F09415);
}

.linktabellenspaltebg
{
    background-color: var(--hintergrundButtonLink, #F09415);
}

.buttonlink
{
    background-color: var(--hintergrundButtonLink, #F09415);
    color: var(--farbeButtonLink, #000000);
    font-weight: bold;
    width: 48vw;
    min-width: max-content;
    padding: 15px 32px;
    margin: 2px;
    text-align: center;
    text-decoration: none;
    border: 1px solid white;
}

.buttonmini
{
    background-color: var(--hintergrundFooter, #000000);
    color: var(--farbeButtonLink, #000000);
}

.contentlinkliste
{
    display: grid;
    grid-template-columns: 50% 50%;
    grid-gap: 0.8em;
}

.contentlinkstart
{
    background-color: var(--hintergrundButtonLink, #F09415);
    display: inline-block;
    height: 1.3em;
    margin: 0;
    padding: 1em 0.1em 0.7em 0.5em;
    border-radius: 0;
    box-shadow: 0 0 0 0 var(--farbeBoxShadow);
    text-align: left;
    text-decoration: none;
    font-weight: bold;
    font-size: x-large;
    color: var(--farbeButtonLink, #000000);
    cursor: pointer;
}

.contentlinkstart img
{
    height: 1em;
}

.contentbild img
{
    box-shadow: 8px 8px 10px var(--farbeBoxShadow);
    border-radius: 2em;
}

.tableh2
{
    background-color: var(--hintergrundButtonLink, #F09415);
    font-size: xx-large;
    font-weight: bold;
    width: max-content;
}

.tableh3
{
    font-size: x-large;
    font-weight: bold;
}

.tablenavi
{
    background-color: var(--hintergrundFooter, #000000);
    color: var(--textfarbe, #FFFFFF);
    width: 99%;
    position: relative;
    height: max-content;
    border: 1px;
    font-size: x-large;
    font-weight: bolder;
}

.tablenavilink
{
    color: var(--textfarbe, #FFFFFF);
}

.tablefooter
{
    width: 100%;
    border: 0;
}

.tablefooter td
{
    font-size: x-large;
    font-weight: bolder;
    background-color: var(--hintergrundFooter, #000000);
    color: var(--textfarbe, #FFFFFF);
}

.tablefooter td a
{
    color: var(--textfarbe, #FFFFFF);
}

.selectsuchegrid
{
    min-width: 15em;
    max-width: 15em;
}

.checkboxgroup{
    grid-template-columns: 2em 6em;
    border: 1px solid var(--farbeButtonLink, #000000);
}

.schaltersuche
{
    background-color: var(--hintergrundfarbe, #D44208);
    text-align: center;
    font-weight: bolder;
    font-size: large;
    padding: 0.2em;
    margin: 0;
}

#menuToggle
{
    display: block;
    position: fixed;
    top: 0;
    max-width: 60em;
    width: 100%;

    z-index: 1;

    user-select: none;
}

#menuToggle a
{
    text-decoration: none;
}

#menuToggle a:hover
{
    color: var(--farbeMenuToggle, #F09415);
}

#menuToggle input
{
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;

    cursor: pointer;

    opacity: 0; /* hide this */
    z-index: 2; /* and place it over the hamburger */

    -webkit-touch-callout: none;
}

#menuToggle span
{
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;

    background: var(--hintergrundMenuToggleSpan, #FFFFFF);
    border-radius: 3px;

    vertical-align: top;
    vert-align: top;

    z-index: 1;

    transform-origin: 4px 0;

    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
    background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
    opacity 0.55s ease;
}

#menuToggle span:first-child
{
    transform-origin: 0 0;
}

#menuToggle span:nth-last-child(2)
{
    transform-origin: 0 100%;
}

#menuToggle input:checked ~ span
{
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: var(--farbeMenuToggle, #FFFFFF);
}

#menuToggle input:checked ~ span:nth-last-child(3)
{
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
    transform: rotate(-45deg) translate(0, -1px);
}

#menu
{
    position: absolute;
    width: fit-content;
    margin: -100px 0 0 -50px;
    padding: 50px;
    padding-top: 125px;
    top: 1em;
    left: 1em;

    background-color: var(--hintergrundButtonLink, #F09415);
    background: linear-gradient(to bottom, var(--hintergrundStartGradient, #F09415), var(--hintergrundfarbe, #D44208));

    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */

    transform-origin: 0 0;
    transform: translate(-500em, 0);

    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
    padding: 10px 0;
    border-top: 1px solid var(--farbeButtonLink, #000000);
    font-size: x-large;
    font-weight: bolder;
}

#menuToggle input:checked ~ ul
{
    transform: none;
}