@import url("sys/colors.css.php");

/* Backgrounds */
label div, #menu_checkbox:checked + label div, ul li, ul {
background-color: var(--background);
}

/* Text */
body {
color: var(--text);
font-size: 12px;
}
.body2, main, body {
background-color: var(--body2);
}

/* Standard-Links */
a:link, a:visited, a:active {
color: var(--link);
text-decoration: none;
}
a:hover {
color: var(--link-hover);
text-decoration: none;
}

/* Navigation */
ul li a, ul li a.active {
color: var(--navitext)!important;
text-decoration: none;
}
ul li a:hover, #toggleButton {
color: var(--navitext)!important;
background-color: var(--nav-hover);
transition: 0.3s;
}
ul li a.active {
color: var(--navitext)!important;
background-color: var(--nav-hover);
}
/*Border Color */
.col-container .col {
background-color: var(--container);
}
.col-container .col {
border: 1px solid var(--containerborder);
border-radius: 4px;
}


.content-display {
margin-top:0px;
margin-top:-10px;
}
/* Allgemeine Styles */
body {
font-family: Verdana, sans-serif;
font-size: 13px;
margin: 0;
height: 100%;
}

main {
font-family: Verdana, sans-serif;
font-size: 13px;
margin: 25px 25px;
}

* {
outline: transparent;
-webkit-tap-highlight-color: transparent;
}

header {
width: 100%;
margin: 0;
text-align: left;
position: relative;
justify-content: flex-start;
}
header .banner {
width: 100%;
height: 250px;
margin: 0;
padding: 0;
}

header .banner img {
width: 100%;
height: 250px;
object-fit: cover;
display: block;
}

#menu_checkbox {
display: none;
}

label {
    position: absolute;
    top: 120px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    width: 30px;
    height: 30px;
    cursor: pointer;
    transition: 0.3s ease all;
    z-index:1000!important;
}

label div {
    width: 6px;
    height: 6px;
    margin-bottom: 6px;
    border-radius: 4px;
    transition: 0.3s ease width, 0.3s ease margin-bottom, 0.3s ease background-color;
    z-index:1000!important;
}
label div:first-child {
    width: 22px;
    z-index:1000!important;
}

label div:nth-child(2) {
    width: 15px;
    z-index:1000!important;
}

label div:last-child {
    width: 30px;
    margin-bottom: 0;
    z-index:1000!important;
}


#menu_checkbox:checked + label {
transform: translateY(-95%) rotateZ(-90deg);
}

#menu_checkbox:checked + label div {
background-color:var(--navitext)!important;
width: 6px;
margin-left: 12px;
margin-bottom: 3px;
}

