/*
äh ... colörs:
---------------
alt:
main: #f31414  pixolini-rot (mittlerer farbwert aus head)
rot:  #f31414   f. alerts / del-button (war mal: #9f0000)
gruen: #c4ddd7  (war mal: #CBE9C7)

neu:
#fff        weiß              text und borders auf blau
#f1f1f1     fast weiß         text auf dunklem bg (default, body)
#eee        ganz hellgrau     input-bg
#dde1e5     hellgrau          main-bg
#bbb        hellgrau          readonly input-bg
#889        grau              text-sek,inaktiv-text
#5f6172     helldunkelgrau    bg f. unbestaetigte kleinanzeigen etc. -> #676b78, inaktiv-text wenn text eh schon #889
#6f7182     helldunkelgrau2   hover-bg f. unbestaetigte kleinanzeigen
#404552     dunkelgrau1       bg navi, bg formulare, widget-boxen etc.
#383C4A     dunkelgrau2       text auf hellem bg, bg header,fieldset-border etc.
#2F343F     dunkelgrau3       textfarbe auf hellem bg -> hauptsächlich h1
#5294E2     blau              links, buttons, fake-buttons etc.
#DF4C4E     rot               alert, Fehlermeldungen etc.
#00934c     grün              Erfoglsbestätigungen z.B. nach speichern
(#b2b4be  hellgrau            c-pixolini logo unten rexhts + footer scripttime:hoover)

   transition: all .4s .1s ease-in-out;
----------------------------------------------------------------------------------------------------
allgemeine einstellungen ... diverse klassen
----------------------------------------------------------------------------------------------------
*/

/* Schriften */
@import url('style-fonts.css');


* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

html {
    font-size: 100%;
}

body {
    /* height: 100%; */
    position: relative;
    font-family: 'Roboto', sans-serif;
    min-height: 100vh;
    font-weight: 400;
    font-size: .875rem;
    line-height: 1.6;
    color: #f1f1f1;
    background: #dde1e5;
    /* background: #111; */
}

body.light {
    background: #dde1e5;
}

/* für index/login*/

/*links*/
a {
    color: #5294E2;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a.standalone,
span.standalone {
    display: inline-block;
    padding: 3px 5px;
}

a.standalone:hover {
    padding: 2px 4px;
    text-decoration: none;
    border: 1px solid #5294E2;
    border-radius: 3px;
}

#pwshow {
    cursor: pointer;
}

/*userverwalting pw neu-eingabe*/

.fakebutton,
/*wie formularbutton s.u.*/
.nlsendbutton {
    float: right;
    height: 30px;
    margin: 8px 4px;
    padding: 4px 12px;
    font-size: 1rem;
    line-height: 1.4;
    color: #fff;
    background: #5294E2;
    border-radius: 3px;
    border: 1px solid #5294E2;
    cursor: pointer;
}

.fakebutton:hover,
.nlsendbutton:hover {
    text-decoration: none;
    border-color: #fff;
}


hr

/*not in use*/
    {
    height: 1px;
    margin: 1rem auto;
    background: #404552;
}

iframe#nl-vorschau {
    width: calc(100% - 3rem);
    height: auto;
    min-height: 700px;
    margin: 1.5rem;
    overflow: hidden;
    transition: all .6s .1s ease-in-out;
}

iframe#nl-vorschau:hover {
    outline: .25rem solid #5294E2;
    overflow: auto;
}

iframe#nl-vorschau.view-mobile {
    width: 400px;
}


/*ueberschriften*/
h1 {
    font-size: 1.5rem;
    font-weight: 400;
    color: #2F343F;
}

h2 {
    font-size: 1rem;
    font-weight: 700;
}

h2 {
    margin-bottom: .5rem;
}

h2.ueber-box {
    margin-top: .5rem;
    font-size: 1.25rem;
    font-weight: 400;
    color: #2F343F;
}



/* Infos auf der Seite bei z.B. Fehlern oder gelöschten Eintrag -> prüfen ob und wie verwendet!!! ------------------- */
.zwischeninfo {
    margin: 0 0 .75rem 0;
    padding: .5rem 1.25rem;
    text-align: center;
    background: #404552;
}

.zwischeninfo h2 {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 2;
}

.zwischeninfo span {
    display: inline-block;
    margin-bottom: .5rem;
    padding: 0 3px;
}


/* alles mögliche ;-) ---------------------------------------------------------------------------*/
.alert {
    background: #DF4C4E !important;
}

.ok {
    background: #00934c !important;
}

/*helleres grau bg f. unbestaetigte kleinanzeigen etc.*/
.unbestaetigt {
    background: #5f6172;
}

/*fuer warnungen/meldungen*/
.alert-color {
    color: #DF4C4E !important;
}

/* zum reseten auf default-farbe (wie body) */
.default-color {
    color: #f1f1f1 !important;
}

/* für Hervorhebungen u.ä. (blau wie linkfarbe) */
.color-1 {
    color: #5294E2 !important;
}


/* inaktiv oder sek = sekundär -> text mit untergeordneter Bedeutung */
.text-sek,
.text-sek-color,
.inaktiv {
    color: #889 !important;
}

.inaktiv-grau2 {
    color: #5f6172 !important;
}

.sonderangebot {
    color: #5294E2 !important;
}

/*auf gruen und rot, weisser text, sonst nicht lesbar*/
.ok.text-sek-color,
.ok .text-sek-color,
.ok.color-1,
.ok .color-1,
.ok a,
.ok,
.alert.color-1,
.alert .color-1,
.alert.text-sek-color,
.alert .text-sek-color,
.alert a,
.alert {
    color: #f1f1f1 !important;
}

.ok a,
.alert a {
    text-decoration: underline !important;
}

.ok a.standalone:hover,
.alert a.standalone:hover {
    border-color: #f1f1f1;
}

.ok .check-green:hover,
.ok .check-green-icon-only,
.alert .lock-sign-icon-only,
.alert .lock-sign:hover {
    background-position: center top !important;
}

.mittig {
    text-align: center;
}

.linksbuendig {
    text-align: left;
}

.rechtsbuendig {
    text-align: right;
}

.no-margin {
    margin: 0;
}

.nobr {
    white-space: nowrap;
}

.fett {
    font-weight: 700;
}

.schlank {
    font-weight: 400;
}

.durchgestr {
    text-decoration: line-through;
}

.normaltext {
    font-size: .875rem;
    font-weight: 400;
    color: #f1f1f1;
}


/*ab hier checken ob verwendet*/
.maybe-scroll {
    overflow: auto;
}

