@import url("kopac_style.css");

/* OpenIDConnect aStec - Standardvorlage - 1207-1036
   Primaerfarbe Hintergrund: 0,50,135 (mit weisser Schrift)
   Sekundaerfarbe: 230,230,230 (mit dunkler Schrift)

   Beim Hover/Fokus des Haupt-Buttons wechselt die Primaerfarbe in die Sekundarfarbe
*/

:root {
    --primaer: 249, 178, 0;
    --sekundaer: 197, 10, 29;
}

/* Basisstyles */

html {
    font-size: 112.5%;
    letter-spacing: 0.03em;
}

body {
    font-family: Arial, Verdana, sans-serif;
    background-color: rgb(255, 255, 255) !important;
    background-image: none !important;
}

a:link,
a:visited {
    color: rgb(0, 0, 0);
    box-shadow: inset 0px 0px 0px 2px rgba(var(--primaer), 0);
    transition: box-shadow 0.5s ease-in, text-decoration 0.5s ease-in;
}

a:hover,
a:focus {
    color: rgb(0, 0, 0);
    box-shadow: inset 0px 0px 0px 2px rgb(var(--primaer));
}

hr {
    border-top: 1px solid rgb(var(--primaer));
}

/* Platzhalter (nicht zusammenfassen, sonst funktionieren sie nicht mehr) */

::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: rgb(49, 49, 49);
    font-family: inherit;
    font-weight: 400;
}

::-webkit-input-placeholder {
    /* alte Webkit-Browser */
    color: rgb(49, 49, 49);
    font-family: inherit;
    font-weight: 400;
}

:-moz-placeholder {
    /* alte Mozilla-Browser */
    color: rgb(49, 49, 49);
    font-family: inherit;
    font-weight: 400;
}

:-ms-input-placeholder {
    /* Internet Explorer 11 */
    color: rgb(49, 49, 49);
    font-family: inherit;
    font-weight: 400;
}

:-ms-placeholder {
    /* Internet Explorer 10 */
    color: rgb(49, 49, 49);
    font-family: inherit;
    font-weight: 400;
}

::-ms-placeholder {
    /* Microsoft Edge */
    color: rgb(49, 49, 49);
    font-family: inherit;
    font-weight: 400;
}

.placeholder {
    color: rgb(49, 49, 49);
    font-family: inherit;
    font-weight: 400;
}

/* Heaader / Footer */

#header {
    border-bottom: 1.66071em solid rgb(var(--primaer));
}

#mhead-inside {
    background-image: none;
    background-position: center right;
    background-repeat: no-repeat;
    position: relative;
    padding: 0 15px;
}

#mhead {
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    background-color: rgb(255, 255, 255);
    color: inherit;
}

#spruch {
    display: none;
}

#topleiste {
    margin: 0 0 20px 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#logo {
    float: none;
    display: block;
    padding: 0 15px;
}

#logo a {
    display: inline-block;
}

#logo img {
    max-height: 100px;
    max-width: 100%;
    min-height: 2.5rem;
    height: 100px;
}

#main {
    background-color: rgb(250, 250, 250);
}

#footer,
#footer > .inside {
    background-color: rgb(255, 255, 255);
}

#footer .inside > .grid-wrapper {
    padding: 0 15px;
}

@media (max-width: 767px) {
    #logo {
        padding: 0 0;
    }
    #footer,
    #footer .inside > .grid-wrapper {
        padding: 10px 0;
    }
}

/* Ueberschriften */

h1 {
    font-family: Arial, Verdana, sans-serif !important;
    font-weight: 400;
    color: rgb(0, 0, 0);
    font-size: 1.5625rem;
    line-height: 1.28em;
    margin: 0 !important;
}

h1 strong {
    font-family: Arial, Verdana, sans-serif !important;
    font-weight: 700;
}