/* Navigation */
ul {
list-style: none;
padding: 0;
margin: 0;
height: 55px;
display: flex;
align-items: center;
justify-content: flex-start;
box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

ul li {
margin: 0 0px;
}

ul li a {
text-decoration: none;
padding: 15px 20px;
display: inline-block;
}

ul li a.active {
box-sizing: border-box;
}



/* Mobile Styles */
/* Responsives Settings for mobile devices (Smartphones) */

@media (max-width: 767px) {

.error-404.left {
  order: 1;
  width:0%!important;
  padding:0px!important;
}
.error-404.right {
  order: 2;
  width:100%!important;
  padding:10px;
  margin-top:50px!important;
  padding-bottom:100px!important;
}
.error-404.right img {
  width:100%;
}

#errortext1 { display:flex; position:relative; top:20px!important; left:20px!important; font-weight:bold; font-family:verdana; color:#404865; }
#errortext2 { display:flex; position:relative; top:40px!important; left:20px!important; font-weight:bold; font-family:verdana; color:#404865; }

#menu_checkbox:checked ~ ul {
display: flex;
flex-direction: column;
position: absolute;
top: 50px!important;
left: 0;
width: 100%;
z-index: 10;
}

ul {
display: none;
flex-direction: column;
list-style: none;
margin: 15px 0px;
padding: 0;
width: 100%;
text-align: center;
}

ul li {
margin: 0 0;
padding: 5.4px;
width: 50%;
box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

ul li a {
text-decoration: none;
padding: 10px 15px;
display: block;
}

header .banner {
height: auto;
}

header .banner img {
height: auto;
}

header .banner {
border-bottom:1px solid var(--background);
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}

.logo {
width:90%!important;
height:auto!important;
}
.logo2 {
right:0px!important;
padding:0!important;
margin-right:60px!important;
}

.blog-container {
display: flex;
flex-direction: column;
text-align: center;
width:100%;
height:auto;
border:1px dashed var(--containerborder);
border-bottom:0px dashed var(--containerborder);
border-radius:5px;
}

.blogimage {
margin-top: 10px;
margin-bottom: 8px;
border:1px dashed var(--containerborder);
margin-right:-20px;
}

.blogcontent {
display: flex;
flex-direction: column;
}

.blogtitle {
border-right: none;
border-bottom: none;
justify-content: center;
width:93%!important;
border:0px!important;
border-bottom: 1px dashed var(--containerborder)!important;
}
.search-result h3,
.search-result p {
padding: 0px !important;
}

.search-container {
position: fixed;
left: 80px;
top: -4px;
}
.search-toggle {
transform: scale(0.6)!important;
}
.col-container {
flex-direction: column;
}

.col-container .col {
width: 100%;
margin-bottom: 0px;
border:0px;
}

.col.left {
order: 1;
}

.col.right {
order: 2;
}
.col img {
display: block;
margin: 0 auto;
max-width: 90%;
height: auto;
}
.col[align="right"],
.col[align="left"] {
text-align: center !important;
}

/* Youtube Video mobile settings test*/
.responsive-video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
width: 100%;
background: #000;
}
.responsive-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.videomiddle {
width:100%;
height:100%;
display: flex;
align-items: center;
justify-content: center;
}
/*
Blocks
Test Mobile Backgrounds

#test::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
border-radius: 10px 10px 60px 60px;
border-bottom:20px solid #4c5966;
border-top:0px solid #4c5966;
left: -25px;
right: -25px;
width: calc(100% + 50px);
box-shadow: 0px 4px 10px -6px rgba(0, 0, 0, 1);
left: -25px;
right: -25px;
width: calc(100% + 50px);
padding-bottom:40px;
}
.test-hidden::after {
display: none !important;
}
*/

.topbar {
width: 100%;
height: 40px;
box-shadow: none!important;
background-color: transparent!important;
}
.topbar-search {
display: flex;
align-items: center;
gap: 5px;
background: var(--Option1);
border: 0px solid var(--containerborder);
border-top:0px;
border-bottom:0px;
border-radius: 5px;
padding: 0px;
height:30px;
margin-top:4px!important;
margin-left:-0px;
}

.topbar-search input {
border: none;
outline: none;
padding: 5px;
font-size: 14px;
width: 50px!important;
}
.socialcontainer {
width:98%!important;
display: flex;
align-items: right;
justify-content: right;
margin-top:30px;
}
.topbar1 {
flex-direction: column;
}
.topbar2 {
width: 100%;
justify-content: left;
}
}

/* extra for dektop */
@media (min-width: 768px) {
label {
display: none !important;
}
}

/* tablets test */
@media (min-width: 768px) and (max-width: 1024px) {

header .banner {
height: auto;
}

header .banner img {
height: auto;
object-fit: cover;
}

}
.col {
flex: 1;
padding: 10px;
min-height: 100px;
}
.col:empty {
flex: 0 0 10%;
padding: 0;
}