.maybe-scrollx {
    overflow-x: auto;
    padding-bottom: 1rem;
}

.maybe-scrolly {
    overflow-y: auto;
}

.versteckt {
    display: none;
}

.fliesenli,
.floatli {
    float: left;
}

.fliesenre,
.floatre {
    float: right;
}

.klaeren,
.clearboth {
    clear: both;
}

.klaerenli,
.clearli {
    clear: left;
}

.klaerenre,
.clearre {
    clear: right;
}

.clearfix:after,
.floatgroup:after {
    content: "";
    display: table;
    clear: both;
}

.width100proz {
    width: 100%;
}

.max500 {
    max-width: 500px;
}

/* kleine Icons in Tabellen o.ä. ------------------------------------------------------------------------------------------------------- */
.icon-s {
    display: inline-block;
    height: 18px;
    width: 22px;
}

.icon-s-neu {
    background: transparent url(icon-new-release-5294E2-18px.svg) no-repeat center top;
}

.icon-s-inaktiv {
    background: transparent url(icon-visibility-off-889-18px.svg) no-repeat center top;
}

.icon-s-lock {
    background: transparent url(icon-lock-5294E2-18px.svg) no-repeat center top;
}

.icon-s-mail {
    background: transparent url(icon-email-5294E2-18px.svg) no-repeat center top;
}

.icon-s-page {
    background: transparent url(icon-page-5294E2-18px.svg) no-repeat center top;
}

.icon-s-open-in-new {
    background: transparent url(icon-open-in-new-sprite-eee-5294E2-18px.svg) no-repeat center bottom;
}

.icon-s-user-blocked {
    background: transparent url(icon-user-blocked-889-18px.svg) no-repeat center bottom;
}

.icon-s-user-online {
    background: transparent url(icon-user-online-00934c-18px.svg) no-repeat center bottom;
}

.icon-s-admin {
    background: transparent url(icon-admin-eee-18px.svg) no-repeat center bottom;
}

.icon-s-so {
    background: transparent url(icon-so-5294E2-18px.svg) no-repeat center bottom;
}

.icon-s-so-outoftime {
    background: transparent url(icon-so-889-18px.svg) no-repeat center bottom;
}

.icon-s-ablaufbald {
    background: transparent url(icon-ablauf-5294E2-18px.svg) no-repeat center bottom;
}

.icon-s-abgelaufen {
    background: transparent url(icon-ablauf-889-18px.svg) no-repeat center bottom;
}

.icon-s-shop {
    background: transparent url(icon-shop-5294E2-18px.svg) no-repeat center bottom;
}

.icon-s-star {
    background: transparent url(icon-star-5294E2-18px.svg) no-repeat center bottom;
}

/*kleine icon-buttons ---------------------------------- */

.icon-s-page-button {
    background: transparent url(icon-page-sprite-eee-5294E2-18px.svg) no-repeat center top;
}

.icon-s-page-button:hover {
    background-position: center bottom;
}

.icon-s-cat-button {
    cursor: pointer;
    background: transparent url(icon-cat-sprite-eee-5294E2-18px.svg) no-repeat center top;
}

.icon-s-cat-button:hover {
    background-position: center bottom;
}

.icon-s-info-button {
    cursor: pointer;
    background: transparent url(icon-info-sprite-eee-5294E2-18px.svg) no-repeat center top;
}

.icon-s-info-button:hover,
.icon-s-info-button.akt {
    background-position: center bottom;
}

.icon-s-list-button {
    cursor: pointer;
    background: transparent url(icon-list-sprite-eee-5294E2-18px.svg) no-repeat center top;
}

.icon-s-list-button:hover {
    background-position: center bottom;
}

.icon-s-new-item-button {
    cursor: pointer;
    background: transparent url(icon-plus-sprite-5294e2-eee-30x30px.svg) no-repeat center -36px;
}

.icon-s-new-item-button:hover {
    background-position: center -6px;
}

/* container-box für kleine icons ---------------------- */
.iconbox18-44,
.iconbox18-44-nofloat {
    text-align: right;
    height: 18px;
    min-width: 44px;
}

.iconbox18-44 {
    float: right;
}

.iconbox18-44-nofloat {
    display: inline-block;
}

.iconbox-on-textline {
    margin-top: .75rem;
}


/* mini Vorschaubild z.B. in Tabelle Links f. Linkbild */
img.tinytumb {
    float: left;
    height: 25px;
    width: auto;
    margin: 0 10px 0 0;
}

/* mini Vorschaubild z.B. f. Video-Poster in Video-Formular */
img.minitumb {
    float: right;
    height: 35px;
    max-height: 35px;
    width: auto;
    max-width: 100px;
    margin: 7px 0 0 0;
}


/*tabelle für liste,einträge ----------------------------------------------------------------------------------------------------------- */

table {
    display: table;
    /* table-layout: fixed; to force tables to shrink on small screens -> not beautiful -> find a better solution */
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
    padding-bottom: .5rem;
    background: #404552;
    border-bottom: .5rem solid #404552;
}

thead {
    border-bottom: .25rem solid #404552;
}

table.liste-table tbody tr:hover {
    background: #383C4A;
}

table.liste-table tr:not(.msg) {
    cursor: pointer;
}

table.liste-noclick tbody tr:hover,
table.liste-noclick tbody tr.akt {
    color: #5294E2;
    background: #383C4A;
}

table.liste-noclick tbody tr.akt {
    outline: 1px solid #5294E2;
}

table.liste-noclick tbody tr.akt .edit-pen {
    background-position: center bottom;
    transform: rotate(-10deg);
}

th,
td {
    padding: .75rem 1rem .5rem 1rem;
    text-align: left;
    vertical-align: top;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

th {
    padding: .5rem 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: #889;
}

th.sortakt {
    color: #f1f1f1;
}

td.mit-icons {
    min-width: 150px;
}

td.mit-buttons-3 {
    min-width: 160px;
}

td a {
    display: block;
}

td a:hover {
    text-decoration: none;
}

tr.inaktiv td,
tr.inaktiv td a {
    color: #889;
}

/*table.liste-noclick td a { color: #f1f1f1; }*/
table.liste-noclick td a:hover {
    text-decoration: underline;
}

/*tabellen/trs/tds mit formular drin -> aufklappbar*/
tr.form-tr {
    margin-bottom: .25rem;
    background: #383C4A;
}

tr.form-tr td {
    padding: 0;
}

tr.form-tr form {
    max-height: 0;
    overflow: hidden;
    transition: all .4s .1s ease-in-out;
}

tr.form-tr form.akt {
    max-height: 500px;
    outline: 1px solid #5294E2;
}

tr.form-tr form.tr-form-lang.akt {
    max-height: 800px;
    outline: 1px solid #5294E2;
}

tr.form-tr form,
tr.form-tr form fieldset {
    background: transparent;
    /*transparent damit farbe von tr.form-tr durchscheint*/
}

/* flexbox f. diverse. verwendungszwecke ------------------------------------------------------------------------------------------------ */

.vbox-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    background: #404552;
}