h2 {
    font-family: Arial, Verdana, sans-serif !important;
    font-weight: 700;
    font-size: 1.33333rem;
    line-height: 1.291666;
    color: rgb(49, 49, 49);
    margin: 0 0 1.875rem 0;
}

h3 {
    font-family: Arial, Verdana, sans-serif !important;
    font-weight: 700;
    font-size: 1.11111rem;
    line-height: 1.3;
    color: rgb(20, 20, 20);
    margin: 0 0 0.5 0;
}

h4,
h5,
h6 {
    font-family: Arial, Verdana, sans-serif !important;
    font-weight: 400;
    font-size: 1.11111rem;
    line-height: 1.3;
    color: rgb(20, 20, 20);
    margin: 0 0 0.5 0;
}

h1 a,
h1 a:link,
h1 a:visited,
h2 a,
h2 a:link,
h2 a:visited,
h3 a,
h3 a:link,
h3 a:visited,
h4 a,
h4 a:link,
h4 a:visited,
h5 a,
h5 a:link,
h5 a:visited,
h6 a,
h6 a:link,
h6 a:visited {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* Maximalbreite */

.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-adiscontent,
.fr-wrapper,
.grid-wrapper,
.page-grid-wrapper {
    max-width: 100% !important;
}

#mhead-meta-inside,
#mhead-inside,
#hnav,
#main-menu,
#search,
#search > .grid-wrapper,
#container-inside,
#footer .inside {
    max-width: 1440px !important;
    margin: 0 auto;
    padding: 0 15px;
    overflow: hidden;
}

/* Allgemeinklassen */

@media only screen and (min-width: 768px) {
    #main .text {
        width: auto;
    }
}

/* FORM */

fieldset {
    margin-top: 1.875rem;
}

legend {
    background-color: #fff;
    border-bottom: 0px none;
    border-top: 2px solid rgb(0, 182, 181);
    font-family: Arial, Verdana, sans-serif !important;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.9375rem;
    margin: 0;
    padding: 1.875rem 0;
    /*  text-transform: uppercase;   */
}

label,
fieldset label {
    line-height: inherit;
    min-height: inherit;
    padding: 0;
}

table label {
    line-height: inherit;
    min-height: 0;
}

/* ---- Allgemeine Buttons / Submit-Inputs ---- */

button,
input,
select,
textarea {
    box-shadow: inset 0px 0px 0px 2px rgba(var(--primaer), 0);
    transition: box-shadow 0.5s ease-in;
}

input[type="text"],
input[type="password"],
input.feld_ausweis {
    min-width: 15em;
    max-width: 100%;
    padding-left: 0.25rem;
}

input[type="image"] {
    min-height: 16px;
}

button:hover,
button:focus,
button:focus-visible,
input[type="text"]:hover,
input[type="text"]:focus,
input[type="text"]:focus-visible,
input[type="checkbox"]:hover,
input[type="checkbox"]:focus,
input[type="checkbox"]:focus-visible,
input[type="radio"]:hover,
input[type="radio"]:focus,
input[type="radio"]:focus-visible,
input[type="password"]:hover,
input[type="password"]:focus,
input[type="password"]:focus-visible,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="submit"]:focus-visible,
select:hover,
select:focus,
select:focus-visible,
textarea:hover,
textarea:focus,
textarea:focus-visible {
    border: 1px solid rgb(var(--primaer));
    box-shadow: inset 0px 0px 0px 2px rgb(var(--primaer));
    outline: none;
}

input[type="image"].sbmt:hover,
input[type="image"].sbmt:focus,
input[type="checkbox"]:hover,
input[type="checkbox"]:focus,
input[type="radio"]:hover,
input[type="radio"]:focus {
    outline: 2px solid rgba(var(--primaer), 0.8);
}

input[type="submit"],
a.link-button,
input.button-link {
    background-color: #fff;
    color: rgb(var(--primaer));
    border: 0.15em solid rgb(0, 182, 181);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    box-shadow: inset 0px 0px 0px 2px rgba(var(--primaer), 0);
    line-height: 100%;
    padding: 0 1.66666rem;
    transition: box-shadow 0.25s ease-in;
}