.col-container .col:not(:empty):nth-child(2) {
flex: 3;
}
.col-container {
display: flex;
gap: 10px;
flex-wrap: wrap;
pointer-events: none;
border:0px;
}
.col-container .col {
display: block;
flex: 1;
padding: 30px 50px;
box-sizing: border-box;
pointer-events: auto;
position: relative;
}
.col-container .col.column-border {
border: none !important;
outline: 0px solid transparent;
}
.col-container .col.background-hidden {
background-color: transparent !important;
}
.col-container .col:hover {
outline: 0px dashed #aaa;
}
.col-container .col {
min-height: 10px;
}
.col-container .left {
flex: 0 0 30%;
}
.col-container .right {
flex: 0 0 69%;
}
.col-container .col[align="right"] {
text-align: right !important;
}
.col-container .col[align="center"] {
text-align: center !important;
}
.col-container .col[align="left"] {
text-align: left !important;
}

/* test container*/
.coltest-container2 {
width: 100%;
overflow: hidden;
min-height: 50px;
padding:0px;
}

.coltest-container2 .col {
float: left;
width: 50%;
min-height: 50px!important;
padding: 0;
box-sizing: border-box;
}

.left2 {
background-color: var(--container);
min-height: 50px!important;
}

.right2 {
background-color: var(--container);
min-height: 50px!important;
}

.title {
margin-left: 10%;
padding-top:10px;
}

.logo {
width:26%;
height:26%;
padding:5px;
margin-left:30px;
}
.logo2 {
width:11%;
height: auto;
right:0px;
padding:0;
justify-content: center;
align-items: center;
}
.title1 {
font-size:20px;
}
.title2 {
font-size:15px;
}
.hrline {
border: 0px;
border-top: 1px dashed var(--containerborder);
width:80%;
margin-top:40px;
}
#cookiePopup {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #f0f7ff;
padding: 20px;
text-align: center;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
width: 98%;
}
#cookiePopup.show {
display: block;
}
.accept {
border: 2px solid #ccc;
border-radius: 50px;
background-color: var(--containerborder);
font-family: Arial, sans-serif;
font-size: 14px;
height: 40px;
color: #555;
margin-right: 40px;
padding: 0 20px;
cursor: pointer;
box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.1);
transition: border-color 0.3s ease, transform 0.2s ease;
}

/* Youtube Video tablet test*/
.responsive-video {
position: relative;
padding-bottom: 28.125%;
height: 0;
overflow: hidden;
width: 50%;
background: #000;
}
.responsive-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.videomiddle {
width:100%;
height:100%;
display: flex;
align-items: center;
justify-content: center;
}
.sharecontainer {
display: inline-block!important;
}
.share {
border: 0px solid #ccc;
border-radius: 50px;
background-color: transparent;
height: 40px;
color: #555;
padding: 0 5px;
cursor: pointer;
box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.5);
transition: border-color 0.3s ease, transform 0.2s ease;
}
.share:hover {
transform: scale(1.3);
}
.share:active {
transform: scale(1);
}
.share::after {
content: attr(data-tooltip);
position: absolute;
bottom: -20px;
left: 50%;
width:110px;
transform: translateX(-50%);
color: #404040;
font-family: Verdana, sans-serif;
font-size: 10px;
padding: 5px 8px;
border-radius: 4px;
opacity: 0;
visibility: hidden;
transition: clip-path 0.1s ease;
display: flex;
align-items: center;
justify-content: center;
font-weight:bold;
}
.share:hover::after {
opacity: 1;
visibility: visible;
}
.share:hover .colum-image {
opacity: 0;
transition: opacity 0.4s ease;
}
.newsletter {
border-top:0px solid #2ca9bc;
border-bottom:1px solid #2ca9bc;
border-left:0px solid #2ca9bc;
border-right:0px solid #2ca9bc;
border-radius:2px;
background-color:transparent;
font-family:Verdana, sans-serif;
font-size:10px;
color:#606060;
width:300px;
}
.newsletter::placeholder {
opacity: 0.5;
color: #606060;
text-align: center;
}