.vbox-1 {
    flex: 1;
    min-width: 535px;
    padding: 1rem .5rem;
    overflow: auto;
    border-bottom: 4px solid #383C4A;
}

.vbox-2 {
    flex: 2;
    min-width: 100%;
    padding: 1rem 1.5rem;
    overflow: auto;
    border-bottom: 4px solid #383C4A;
}

.vbox-left {
    border-right: 4px solid #383C4A;
}

.vbox-1 h2:not(:first-child) {
    margin-top: 1.5rem;
    margin-right: 1rem;
    margin-left: 1rem;
    color: #889;
}

.vbox-1 p,
.vbox-1 form.absatz {
    margin: 0 1rem 1rem 1rem;
}

/* formularkram ------------------------------------------------------------------------------------------------------------------------- */

form {
    background: #404552;
}

form.main-form {
    margin-bottom: 10px;
    padding-bottom: 10px;
}

fieldset {
    padding: .5rem 1rem;
    border-bottom: 4px solid #383C4A;
}

fieldset:last-child {
    border: 0;
}

/*hinweis nach mittellangen inputs (auch file) + text im formular*/
fieldset .hinweis,
fieldset .text-in-form {
    height: 30px;
    margin: 8px 4px;
    border-radius: 2px;
}

fieldset .hinweis {
    float: right;
    width: 180px;
    padding: 4px;
    color: #f1f1f1;
    background: #383C4A;
}

fieldset .text-in-form {
    display: inline-block;
    width: auto;
    margin-right: 1rem;
    padding: 2px 4px 6px 4px;
    color: #889;
    background: transparent;
}

legend {
    width: calc(100% + 2rem);
    margin: 0 -1rem;
    padding: 8px;
    font-weight: 700;
    background: #383C4A;
}

/* f. icons im Formular z.b. adressen/statusicons f. newsletter */
.iconbox-in-form {
    display: inline-block;
    width: 30px;
    height: 25px;
    margin-right: .5rem;
}

.zeilenbox-in-form {
    display: flex;
    align-items: center;
}

/* legend -> nicht verwendet */

label,
.fakelabel {
    float: left;
    width: 140px;
    height: 30px;
    margin: 8px 4px;
    padding: 2px 4px 6px 4px;
    color: #f1f1f1;
}

label.label-im-text {
    float: none;
    width: auto;
}

label.checkboxlabel-im-text {
    width: auto;
}

label.mehrzeilig {
    height: auto;
    margin-bottom: 0;
}

label.label-in-reihe {
    margin-left: 54px;
}

input,
textarea,
select {
    width: calc(100% - 156px);
    /*100% - 136 -> - label(incl. 8px marg) - 8px input-marg */
    height: 30px;
    margin: 8px 4px;
    padding: 4px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: .875rem;
    color: #000;
    background: #eee;
    border: 1px solid #ccc;
    border-radius: 2px;
}

input.mittel {
    width: 300px;
}

input.kurz {
    width: 200px;
}

input.kurz-2 {
    width: 85px;
}

input.neben-kurz {
    width: calc(100% - 368px)
}

/*Laenge wie normales Textfeld - input.kurz (212px incl. margin (1 collapse!)), da neben plz*/
input:read-only {
    font-style: italic;
}

input,
textarea {
    font-family: 'Cutive Mono', monospace;
    font-size: .875rem;
}

textarea {
    height: 450px;
    resize: vertical;
    transition: height .4s .1s ease-in-out;
}

textarea.mittel {
    height: 200px;
}

textarea.kurz {
    height: 75px;
}

select,
fieldset .text-in-form.selectsize {
    width: 200px;
}

optgroup {
    margin-top: -1rem;
}

option {
    padding: 2px 3px;
    background: #eee;
}

div.datumbox,
div.selectbox {
    display: inline-block;
}

div.datumbox.inaktiv input,
div.selectbox.inaktiv select {
    background: #889;
    border-color: #889;
}

div.datumbox.sonderangebot input,
div.selectbox.sonderangebot select {
    background: #5294E2;
    border-color: #5294E2;
}

input[type=checkbox] {
    float: left;
    width: 20px;
    height: 20px;
    margin: 12px 6px 14px 4px;
    border: 0;
}

input[type=checkbox].on-left-side {
    float: right;
    margin: 3px 0 0 0;
}

input[type="button"],
input[type="submit"] {
    float: right;
    width: auto;
    padding-right: 1rem;
    padding-left: 1rem;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-style: normal;
    cursor: pointer;
    color: #f1f1f1;
    background: #5294E2;
    border: 1px solid #5294E2;
    border-radius: 3px;
}

input[type="button"]:hover,
input[type="submit"]:hover {
    cursor: pointer;
    border-color: #f1f1f1;
}

input[type="button"]:focus,
input[type="submit"]:focus,
input[type="reset"]:focus {
    outline: 0 !important;
}

/*gibts das überhaupt?*/
input[type="button"].del-button,
input[type="submit"].del-button {
    background: #DF4C4E;
}

input[type="file"] {
    width: calc(100% - 344px);
}

/* zusätzl. platz für span.hinweis abgezogen */

::placeholder {
    color: #aaa;
    opacity: 1;
    /* Firefox */
}

/* Video Formular mit Video*/
#videoform.mit-video fieldset:last-child {
    border-bottom: 4px solid #383C4A;
}

#videoform.mit-video input[type="file"] {
    float: left;
    width: calc(100% - 424px);
}

/* zusätzl. 100px für vorschaubild minithumb bzw. play-button(incl. abstand) abgezogen  */
#videoform.mit-video input.videocode {
    width: calc(100% - 200px);
}

/* 100% - 148 - 8 - 40 - 4 -> - 148px label(incl. 8px marg) - 8px input-marg - 40px play-button(incl. 16px marg) - 4px reserve */
#videoform.mit-video fieldset span.hinweis {
    float: left;
}

/*kurze Formulare in Schleife (Pdf,Adresszuordnung)*/
form.short-loop a {
    color: #f1f1f1;
}