input[type="submit"]:hover,
input[type="submit"]:focus,
a.link-button:hover,
a.link-button:focus,
input.button-link:hover,
input.button-link:focus {
    background-color: #fff;
    color: #000;
    border-color: rgb(var(--primaer));
    box-shadow: inset 0px 0px 0px 2px rgba(var(--primaer), 0.8);
}

input.button-link {
    background-color: transparent !important;
    border: 0px none !important;
    border-bottom: 3px solid #fff;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    box-shadow: inset 0px 0px 0px 2px rgba(255, 255, 255, 0);
    color: rgb(var(--primaer)) !important;
    display: inline-block;
    font-weight: bold;
    line-height: 1.375em;
    margin: 0 0 0.9375rem 0;
    padding: 0;
    text-decoration: none;
    width: auto;
}

input.button-link:hover,
input.button-link:focus {
    background-color: transparent !important;
    color: #000 !important;
    box-shadow: inset 0px 0px 0px 2px rgba(255, 255, 255, 0.8);
}

/* Submit mit Icon braucht mehr Platz links */

.suche-starten,
.suche-leeren,
.anmelden,
.abmelden,
.loeschen,
.email,
.filter,
.bestellen,
.verlaengern,
.speichern,
.abbrechen,
.zurueck,
.kontotabelle a,
.neutral,
.note-icon,
.note-button,
.note-cb:checked + .note-icon,
.note-cb:checked + .note-button,
.note-button.active,
.but_merken .active {
    background-position: 1.875rem center;
    padding-left: 3.75rem !important;
}

input.wichtig,
input.imp-button,
#options .show-results input[type="submit"] {
    background-color: rgb(var(--primaer)) !important;
    color: #fff !important;
    border-color: rgb(0, 182, 181) !important;
    border-width: 3px !important;
    box-shadow: inset 0px 0px 0px 2px rgba(var(--primaer), 0) !important;
    transition: box-shadow 0.25s ease-in;
}

input.wichtig:hover,
input.wichtig:focus,
input.imp-button:hover,
input.imp-button:focus,
#options .show-results input[type="submit"]:hover,
#options .show-results input[type="submit"]:focus {
    background-color: #fff !important;
    color: rgb(var(--primaer)) !important;
    border-color: rgb(var(--primaer)) !important;
    box-shadow: inset 0px 0px 0px 2px rgba(var(--primaer), 0.8) !important;
}

.checkbox,
.radiobox {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

@media (min-width: 768px) {
    .checkbox,
    .radiobox {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
}

.checkbox_container label,
.radiobox_container,
.checkbox label,
.radiobox label {
    min-width: 2em;
}

input[type="submit"] {
    background-color: rgb(250, 250, 250) !important;
    border: 0.125rem solid rgb(var(--primaer)) !important;
    box-shadow: inset 0px 0px 0px 2px rgba(var(--primaer), 0);
    color: rgb(0, 0, 0) !important;
    font-weight: 400 !important;
    transition: box-shadow 0.5s ease-in;
}

a.link-button,
input.button-link {
    background-color: rgb(250, 250, 250) !important;
    border: 0.125rem solid transparent !important;
    box-shadow: inset 0px 0px 0px 2px rgba(var(--primaer), 0);
    color: rgb(0, 0, 0) !important;
    font-weight: 400 !important;
    transition: box-shadow 0.5s ease-in;
}

input[type="submit"].imp-button {
    background-color: rgb(var(--primaer)) !important;
    border: 0.125rem solid rgb(var(--primaer)) !important;
    color: rgb(255, 255, 255) !important;
}

input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="submit"]:active,
input.wichtig:hover,
input.wichtig:focus,
input.wichtig:focus-visible,
input.imp-button:hover,
input.imp-button:focus,
input.imp-button:focus-visible,
#options .show-results input[type="submit"]:hover,
#options .show-results input[type="submit"]:focus,
#options .show-results input[type="submit"]:focus-visible {
    background-color: rgb(var(--sekundaer)) !important;
    border: 0.125rem solid rgb(var(--sekundaer)) !important;
    box-shadow: inset 0px 0px 0px 2px rgb(var(--primaer)) !important;
    color: rgb(0, 0, 0) !important;
    outline: none;
}