.newsletterbutton {
border: 0px solid #F9F9F9;
border-radius: 6px;
background-color: --Option1;
margin-top:10px;
margin-right:20px;
height: 30px;
color: #555;
cursor: pointer;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
transition: border-color 0.3s ease, transform 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
font-weight:bold;
}
#toggleButton {
background: var(--background);
color: white;
border-radius: 5px;
cursor: pointer;
padding: 5px 15px;
border: none;
margin-bottom: 10px!important;
display: flex;
align-items: center;
justify-content: center;
font-weight:bold;
}
#messageContainer {
width: 250px;
border-radius: 5px;
position: fixed;
bottom: 150px;
overflow: hidden;
background-color: var(--body2);
left:30px;
transition: height 0.3s ease-in-out;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
}
#messageForm {
padding: 10px;
}
.inputmail {
border:1px dashed var(--containerborder);
border-top: 0px;
width: 93%;
padding:5px;
margin-top:15px;
}
textarea {
width: 93%;
height: 80px;
margin-top: 0px;
border:1px dashed var(--containerborder);
resize: none;
border-radius: 5px;
padding:5px;
}
.send {
background: var(--background);
color: white;
border: none;
padding: 10px;
border-radius: 5px;
cursor: pointer;
margin-top: 20px;
margin-left:0px!important;
}
button {
color: white;
border: none;
padding: 10px;
border-radius: 5px;
cursor: pointer;
margin-top: 5px;
margin-left:30px;
}
.supporttext {
color: var(--nav-hover);
font-size: 15px;
margin-left: 13px;
margin-top: 8px;
margin-bottom: 5px;
font-weight: bold;
}
.blog-container {
}
.blogimage {
width:80px;
height:80px;
border:0px dashed var(--containerborder);
border-radius:5px;
}
.blogtitle {
border:0px;
border-bottom:1px dashed var(--containerborder);
border-right:1px dashed var(--containerborder);
background-color: var(--container);
width:100%;
border-radius:5px;
flex-grow: 1;
display: flex;
align-items: center;
padding-left:20px;
}
.titelspace{
margin-right:20px;
}
.blogcontent {
width:91.5%;
padding: 30px 80px 2px 5px;
}
.blogdate {
width:100%;
text-align:right;
margin-top:20px;
margin-bottom:100px;
border-bottom:1px dashed var(--containerborder);
border-right:1px dashed var(--containerborder);
border-radius:5px;
flex-grow: 1;
display: flex;
align-items: flex-end;
justify-content: right;
}
.hidden { display: none; }
.search-result {
padding: 10px;
border-bottom: 1px solid #ddd;
margin-bottom: 10px;
}
.search-result h3 {
margin: 0;
font-size: 1.2em;
padding-left: 100px;
padding-right: 100px;
}
.search-result p {
color: #555;
padding-left: 150px;
padding-right: 100px;
}
.search {
border: 0px solid #F9F9F9;
border-radius: 6px;
background-color: --Option1;
margin-top:10px;
margin-right:20px;
height: 30px;
color: #555;
cursor: pointer;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
transition: border-color 0.3s ease, transform 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
font-weight:bold;
}
.search-container {
position: absolute;
right: 100px;
z-index: 1000;
}
.search-box {
position: absolute;
top: 50px;
width: 185px;
border: 1px solid #ccc;
border-radius: 5px;
background: white;
transition: opacity 0.3s ease, transform 0.3s ease;
opacity: 0;
transform: translateY(-10px);
display: none;
z-index: 1000;
}
.search-box.visible {
display: block;
opacity: 1;
transform: translateY(0);
z-index: 1000!important;
}
.search-box input {
width: 90%;
padding: 8px 8px 10px;
border: none;
outline: none;
font-size: 14px;
border-radius: 5px;
z-index: 1000!important;
}
.search-btn {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
border: none;
background: transparent;
cursor: pointer;
z-index: 1000!important;
}
.search-btn img {
width: 15px;
height: auto;
z-index: 1000!important;
}
.search-toggle {
width: 40px;
height: 40px;
background: #507c73;
border: none;
border-radius: 0px 0px 5px 5px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease;
margin: 0px;
position: relative;
z-index: 1000!important;
}
.search-toggle:hover {
background: #4C5966;
z-index: 1000!important;
}