form.short-loop {
    border-bottom: 4px solid #383C4A;
}

/*:not(:last-child)*/
form.short-loop:hover {
    background: #383C4A;
}

/* Sonder form en ------------------------------------------------------------------------------ */
/* gibts in adresszuordnung */
form.eng {
    padding-top: 4px;
}

form.eng label {
    margin-top: 4px;
    margin-bottom: 0;
    text-align: right;
}

form.eng input[type="checkbox"] {
    margin-top: 6px;
}

form.eng span.text-in-form {
    margin-top: 4px;
    margin-bottom: 0;
    vertical-align: top;
    /*sonst ists wenn leer hoeher als mit text (wegen line-height/unterlaengen ...)*/
    color: #f1f1f1;
}

/* einzeiliges formular mit nur select-box oder 1 button z.b. sortiereihenfolge für listen */
form.einzeilig-re {
    text-align: right;
}

form.einzeilig-re fieldset:last-child {
    border-bottom: 4px solid #383C4A;
}

form.einzeilig-re label {
    display: inline-block;
    float: none;
}

form.einzeilig-re select {
    float: right;
}

/* form plain -> zur verwendung neben anderen elementen (z.b in shop-artikel-liste) */
form.plain {
    display: inline-block;

}

form.plain fieldset {
    padding: 0;
}

form.plain label {
    width: auto;
}


/* html5 form validierung ---------------------------------------------------------------------- */
input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid {
    outline: 2px solid #DF4C4E;
}

input:focus:valid,
textarea:focus:valid,
select:focus:valid {
    outline: 2px solid #00934C;
}

form br {
    clear: left;
}

form img {
    float: left;
    max-height: 100px;
    width: auto;
    margin: .5rem 1rem .5rem .25rem;
}

/* formatierer -> enthält links/buttons mit tags zur textformatiererung ------------------------ */
.formatierer {
    max-height: 30px;
    margin-top: -5px;
    margin-bottom: .5rem;
    margin-left: 152px;
    transition: all .3s ease-in-out;
    overflow: hidden;
}

.formatierer.unsichtbar {
    max-height: 0;
}

.formatierer a {
    display: inline-block;
    padding: 0 3px;
    margin-right: 5px;
    color: #2F343F;
    background: #eee;
    border: 1px solid #eee;
    border-radius: 2px;
}

.formatierer a:hover {
    text-decoration: none;
    color: #f1f1f1;
    background: #5294E2;
    border: 1px solid #eee;
}

/* Sonderangebots Daten in form ---------------------------------------------------------------- */
div#so-data {
    height: auto;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    transition: all .6s .1s ease-in-out;
}

div#so-data.sichtbar {
    padding-top: .5rem;
    padding-bottom: .5rem;
    max-height: 400px;
}

/* icon-buttons !important für button-style reset------------------------------------------------
  Try to get rid of !ịmportant !!! */
.del-trash,
.edit-pen,
.save-disk,
.reset-curl,
.play-video,
.play-youtube,
.take-address,
.check-green,
.check-green-icon-only,
.info-i,
.lock-sign,
.lock-sign-icon-only,
.new-sign-icon-only,
.new-warning-icon-only,
.email-letter,
.timer-clock,
.admin-settings,
.up-down {
    /* display: inline-block; */
    float: right;
    /* !important */
    width: 24px;
    height: 24px;
    margin: 0 0 0 16px;
    /*  !important entfernt 2020.06.02 -> check if this is needed anywhere! */
    padding: 0;
    border: 0;
    cursor: pointer;
    /*transition: all .2s; -> testperson fragen;-) */
}

.del-trash {
    background: transparent url(icon-delete-sprite-eee-red.svg) no-repeat center top !important;
}

.del-trash-li {
    float: left;
    margin-top: 0.5rem;
    margin-left: 0;
}

/* workarround für del-trash button rechts */
.button-box-re {
    float: right;
}

.button-box-re .del-trash-li {
    margin-top: 0;
}

.del-trash:hover {
    background-position: center bottom !important;
}

.del-trash.inline {
    margin: 0 !important;
}

table.liste-noclick tr.alert .del-trash:hover {
    background-position: center top;
    transform: rotate(90deg);
}

.edit-pen {
    background: transparent url(icon-edit-sprite-eee-5294E2.svg) no-repeat center top;
}

.edit-pen:hover,
.edit-pen.akt {
    background-position: center bottom;
    transform: rotate(-10deg);
}

.save-disk {
    background: transparent url(icon-save-sprite-eee-5294E2.svg) no-repeat center top !important;
    border: 0 !important;
}

.save-disk:hover {
    background-position: center bottom !important;
}

.reset-curl {
    background: transparent url(icon-reset-sprite-eee-5294E2.svg) no-repeat center top !important;
}

.reset-curl:hover {
    background-position: center bottom !important;
}

.play-video {
    margin-top: 12px !important;
    /*ist neben text-input, damit auf gleiche höhe ausgerichtet*/
    background: transparent url(icon-play-sprite-eee-5294E2.svg) no-repeat center top !important;
}

.play-video:hover {
    background-position: center bottom !important;
}

.play-youtube {
    margin-top: 12px !important;
    background: transparent url(icon-youtube-sprite-eee-5294E2.svg) no-repeat center top !important;
}

.play-youtube:hover {
    background-position: center bottom !important;
}

.take-address {
    background: transparent url(icon-take-address-sprite-eee-5294E2.svg) no-repeat center top !important;
}

.take-address:hover {
    background-position: center bottom !important;
}

.check-green {
    background: transparent url(icon-check-sprite-eee-00934c.svg) no-repeat center top !important;
}

.check-green:hover {
    background-position: center bottom !important;
}

.check-green-icon-only {
    cursor: default !important;
    background: transparent url(icon-check-sprite-eee-00934c.svg) no-repeat center bottom !important;
}

.info-i {
    background: transparent url(icon-info-sprite-eee-5294E2.svg) no-repeat center top !important;
}

.info-i:hover,
.info-i.akt {
    background-position: center bottom !important;
}

.lock-sign {
    background: transparent url(icon-lock-sprite-eee-df4c4e.svg) no-repeat center top !important;
}

.lock-sign:hover {
    background-position: center bottom !important;
}

.lock-sign-icon-only {
    cursor: default !important;
    background: transparent url(icon-lock-sprite-eee-df4c4e.svg) no-repeat center bottom !important;
}

.new-sign-icon-only {
    cursor: default !important;
    background: transparent url(icon-new-5294E2.svg) no-repeat center bottom !important;
}