#check_slo,
label[for="check_slo"] {
    float: none;
    display: inline;
}

/* Container */

#container {
    max-width: 100%;
    overflow-x: hidden;
}

#container-inside {
    border-top: 0px none;
    margin: 0 auto;
    padding-top: 1.875rem;
    padding-bottom: 1.875rem;
    background-color: rgb(250, 250, 250);
    max-width: 1440px !important;
    min-height: auto;
}

/* Button-Icons */

.anmelden,
.abmelden,
.abbrechen {
    background-size: 1em 1em;
    background-repeat: no-repeat;
    background-position: 0.25em center;
    padding-left: 1.5em !important;
}

.anmelden {
    background-image: url("../images/login.svg") !important;
}

.abmelden {
    background-image: url("../images/logout.svg") !important;
}

.abbrechen {
    background-image: url("../images/cancel.svg") !important;
}

.imp-button.anmelden,
.wichtig.anmelden {
    background-image: url("../images/login-light.svg") !important;
}

.imp-button.abmelden,
.wichtig.abmelden {
    background-image: url("../images/logout.svg") !important;
}

.imp-button.abbrechen,
.wichtig.abbrechen {
    background-image: url("../images/icons/cancel.svg") !important;
}

.imp-button.anmelden:hover,
.imp-button.anmelden:focus,
.imp-button.anmelden:active,
.wichtig.anmelden:hover,
.wichtig.anmelden:focus,
.wichtig.anmelden:active {
    background-image: url("../images/login.svg") !important;
}

.imp-button.abmelden:hover,
.imp-button.abmelden:focus,
.imp-button.abmelden:active,
.wichtig.abmelden:hover,
.wichtig.abmelden:focus,
.wichtig.abmelden:active {
    background-image: url("../images/logout.svg") !important;
}

.imp-button.abbrechen:hover,
.imp-button.abbrechen:focus,
.imp-button.abbrechen:active,
.wichtig.abbrechen:hover,
.wichtig.abbrechen:focus,
.wichtig.abbrechen:active {
    background-image: url("../images/cancel.svg") !important;
}

/* Neutraler Hinweis */

.hinweis,
.nobest {
    background-color: #fff !important;
    background-image: none !important;
    color: #000;
    border: 3px solid rgb(var(--primaer)) !important;
    margin: 1.875rem 0;
    padding: 1.875rem;
}

.hinweis h1,
.hinweis h2,
.hinweis h3,
.hinweis h4,
.hinweis h5,
.hinweis h6,
.nobest h1,
.nobest h2,
.nobest h3,
.nobest h4,
.nobest h5,
.nobest h6 {
    font-family: Arial, Verdana, sans-serif !important;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.625rem;
    margin: 0;
    text-transform: uppercase;
}

/* Warnhinweis */

.alert,
.achtung {
    background-color: #fff !important;
    background-image: none !important;
    color: #000;
    border: 3px solid rgb(243, 113, 90) !important;
    margin: 1.875rem 0;
    padding: 1.875rem;
}

.alert h1,
.alert h2,
.alert h3,
.alert h4,
.alert h5,
.alert h6,
.achtung h1,
.achtung h2,
.achtung h3,
.achtung h4,
.achtung h5,
.achtung h6 {
    font-family: Arial, Verdana, sans-serif !important;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.625rem;
    margin: 0;
    text-transform: uppercase;
}