.custom-button-wrapper {
position: relative;
display: inline-block;
margin: 5px;
}

.custom-button_user {
display: inline-block;
background-color: var(--background);
padding: 8px 12px;
border: none;
color: var(--navitext)!important;
cursor: pointer;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
.custom-button_user:hover {
transition: 0.3s;
background-color: var(--nav-hover);
}

.remove-button_user {
visibility: hidden;
}
.edit-roundbutton_user {
visibility: hidden;
}

.custom-roundbutton-wrapper {
position: relative;
display: inline-block;
margin: 5px;
}

.custom-roundbutton_user {
display: inline-flex;
justify-content: center;
align-items: center;
background-color: var(--background);
border-radius: 50%;
min-width: 40px;
min-height: 40px;
padding: 10px;
border: none;
color: var(--navitext) !important;
cursor: pointer;
text-align: center;
font-size: 17px;
line-height: 1;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);

/* WICHTIG: für immer rund */
width: auto;
height: auto;
aspect-ratio: 1 / 1;
}

.custom-roundbutton_user:hover {
transition: 0.3s;
background-color: var(--nav-hover);
border-radius: 50%;
}


.remove-roundbutton_user {
visibility: hidden;
}




.support1 {
background-color: var(--background);
color: var(--navitext)!important;
padding:1px 10px;
border-radius:3px;
}
.support2 {
border: 1px dashed var(--containerborder);
background-color:#f5f5f5;
}
.support3 {
background-color: var(--container);
padding:10px 0px;
width:96%;
background-color:#f5f5f5;
}
.support4 {
background-color: var(--container);
padding:10px 0px;
width:96%;
}
.support5 {
background-color: var(--nav-hover);
color: var(--navitext)!important;
padding:1px 10px;
border-radius:3px;
}
.support6 {
background-color: var(--container);
color: #008000;
padding:1px 10px;
border-radius:3px;
}
.support7 {
background-color:#f5f5f5;
width:100%;
}

.topbar {
position: absolute;
width: 100%;
height: 40px;
box-shadow: rgba(50, 50, 93, 0.05) 0px 2px 5px -1px, rgba(0, 0, 0, 0.1) 0px 1px 3px -1px;!important;
background-color: rgba(255, 255, 255, 0.4);
}
.topbar1 {
display: flex;
width: 100%;
}
.topbar2 {
flex: 1;
display: flex;
}




.bottombar {
display:flex;
position: absolute;
width: 100%;
border-top: 1px solid #EEEEEE;
justify-content: space-between;
align-items: center;
padding: 0 0px;
margin-top:30px;
padding-bottom:30px;
}
.bottombar1 {
display: flex;
justify-content: flex-start;
flex: 1;
width: 33%;
}
.bottombar2 {
display: flex;
justify-content: flex-end;
flex: 2;
width: 33%;
}
.bottombar3 {
display: flex;
justify-content: center;
flex: 3;
width: 33%;
}



.topbar-search {
display: flex;
align-items: center;
gap: 5px;
background: var(--Option1);
border: 0px solid var(--containerborder);
border-top:0px;
border-bottom:0px;
border-radius: 5px;
padding: 0px;
height:30px;
margin-top:4px!important;
box-shadow: rgba(50, 50, 93, 0.05) 0px 2px 5px -1px, rgba(0, 0, 0, 0.1) 0px 1px 3px -1px;!important;
}
.topbar-search input {
border: none;
outline: none;
padding: 5px;
font-size: 14px;
width: 150px;
border-radius: 5px;
}
.topbar-search button {
border: none;
background: transparent;
cursor: pointer;
border-radius: 5px;
}
.topbar-search img {
display:flex;
width: 15px;
height: auto;
}