.new-warning-icon-only {
    cursor: default !important;
    background: transparent url(icon-new-df4c4e.svg) no-repeat center bottom !important;
}

.email-letter {
    float: left;
    margin-top: 8px !important;
    background: transparent url(icon-email-sprite-eee-5294E2.svg) no-repeat center top;
}

.email-letter:hover {
    background-position: center bottom !important;
}

.timer-clock {
    float: left;
    margin-top: 8px !important;
    background: transparent url(icon-timer-sprite-eee-5294E2.svg) no-repeat center top;
}

.timer-clock:hover {
    background-position: center bottom !important;
}

.admin-settings {
    margin-top: 2px !important;
    background: transparent url(icon-admin-settings-sprite-eee-5294E2.svg) no-repeat center top !important;
}

.admin-settings:hover {
    background-position: center bottom !important;
}

.up-down {
    float: left !important;
    margin-right: 16px !important;
    background: transparent url(icon-up-down-sprite-eee-5294e2.svg) no-repeat center top;
    transition: transform .4s .1s ease-in-out;
}

.up-down:hover {
    background-position: center -24px;
}

.up-down.up {
    transform: rotate(180deg);
}

.up-down.margin-top-only {
    margin: .5rem 0 0 0 !important;
}

.check-green-icon-only.no-float,
.new-sign-icon-only.no-float,
.new-warning-icon-only.no-float,
.lock-sign-icon-only.no-float {
    float: none;
    margin-left: 0 !important;
}


/*eckige-buttons mit icon als bg --------------------------------------------------------------- outline: 1px solid #eee;*/
.button-style,
.del-trash-button,
.info-button,
.hilfe-button,
.page-new-button,
.page-copy-button,
.reset-button,
.addresses-button,
.add-address-button,
.news-button,
.newsletter-button,
.newsletter-send-button,
.back-button,
.email-self-button,
.view-desktop-button,
.view-mobile-button {
    float: left !important;
    width: 38px !important;
    height: 30px !important;
    margin: .5rem .75rem .5rem .25rem !important;
    padding: 4px !important;
    /*text-align: center;
   font-size: 1rem;
   line-height: 1.4;
   color: #eee;*/
    border-radius: 3px;
    border: 1px solid #5294E2;
    cursor: pointer;
}

.del-trash-button {
    border: 1px solid #DF4C4E !important;
    background: #DF4C4E url(icon-delete-sprite-eee-red-30px.svg) no-repeat center top !important;
}

.info-button {
    background: #5294E2 url(icon-info-eee-30px.svg) no-repeat center top;
}

.hilfe-button {
    background: #5294E2 url(icon-help-eee-30px.svg) no-repeat center top;
}

.page-new-button {
    float: right !important;
    margin: 0 !important;
    background: #5294E2 url(icon-page-new-eee-30px.svg) no-repeat center top;
}

.page-copy-button {
    background: #5294E2 url(icon-page-copy-eee-30px.svg) no-repeat center top;
}

.reset-button {
    background: #5294E2 url(icon-reset-eee-30px.svg) no-repeat center top;
}

.addresses-button {
    background: #5294E2 url(icon-addresses-eee-30px.svg) no-repeat center top;
}

.add-address-button {
    background: #5294E2 url(icon-add-address-eee-30px.svg) no-repeat center top;
}

.news-button {
    background: #5294E2 url(icon-news-eee-30px.svg) no-repeat center top;
}

.newsletter-button {
    background: #5294E2 url(icon-email-eee-30px.svg) no-repeat center top;
}

.newsletter-send-button {
    background: #5294E2 url(icon-email-send-eee-30px.svg) no-repeat center top;
}

.newsletter-send-button.inakt,
.newsletter-send-button.inakt:hover {
    background-color: #5f6172;
    border-color: #5f6172 !important;
    cursor: default;
}

.back-button {
    background: #5294E2 url(icon-back-arrow-eee-30px.svg) no-repeat center top;
}

.email-self-button {
    background: #5294E2 url(icon-email-self-eee-30px.svg) no-repeat center top;
}

.view-desktop-button {
    background: #5294E2 url(icon-view-desktop-eee-30px.svg) no-repeat center top;
}

.view-mobile-button {
    background: #5294E2 url(icon-view-mobile-eee-30px.svg) no-repeat center top;
}

/* neue buttons in buttonbar f. shop (haben class button-style) */
.artikel-alle-button {
    color: #eee;
    background: #5294E2 url(icon-article-alle-eee-30px.svg) no-repeat center top;
}

.artikel-so-button {
    color: #eee;
    background: #5294E2 url(icon-article-so-eee-30px.svg) no-repeat center top;
}

.artikel-ablauf-button {
    color: #eee;
    background: #5294E2 url(icon-article-ablauf-eee-30px.svg) no-repeat center top;
}

.artikel-soldout-button {
    color: #eee;
    background: #5294E2 url(icon-article-soldout-eee-30px.svg) no-repeat center top;
}

.button-style.akt,
.button-style:hover,
.del-trash-button:hover,
.info-button:hover,
.hilfe-button:hover,
.page-new-button:hover,
.page-copy-button:hover,
.reset-button:hover,
.addresses-button:hover,
.add-address-button:hover,
.news-button:hover,
.newsletter-button:hover,
.newsletter-send-button:hover,
.back-button:hover,
.email-self-button:hover,
.view-desktop-button:hover,
.view-mobile-button:hover {
    border-color: #eee !important;
    text-decoration: none;
}

/* Buttons außerhalb main-buttonbar, z.B. back-tolist-button neben h1 */
#back-to-list-button,
#new-item-button {
    width: 38px;
    height: 38px;
    padding: 4px;
    margin-top: -.125rem;
    border-radius: 50%;
}

#back-to-list-button {
    float: left;
    margin-right: .75rem;
    background: url(icon-back-arrow-sprite-2f343f-eee-30px.svg) no-repeat center top;
}

#new-item-button {
    float: right;
    margin-left: .75rem;
    background: url(icon-plus-sprite-2f343f-eee-30px.svg) no-repeat center top;
}

#back-to-list-button:hover,
#new-item-button:hover {
    background-color: #383C4A;
    background-position: center bottom;
}

/* Buttons in Widgets */
.widget-button {
    float: right;
    width: 30px;
    height: 30px;
    margin-top: -.125rem;
    margin-left: .75rem;
    padding: 4px;
    border-radius: 50%;
}

#widget-new-item-button {
    background: url(icon-plus-sprite-5294e2-eee-30x30px.svg) no-repeat center top;
}

#widget-new-item-button:hover {
    background-color: #5294E2;
    background-position: center bottom;
}


