:root {
    --checkbox-border-color: #ffffff;
    --checkbox-checked-color: #ffffff;
    --checkbox-hover-color: #2B4E98;
    --checkbox-disabled-bg-color: #ffffff;
}

input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
    width:23px;
    height:23px;
    margin: 6px;
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    border: 2px solid var(--checkbox-border-color);
    appearance: none;
    background-color: #ffffff;
    outline: none;
    transition: outline 0.1s;
    color: #ffffff;
}

input[type="checkbox"]:checked, input[type="radio"]:checked {
    background-size: cover;
    padding: 2px;
    color: #ffffff;
}

input[type="checkbox"]:not(:disabled):checked, input[type="radio"]:not(:disabled):checked {
    border-color: var(--checkbox-checked-color);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 32 32" xml:space="preserve"><path style="fill: %23274c77" d="M11.941,28.877l-11.941-11.942l5.695-5.696l6.246,6.246l14.364-14.364L32,8.818"/></svg>');
color: #ffffff;
}

input[type="checkbox"]:disabled, input[type="radio"]:disabled {
    background-color: var(--checkbox-disabled-bg-color);
    color: #ffffff;
}

input[type="checkbox"]:disabled:checked, input[type="radio"]:disabled:checked {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 32 32" xml:space="preserve"><path style="fill: %238b8c89" d="M11.941,28.877l-11.941-11.942l5.695-5.696l6.246,6.246l14.364-14.364L32,8.818"/></svg>');
color: #ffffff;
}

@media (hover: hover) {
    input[type="checkbox"]:not(:disabled):hover, input[type="radio"]:not(:disabled):hover {
        background-color: var(--checkbox-hover-color);
        outline: 6px solid var(--checkbox-hover-color);
        transform: scale(1.05);
color: #ffffff;
    }
}

input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
    outline: 6px solid var(--checkbox-hover-color);
    transform: scale(1.05);
}

form input[type="text"], form input[type="password"], form input[type="email"], form input[type="url"], form input[type="date"], form input[type="month"], form input[type="time"], form input[type="datetime"], form input[type="datetime-local"], form input[type="week"], form input[type="number"], form input[type="search"], form input[type="tel"], form input[type="color"], form select, form textarea {
    font-size: 18px;
    font-weight: 200;
}

fieldset, form fieldset {
        border: 2px solid #ffffff !important;
        border-radius: 6px !important;
}

#h1 { font-family: 'Fjalla One'; color:#ffffff; font-weight: 300;}

#tdl { text-align: left; padding: 4px 0;}
#tdr { text-align: right;}
#tdc { text-align: center; margin-left: auto; margin-right: auto;}

.tdl { text-align: left; padding: 4px 0;}
.tdr { text-align: right;}
.tdc { text-align: center;}

#tgb { font-weight: bold; color: green; }
#trb { font-weight: bold; color: red; }

#h3 { font-weight: bold; }

.nounderline {text-decoration:none;}
.weggezaubert {display:none;}