.social-links {
display: flex;
justify-content: space-evenly;
align-items: center;
gap: 10px;
max-width: 50%;
white-space: pre-line;
}
.social-icon {
color: var(--background)!important;
}
.social-icon:hover {
color: var(--nav-hover)!important;
}
.social-icon svg {
width: 22px;
height: 22px;
padding-top:9px;
}
.social-icon a svg {
width: 22px;
height: 22px;
}
.socialcontainer {
width:100%;
display: flex;
justify-content: right;
padding-right:40px;
padding-top:30px;
}




.footer-nav {
padding-left: 48px !important;
padding-top: 25px !important;
text-align: left !important;
}

.footer-link {
margin-bottom: 10px !important;
}

.footer-link a {
text-decoration: none !important;
color: #666 !important;
font-size: 12px !important;
display: block !important;
}

.footer-link a:hover {
color: #333 !important;
text-decoration: underline !important;
}

.footer-link a::before {
padding-left: 35px !important;
content:"\2022"!important;
color: #666 !important;
position: absolute !important;
left: 0 !important;
}

.forminput1 {
border:1px dashed var(--containerborder);
outline: none;
padding: 5px;
font-size: 14px;
width: 100%!important;
}
.forminput2 {
border:1px dashed var(--containerborder);
outline: none;
padding: 5px;
font-size: 14px;
width: 100%!important;
height: 300px;
margin-top:20px;
}
.formbutton {
border:0px dashed var(--containerborder);
background: var(--background);
outline: none;
padding: 5px;
font-size: 14px;
width: 100%!important;
height: 40px;
margin-top:20px;
margin-left:0px;
color: var(--text);
}

.category-wrapper {
margin-bottom: 80px;
}
.category-select {
padding: 15px 15px;
font-size: 14px;
border:1px dashed var(--containerborder);
border-radius: 4px;
background: var(--option1);
cursor: pointer;
}
.responsive-video {
position: relative;
width: 1024px;
height: 350px;
overflow: hidden;
background: #000;
}
.responsive-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.videomiddle {
width:100%;
height:100%;
display: flex;
align-items: center;
justify-content: center;
}
.remove-video-btn {
display:none;
}

.blockmovedown {
display:none;
}
.blockmoveup {
display:none;
}

#editableArea {
    font-size: 15px;
}

#editableArea .boldcss {
    font-weight: bold;
}

#editableArea .italiccss {
    font-style: italic;
}

#editableArea .underlinecss {
    text-decoration: underline;
}

#editableArea h3 {
    font-size: 1.8em;
    font-weight: normal;
    display: inline;
}
#editableArea h4 {
    font-size: 1.5em;
    font-weight: normal;
    display: inline;
}
#editableArea h3,
#editableArea h4,
#editableArea p {
    display: block;
    margin: 0;
    padding: 4px 0;
    line-height: 1.4;
}
#editableArea ul {
    margin: 0;
    padding: 0;
    padding-left: 25px;
    list-style-type: disc;
    background-color:transparent;
    box-shadow: none;
    height:25px;
}
#editableArea li {
    margin: 0;
    padding: 0;
    background-color:transparent;
    box-shadow: none;
    text-align:left;
}

.block-icons {
display:none;
}

.widget {
    display: none;
}
.widgettxt {
    display: inline;
}

.deleteouter-button {
    display: none;
}




.error-container {
  display: flex;
}
.error-container .error-404 {
  width: 100%;
  margin-bottom: 0;
  border: 0;
}
.error-404.left {
  order: 1;
  width:28%;
  padding:10px;
}
.error-404.right {
  order: 2;
  width:72%;
  padding:10px;
  margin-top:40px;
}

#errortext1 { display:flex; position:relative; bottom:70px; left:295px; font-weight:bold; font-family:verdana; color:var(--text); }
#errortext2 { display:flex; position:relative; bottom:40px; left:295px; font-weight:bold; font-family:verdana; color:var(--text); }

.error-image {
  width: 628px;
  height: 339px;

  -webkit-mask: url(sys/404error.png) no-repeat center;
  mask: url(sys/404error.png) no-repeat center;

  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--text);
}