/*Ende Formulare --------------------------------------------------------------------------------*/


/* boxen zu main-form gehörend ------------------------------------------------------------------*/

/* buttonbar/#buttonbar-2 (mit switches drüber) -> oberhalb von main-form, enthält buttons und infobar */
.buttonbar {
    position: sticky;
    top: 52px;
    width: 100%;
    min-height: 66px;
    z-index: 1;
}

.buttonbarinner {
    padding: .5rem 1rem;
    background: #404552;
    border-bottom: 4px solid #383C4A;
}

/*enthält zusatzl. infos wie Erstelltdatum etc. -> zw. main-formund buttonbar*/
.infobar,
.hilfebar {
    height: 0;
    overflow: hidden;
    color: #eee;
    background: #383C4A;
    transition: all .4s .1s ease-in-out;
}

.infobar.sichtbar {
    height: 82px;
}

.hilfebar {
    height: auto;
    max-height: 0;
    transition: all .6s .1s ease-in-out;
}

.hilfebar.sichtbar {
    max-height: 500px;
    overflow: auto;
}

.infobar p,
.hilfebar p {
    padding: .5rem 1.25rem;
}


/* von oberhalb der Seite eingeblendeter Hinweis auf z.B. gespeicherte Änderung -----------------*/
#hinweistafel {
    z-index: 100;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 3px;
    max-height: 5px;
    overflow: hidden;
    padding: 0;
    text-align: center;
    font-size: 1.25rem;
    background: #00934c;
    transition: all .4s .1s ease-in-out;
}

#hinweistafel.ausgefahren {
    min-height: 150px;
    max-height: 300px;
    padding: 3rem 1.5rem 0.5rem;
}

#hinweistafel #hinweiscloser {
    position: absolute;
    top: .75rem;
    right: .75rem;
    width: 24px;
    height: 24px;
    cursor: pointer;
    border-radius: 12px;
    background: transparent url(icon-close-sprite-eee-red.svg) no-repeat center top;
}

#hinweistafel #hinweiscloser:hover {
    background-color: #eee;
    background-position: center bottom;
}

#hinweistafel #hinweisopener {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 5px;
    cursor: pointer;
    background: transparent;
}

#hinweistafel p {
    margin-bottom: 1.25rem;
}


/*diverse boxen etc -----------------------------------------------------------------------------*/

/*boxen für hp-widgets*/
.hp-widget {
    flex: 1;
    overflow: hidden;
    /* width: 100%; */
    min-width: 460px;
    max-height: 350px;
    /* margin left/right = q&d workaround for gap on flex not supported by safari (14) until now (2021.02.12) */
    margin: 1.25rem 1rem 2rem 1rem;
    padding: .75rem 0;
    background: #404552;
    border-bottom: 4px solid #404552;
}

.hp-widget:hover {
    overflow-y: auto;
}


.hp-widget h2 {
    padding: 0 1.25rem .5rem 1.25rem;
    color: #5294E2;
    border-bottom: 4px solid #383C4A;
}

.hp-widget div {
    width: 100%;
    /*464px;*/
}

.hp-widget div:hover {
    background: #383C4A;
}

.hp-widget div a {
    display: block;
    width: 460px;
    padding: .25rem 0 .25rem 1.25rem;
    color: #f1f1f1;
}

.hp-widget div a:hover {
    text-decoration: none;
}

.hp-widget .info-flat {
    padding: 0 1.25rem 0 1.25rem;
}

.hp-widget .info {
    padding: 0 1.25rem 1rem 1.25rem;
}

.hp-widget .headline-info {
    float: right;
    font-size: .875rem;
    font-weight: normal;
}

.hp-widget .message {
    padding: 2rem 1.25rem .25rem 1.25rem;
    text-align: center;
}

.hp-widget article,
.content-box article {
    width: 100%;
    padding: 1rem 1.25rem .75rem 1.25rem;
    border-bottom: 4px solid #383C4A;
}

.hp-widget article:last-child,
.content-box article:last-child {
    border-bottom: 0;
}

.hp-widget article:hover,
.content-box article:hover {
    background: #383C4A;
}

.content-box article.unbestaetigt:hover {
    background: #6f7182;
}

.hp-widget article img,
.content-box article img {
    float: right;
    max-width: 200px;
    height: auto;
    max-height: 600px;
    margin: 0 0 .75rem .75rem;
}

.hp-widget article .head-info,
.content-box article .head-info {
    margin-bottom: .5rem;
    padding-bottom: .5rem;
}

/* a quick & dirty workaround for gap on flex not supported by safari (14) until now (2021.02.12) */
/* #hp-widget-hp,
#hp-widget-news
{
   margin-right: 10px;
}
#hp-widget-mp,
#hp-widget-nla
{
   margin-left: 10px;
} */
#hp-widget-sb,
#hp-widget-gb {
    width: 100%;
    height: auto;
    padding-bottom: 0;
    border-bottom: 0;
}

/*wenn keine module installiert -> default-widgets auf bo1 größer*/
#hp-widget-mp.long-widg,
#hp-widget-hp.long-widg {
    max-height: 500px;
}


/* um brotnavi den gleichen padding zu geben wie z.b. td in mp-liste tabelle */
.brotnavi-box {
    padding: .5rem 1rem .375rem 1rem;
    overflow: auto;
    margin: 0;
    font-size: 1rem;
    color: #889;
    font-weight: 700;
}

.brotnavi-box a {
    color: #889 !important;
}

.brotnavi-box a.inaktiv {
    color: #5f6172 !important;
}

/*container f. formulare der bereits hoch geladenen Bilder ----------------- */
.bild-formbox {
    width: 100%;
    height: auto;
    border-bottom: 4px solid #383C4A;
    background: #404552;
}

.bild-formbox:hover {
    background: #383C4A;
}

.bild-formbox .picbox {
    float: left;
    height: 130px;
    width: 188px;
    /*154 x 146/204 margin war padding*/
    margin: .75rem 0 .75rem 1rem;
    border: 1px solid #383C4A;
    overflow: hidden;
}

.bild-formbox .picbox img {
    height: 100%;
    width: auto;
    margin: 0;
}

.bild-formbox form {
    background: transparent;
}

/*transparent damit farbe von ,bild-formbox durchscheint*/
.bild-formbox label,
.bild-formbox .fakelabel {
    width: 90px;
}

.bild-formbox input[type="text"] {
    width: calc(100% - 106px);
}

/*100% - 106 -> - label(incl. 8px marg - 8px input-marg) */