strong { font-family: 'Fjalla One'; color:#ffffff; font-size: 16px; font-weight: 200;}

a:link{ font-family: 'Fjalla One'; color:#ffffff; font-size: 16px; text-decoration:none;}
a:visited{ font-family: 'Fjalla One'; color:#ffffff; font-size: 16px; text-decoration:none;}
a:hover{ font-family: 'Fjalla One'; color:#ffffff; font-size: 16px; text-decoration:underline;}

.hinweis {max-width: 700px;};

/* Info Boxen */

.symbol {
    font-size: 1.2em;
    font-family: 'Fjalla One';
    border-radius: 1em;
    padding: .1em .6em .1em .6em;
    font-weight: bolder;
    color: white;
    background-color: #4E5A56;
}

.icon-info { background-color: #3229CF; }
.icon-error { background: #e64943; font-family: 'Fjalla One'; }
.icon-tick { background: #13c823; }
.icon-excl { background: #ffd54b; color: black; }

.icon-info:before { content: 'i'; }
.icon-error:before { content: 'X'; }
.icon-tick:before { content: '\002713'; }
.icon-excl:before { content: '!'; }

.notify {
    background-color:#e3f7fc;
    color:#555;
    border:.1em solid;
    border-color: #8ed9f6;
    border-radius:10px;
    font-family: 'Fjalla One';
    font-size: 14px;
    padding:5px 5px 5px 5px;
    margin:10px;
    cursor: default;
    vertical-align: middle;
}

.notify-yellow { background: #fffff7; border-color: #f7deae; }
.notify-red { background: #fff2f2; border-color: #fad9d7; }
.notify-green { background: #F0FFF0; border-color: #D1FAB6; }

.notify a  {
    color:#555;
    padding: 5px;
    text-decoration: none;
}
.notify a:hover  {
    text-decoration: underline;
}
.notify img  {
    padding: 5px;
    text-align: center;
}

.headmid {
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
}


input[type=button], input[type=reset], input[type=submit], button[type=submit], .button, body div.wpforms-container-full .wpforms-form input[type=submit], body div.wpforms-container-full .wpforms-form button[type=submit], body div.wpforms-container-full .wpforms-form .wpforms-page-button, .woocommerce-cart .wp-element-button, .woocommerce-checkout .wp-element-button, .wp-block-button__link {
    display: inline-block;
    font-family: inherit;
    background-color: #13aff0;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    margin: 0;
    padding: 14px 20px;
    border: 0;
    cursor: pointer;
    text-align: center;
    letter-spacing: .1em;
    line-height: 1;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.tabwdt { width: 100%; }
#tabwdt { width: 100%; }

             input, select {
                 border: 2px solid #C5D8E1;
                 border-radius: 6px;
                 padding: 0.3em;
                 font-size: 18px;
             }
             textarea {
                 border: 2px solid #C5D8E1;
                 border-radius: 6px;
                 padding: 0.3em;
                 font-size: 18px;
             }

.center {
        display: block;
        margin-left: auto;
        margin-right: auto;
}

        .marquee {
                max-width: 100vw; /* iOS braucht das */
                white-space: nowrap;
                overflow: hidden;
                font-family: 'Fjalla One';
                color: #333;
                font-size: 20px;
                line-height: 40px;
                vertical-align: middle;
        }

        .marquee span {
                display: inline-block;
                padding-left: 100%;
                animation: marquee 5s linear infinite;
        }

        /* Optional: mouseover (oder Tipp auf dem Touchscreen) pausiert die Laufschrift */
        .marquee span:hover {
                animation-play-state: paused
        }

        /* Make it move */
        @keyframes marquee {
                0%   { transform: translateX(0); }
                100% { transform: translateX(-100%); }
        }

.infobox {
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0 10px 6px -6px #777;
background-color: #fff;
}
.infobox p {
padding: 5px;
margin: 5px;
}

.iamfooter{
  font-family:'Open Sans', sans serif;
  color: #fff;
  font-size: 16px;
  text-align: center;
  background-color: #333333;
}
.iamfooter a {
  color: #fff;
  font-size: 16px;
}

/* seo friendly tables */
.table {
        display:table;        /* Defines a Table */
        font-family: 'Fjalla One';
        font-size: 18px;
        text-align: left;
        width: 100%;
}
.table-head{
         display: table-header-group; /* Defines a table header group */
}
.table-head .column{ /* Column inside the table-head */
}
.table-head .column:hover{ /* Column hover inside the table-head */
}
.row{
 display:table-row;        /*  Defines a table row */
 width: 100%;
}
.row .column:nth-child(1){ /* First column in a row */
        border-left:none;
}
.row:last-child .column{  /* column in a last row */
        border-bottom:none;
}
.column{
        display:table-cell; /* Defines a table cell */
        padding:4px 2px;
        width: 100%;
}

.column:hover{
}

/* Responsive table */
@media all and (max-width: 640px){
.table, p {
        font-size:16px;
}
        .table,
        .row,
        .column,
        .table,
        .row .column:last-child{
                border-bottom:none;
        }
        .table-head{
                position:absolute;        /* Hides table head but not using display none */
                top:-1000em;
                left:-1000em;
        }
        .row{
                margin:4px 0;
        }
        .row .column:nth-child(1){ /* first column of the row */
                border-left:none;
        }
        .row .column:last-child{ /* last column of the row */
                border-right:none;
        }
        .row:last-child .column,
        .column{ /* Column in the last row and column */
                border-bottom:none;
        }


  .column img { padding: 5px;}
  .content { padding: 4px; }

  strong { font-size: 14px; font-weight: 600;}
  p { font-size: 14px; }
  .hinweis {max-width: 500px; font-size: 12px;};

}