/*Adressen ----------------------------------------------------------------- */
#address-liste {
    max-height: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
    transition: all .6s .1s ease-in-out;
}

#address-liste.sichtbar {
    max-height: 700px;
    overflow: auto;
}

/* nur bei fehler/alert -> sonst roter streifen sicht bar, da alert padding-top/-bottom 0.5rem hat */
#address-liste.alert {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#address-liste.sichtbar.alert {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
}

#address-neuform {
    max-height: 0;
    overflow: auto;
    transition: all .6s .1s ease-in-out;
}

#address-neuform.sichtbar {
    max-height: 500px;
}



/*
----------------------------------------------------------------------------------------------------
haupteile, container ....
----------------------------------------------------------------------------------------------------
*/

/*header -> logo etc ----------------------------------------------------------------------------- */

#mainheader {
    position: fixed;
    z-index: 50;
    width: 100%;
    height: 52px;
    text-align: right;
    border-bottom: 1px solid #000;
    background: #383C4A;
    /* #fff; */
}

#headerlogo {
    float: left;
    max-height: 300px;
    width: auto;
    margin: .75rem 1.5rem 0 1rem;
}

#mainheader h1 {
    float: left;
    line-height: 2.2;
    color: #5294E2;
}

@media (max-width: 950px) {
    #mainheader #hh1-projectname {
        display: none;
    }
}

#mainheader p {
    float: right;
    padding: .75rem 1rem 0 1rem;
}


/*main-navi linke Seite -------------------------------------------------------------------------- */

#navi1 {
    position: fixed;
    height: calc(100% - 40px);
    /* 92 = header + footer (52 + 40) */
    width: 250px;
    padding-top: 52px;
    background: #404552;
}

#navi1:hover {
    overflow: auto;
}

#navi1-ul1 {
    padding: 30px 0 0 0;
    list-style: none;
}

#navi1-ul1 li {
    margin: 2px 0;
}

#navi1-ul1 li.abstandu {
    margin-bottom: 16px;
}

#navi1-ul1 li.abstando {
    margin-top: 16px;
}

#navi1-ul1 li a {
    display: block;
    padding: 12px 11px;
    font-size: 1rem;
    background: #383C4A;
    border: 1px solid transparent;
}

#navi1-ul1 li a:hover {
    color: #fff;
    background: #5294E2;
    text-decoration: none;
    border-color: #eee;
}

#navi1-ul1 li a.akt {
    color: #fff;
    background: #5294E2;
}

#navi1-ul1 li a.shop {
    padding-left: 45px;
    background: #383C4A url(icon-shop-sprite-eee-5294E2.svg) no-repeat 11px -49px;
}

#navi1-ul1 li a.shop:hover,
#navi1-ul1 li a.shop.akt {
    background-position: 11px -1px;
    background-color: #5294E2;
}

#navi1-ul1 li a.rentx {
    padding-left: 45px;
    background: #383C4A url(icon-rentx-sprite-eee-5294E2.svg) no-repeat 11px -49px;
}

#navi1-ul1 li a.rentx:hover,
#navi1-ul1 li a.rentx.akt {
    background-position: 11px -1px;
    background-color: #5294E2;
}

/* Submenu z.B. menupunkte von shop, rentx */
#navi1-ul1 .submenu a {
    padding-left: 45px;
    padding-top: 6px;
    padding-bottom: 6px;
    /* font-size: .875rem; */
}


/* main-content  -------------------------------------------------------------------------------- */

main {
    min-height: 100%;
    margin-left: 250px;
    margin-bottom: 40px;
    padding: 72px 1.25rem 0 1.25rem;
    background: #dde1e5;
}

#content-container {
    /* min-width: 800px;
   max-width: 100%; */
    width: 100%;
    margin: 0 auto;
    word-wrap: break-word;
}

#content-container.dashboard {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#content-container.size-xs,
#content-container.size-xs .buttonbar {
    max-width: 1000px;
}

#content-container.size-s,
#content-container.size-s .buttonbar {
    max-width: 1100px;
}

#content-container.size-m,
#content-container.size-m .buttonbar {
    max-width: 1250px;
}

#content-container.size-xl,
#content-container.size-xl .buttonbar {
    max-width: 1400px;
}

#content-container.size-xxl,
#content-container.size-xxl .buttonbar {
    max-width: 1600px;
}

/*Loginseite*/
#content-container.login {
    max-width: 400px;
    padding-top: 120px;
    text-align: center;
}

#content-container.login form {
    display: inline-block;
    margin: 0 auto;
    padding: 1rem;
    text-align: left;
}

#content-container.login form input[type="submit"] {
    width: 200px;
}

#content-container.login h1 {
    text-align: left;
}


main h1 {
    float: left;
    max-width: 700px;
    max-height: 35px;
    line-height: 1.45;
    overflow: hidden;
    /*margin-bottom: .75rem;*/
}

main h1:hover {
    overflow: auto;
}

.content-box {
    background: #404552;
}

.blaetterbar {
    margin-top: 1rem;
    padding: .25rem .5rem;
    text-align: center;
    background: #404552;
}

.blaetterbar.top {
    margin-top: 0;
    margin-bottom: 1rem;
}

.blaetterbar .zurueck {
    float: left;
    margin-right: 2rem;
}

.blaetterbar .weiter {
    float: right;
    margin-left: 2rem;
}


/* navi2 -> ist inzwischen mehr zu headline1 mutiert------------------------- */

#navi2,
#headline1 {
    /*display: block;*/
    height: 35px;
    margin-bottom: 1rem;
}

#navi2-ul1 {
    list-style: none;
    float: right;
}

#navi2-ul1 li {
    float: right;
    margin: 0 2px;
}

#navi2-ul1 li a {
    display: block;
    padding: 3px 12px;
    font-size: 1rem;
    background: #383C4A;
    border-radius: 3px;
}

#navi2-ul1 li a:hover {
    padding: 2px 11px;
    color: #fff;
    background: #5294E2;
    text-decoration: none;
    border: 1px solid #fff;
}

#navi2-ul1 li a.navi2akt {
    color: #fff;
    background: #5294E2;
}

/* ende navi2 -------------------------------------------------------------- */


/* katmonster -> oberste ul der kategorie-baum-darstellung ----------------- */
ul#katmonster {
    width: 100%;
    overflow: auto;
    list-style: none;
}

#katmonster li {
    white-space: nowrap;
}

#katmonster li a {
    font-size: 1rem;
    display: inline-block;
    margin-right: 6px;
    padding: 6px 0;
    color: #eee;
}

#katmonster li.inaktiv a {
    color: #889;
}

#katmonster li a:hover {
    text-decoration: none;
    color: #5294E2;
}

#katmonster li a.parent0 {
    font-weight: 700;
}

#katmonster li a.willichkat {
    color: #5294E2;
}

#katmonster li span.parent0 {
    font-size: 1rem;
    display: inline-block;
    margin-top: 3px;
    margin-right: 12px;
    margin-bottom: 3px;

    display: inline-block;

    padding: 0 5px;
    border: 1px solid #889;
    border-radius: 2px;
}

#katmonster ul.unterkat {
    margin-left: 25px;
    list-style: none;
}

.kat-monster-icon {
    margin-right: 6px;
    margin-bottom: -4px;
}

/* buttonbar in katmonster */
.small-buttonbar {
    background: transparent;
}

.small-buttonbar:hover {
    background: #383C4A;
}


/*Flex Boxen --------------------------------------------------------------- */
#mplistebox {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

#mpliste {
    flex: 7;
    background: #404552;
    border-bottom: 4px solid #383C4A;
}

/* katbaum -> box für katmonster auf seite mp-liste */
#katbaum {
    flex: 3;
    min-width: 280px;
    padding: .5rem 1.25rem;
    overflow: auto;
    background: #404552;
    border-right: 4px solid #383C4A;
    border-bottom: 4px solid #383C4A;
}

#katbaum h2 {
    color: #889;
}

#katlistebox {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

#formbox {
    flex: 1;
    min-width: 470px;
    padding: .5rem 0;
    background: #404552;
    border-bottom: 4px solid #383C4A;
}

#katbaumbox {
    flex: 1;
    min-width: 580px;
    padding: 1rem 1.25rem;
    overflow: auto;
    background: #404552;
    border-right: 4px solid #383C4A;
    border-bottom: 4px solid #383C4A;
}

#katbaumbox form,
#katbaumbox .infobox {
    max-height: 0;
    overflow: hidden;
    background: #383C4A;
    transition: all .6s .1s ease-in-out;
}

#katbaumbox .infobox {
    padding: 0px 6px;
}

#katbaumbox form.sichtbar,
#katbaumbox .infobox.sichtbar {
    max-height: 500px;
}

#katbaumbox .editlink {
    height: 34px;
    margin-top: 3px;
    margin-bottom: 3px;
    margin-left: 6px;
    padding-right: 32px;
    font-size: 1rem;
    font-weight: bold;
    background: transparent url(icon-edit-sprite-eee-5294E2-18x68px.svg) no-repeat top right;
}

#katbaumbox .editlink:hover,
#katbaumbox .editlink.akt {
    color: #5294E2;
    background-position: right bottom;
}


/*inhalts bereich -------------------------------------------------------------------- */

/*linkliste zum umschalten der einzelnen mp-bereiche (seite, bilder, links ...) ------ */
#switchi {
    font-size: 1rem;
    list-style: none;
    /* border-bottom: 4px solid #383C4A; */
    border-bottom: 4px solid #5294E2;
}

#switchi li {
    float: left;
    height: 31px;
    margin-right: .125rem;
    padding: .25rem 1.25rem 0 1.25rem;
    text-align: center;
    color: #eee;
    background: #383C4A;
    border: 1px solid #383C4A;
    border-bottom: 0;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    cursor: pointer;
}

#switchi li:hover,
#switchi li.akt {
    text-decoration: none;
    color: #fff;
    background: #5294E2;
}

#switchi li.akt {
    border-color: #5294E2;
}

#switchi li:hover {
    border-color: #fff;
}

#switchi li.one-tab {
    cursor: default;
}

#switchi li.one-tab:hover {
    border-color: #5294E2;
}


/*divs die per switch umgeschalten werden*/
section.formbox {
    display: none;
    /*outline: 1px solid red;
   max-height: 0;
   overflow: hidden;
   transition: all .6s 0s ease-in-out;*/
}

section.formbox.sichtbar {
    display: block;
    /*outline: 1px solid blue;
   max-height: 5000px;*/
}

#thevideo video,
#thevideo iframe {
    max-width: 100%;
    margin: 1.5rem auto;
}

/* ----------------------------------------------------------------------------------- */


/* footer ---------------------------------------------------------------------------- */
#mainfooter {
    position: fixed;
    left: 250px;
    bottom: 0;
    z-index: -1;
    height: 40px;
    width: calc(100% - 250px);
    text-align: left;
    background: #dde1e5;
}

#mainfooter a.pixolini {
    float: right;
    height: 25px;
    width: 80px;
    margin: .625rem 1rem .25rem 1rem;
    background: transparent url(copyright-pixolini-b2b4be-24px.svg) no-repeat center center;
}

#navfooter {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 2;
    width: 250px;
    height: 40px;
    background: #404552;
}

#scripttime {
    position: absolute;
    bottom: -40px;
    max-width: 150px;
    display: inline-block;
    padding: .625rem .5rem .5rem 1rem;
    color: #b2b4be;
    cursor: default;
    transition: all .2s ease-in-out;
}

#scripttime:hover {
    color: #dde1e5;
}

#scripttime.sichtbar {
    transform: translateY(-40px);
}

#footermails-ul {
    position: fixed;
    left: -220px;
    bottom: 40px;
    list-style: none;
    transition: all .4s ease-in-out;
    background: rgba(64, 69, 82, .8);
    outline: 1px solid #404552;
}

#footermails-ul.ausgefahren {
    transform: translateX(220px);
}

#footermails-ul li {
    padding: 4px 16px;
}

#footermails-ul li a {
    display: block;
    max-width: 220px;
    padding-left: 24px;
    text-decoration: none;
    color: #f1f1f1;
    background: transparent url(icon-at-email-sprite-eee-5294E2.svg) no-repeat left -1px;
}

#footermails-ul li a:hover {
    color: #5294E2;
    background-position: left -25px;
}


/*
 Login
 ------------------------------------------------------------------------------------------------------------------------------------------
*/

#login-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    padding-top: 52px;
}

#login-top {
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

#login-top h1 {
    width: 700px;
    margin-bottom: .5rem;
}

#login-content {
    flex: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2rem;
    background: #404552;
}

#login-content h2 {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 2;
}

#login-content.alert a {
    text-decoration: none !important;
}

#login-content label,
#login-content .fakelabel {
    width: 70px;
}

#login-content input[type="submit"] {
    width: 200px;
}

#login-bottom {
    flex: 6;
}

/*ende Login --------------------------------------------------------------------------------------------------------------------------- */