/* Basisdefinitionen */
/*
    --background-color-tertiary-inverse: #312a64;
    --background-color-tertiary: #ededf0;
    --background-color-secondary-inverse: #291d4f;
    --background-color-secondary: #f9f9fb;
    --background-color-inverse: #20123a;
    --background-color: #fff;
    --body-text-color-secondary-inverse: #cdcdd4;
    --body-text-color-secondary: #5e5e72;
    --body-text-color-inverse: #fff;
    --body-text-color: #42425a;
    --link-color-hover-inverse: #aaf2ff;
    --link-color-hover: #0250bb;
    --link-color-inverse: #80ebff;
    --link-color-visited-hover-inverse: #e7dfff;
    --link-color-visited-hover: #0250bb;
    --link-color-visited-inverse: #d9bfff;
    --link-color-visited: #b833e1;
    --link-color: #0060df;
    --title-text-color-inverse: #fff;
    --title-text-color: #20123a;
*/

:root {

    --font-size: 16px;

    --color-blue-126: #1264e3;
    --color-blue-5fb: #5fbdbd;
    --color-red-136: rgb(136, 87, 78);

    --brd-color-textarea: #ccc;
    --brd-color-red: red;
    --brd-color-black: black;

    --bg-color-white: white;

    --lnk-color: #3498db;

    --txt-color-blue: #00FFFF;
    --txt-color: #1264e3;

    --span-color: #db8624;

    --body-color: #1264e3;

    --main-color: #d7d7d7;

    --canvas-border-color: #777;

    --canvas-background-color: #FFF;

    --activeLink-background-color: yellowgreen;

    --submit-button-background-color: #4caf50;

    --submit-button-text-color: #fff;
}

/* Globale Stile */

body {
    font-family: Comic Sans MS, Arial, sans-serif;
    background-color: var(--bg-color-white);
    margin: 0;
    padding: 0;
    color: var(--txt-color);
    font-size: var(--font-size);
    width: 100%;
    height: 100%;
}

button:hover {
    cursor: pointer;
}

form {
    display: flex;
    flex-direction: column;
}

footer {
    color: var(--txt-color-blue);
}

footer h1, footer h2 {
    color: var(--color-blue-5fb);
}

footer a:link,
footer a:active,
footer a:visited {
    color: var(--txt-color-blue);
}

footer a:focus,
footer a:hover {
    color: var(--txt-color-blue);
    text-decoration: underline;
}

header {
    background-color: #1d43bc;
}

main header {
    background-color: var(--bg-color-white);
}

hr {
    border: 1px;
    border-color: var(--brd-color-black);;
    margin-top: 0;
    margin-bottom: 0;
}

input[type="submit"] {
    cursor: pointer;
}

input,
textarea {
    padding: 10px;
    border: 1px solid var(--brd-color-textarea);
    border-radius: 4px;
    margin: 5px;
}

input,
textarea {
    border-radius: 10px;
}

label {
    margin-top: 10px;
}

main {
    background-color: var(--bg-color-white);;
}

p {
    font-size: 1rem;
}

summary {
    cursor: pointer;
}

a:link,
a:active,
a:visited {
    color: var(--lnk-color);
    text-decoration: none;
}

a:focus,
a:hover {
    text-decoration: underline;
}


#canvas {
    border: 1px solid var(--canvas-border-color);
    background-color: var(--canvas-background-color);
    cursor: crosshair;
}


.activeBlock {
    opacity: 0;
}

.activeLink {
    background-color: var(--activeLink-background-color);
}

.alternate ul,
.alternate li {
    list-style-type: none;
    padding: 20px;
}

.btn_submit,
input[type="submit"] {
    background-color: var(--submit-button-background-color);
    color: var(--submit-button-text-color);
    padding: 10px;
    border: 1px solid var(--brd-color-textarea);
    border-radius: 4px;
}

/* Weitere Klassen */

.bd-main-slayer {
    border-top: 6px solid var(--brd-color-red);
    border-right: 6px solid var(--brd-color-red);
    border-bottom: 6px solid var(--brd-color-red);
    border-left: 6px solid var(--brd-color-red);
    margin-bottom: 1px;
}

.bgcolbrd_blue {
    background-color: var(--bg-color-white);
    border: 1px solid var(--brd-color-red);
    border-radius: 10px;
    min-height: 195px;
}

.bgcolbrd_lgray {
    border: 1px solid firebrick;
    background-color: var(--bg-color-white);;
}

.bg-footer-darkblue {
    background-color: rgb(40, 40, 155);
}

.bg-main-jump {
    background-color: #d5c0e1;
}

.bg-main-white {
    background-color: var(--bg-color-white);;
}

.bg-blue-126 {
    background-color: var(--color-blue-126);
}

.bg-main-lgray {
    background-color: #bab8ae;
}

.bg-main-slayer {
    background-color: #ff0000;
}

.bg-list-item1 {
    background-color: var(--bg-color-white);
}

.bg-mainWindowBg {
    background-color: #d7d7d7;
}

.brd-thin-red {
    border: 2px solid firebrick;
}

.brd1CCC {
    border: 1px solid #565050;
}

.cookie-banner {
    min-height: 10%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background-color: #f1f1f1;
    color: #333;
    text-align: center;
    font-size: 14px;
}

.cookie-banner a:link,
.cookie-banner a:visited,
.cookie-banner a:active {
    text-decoration: underline;
}

.cookie-banner a:focus,
.cookie-banner a:hover {
    text-decoration: none;
}

.cookie-banner__button {
    background-color: #4CAF50;
    color: var(--bg-color-white);
    border: none;
    padding: 10px 20px;
    font-size: 14px;
    cursor: pointer;
}

.cookie-banner__button:hover {
    background-color: #69bc6c;
}

.cookie-banner__button_NO {
    background-color: rgb(235, 26, 26);
    color: var(--bg-color-white);
    border: none;
    padding: 10px 20px;
    font-size: 14px;
    cursor: pointer;
}

.cookie-banner__button_NO:hover {
    background-color: var(--brd-color-red);
}

.contactForm {
    background-color: firebrick; /* #eae9e9 */
    color: var(--bg-color-white);
    border: 1px solid var(--brd-color-red);
    padding: 20px;
}

.css_adr_location::after {
    content: " 42, Wuppertal, Germany";    
}

.css_adr_name::after {
    content: " Spano\'";    
}

.css_mail_name::after {
    content: " info@fourwww.com";    
}

.draggableDiv a:link,
.draggableDiv a:active,
.draggableDiv a:link,
.draggableDiv a:hover,
.draggableDiv a:focus {
    text-decoration: none;
}

.draggableDiv:hover {
    transform: translateY(3px);
    cursor: pointer;
}

.draggableDiv {
    box-shadow: 0px 4px 8px var(--brd-color-black);
}

.draggableDiv:hover {
    transform: translateY(3px);
    box-shadow: 0px 6px 12px var(--brd-color-black);
}

.disabled-button {
    opacity: 0.5;
    cursor: not-allowed;
}

.display.flex {
    display: flex;
    align-self: flex-start;
}

.display.flex.space-between {
    justify-content: space-between;
}
.display.flex.responce {
    flex-direction: row;
}

.form {
    color: var(--bg-color-white);
    padding: 20px;
}

.hTitle {
    color: var(--lnk-color);
    font-size: 2em;
    margin: 0;
    padding: 0 5px;
    font-weight: normal;
    background-color: var(--txt-color-blue);
    border-radius: 10px;
}

.h2 {
    font-size: 1.5em;
}

.h3 {
    font-size: 1.17em;
    color: var(--color-red-136);
}

.header-color-white h1,
.header-color-white h2,
.header-color-white h3,
.header-color-white h4,
.header-color-white h5,
.header-color-white h6 {
    color: var(--bg-color-white);;
}

.header_topic_left {
    margin-left: 15px;
}

.header_topic_leftright {
    margin-left: 20px;
}

.header_topic_border {
    display: table-cell;
    border: 2px dashed var(--txt-color-blue);
}

.inactiveBlock {
    opacity: 0.4;
}

.jumpLink {
    position: relative;
}

.jumpLink::after {
    content: " →";
    position: absolute;
    left: 100%;
    margin-left: 5px;
    transition: transform 0.3s;
}

.jumpLink:hover::after {
    transform: translateX(5px);
}

.lnk-color-white,
.lnk-color-white a:link,
.lnk-color-white a:active,
.lnk-color-white a:visited,
.lnk-color-white a:focus,
.lnk-color-white a:hover {
    color: var(--bg-color-white);
}

.lnk-show a:link,
.lnk-show a:active,
.lnk-show a:visited {
    text-decoration: underline;
}

.lnk-show a:focus,
.lnk-show a:hover {
    text-decoration: none;
}

.lnk-show span {
    font-weight: bold;
}

.ma10 {
    margin: 10px;
}

.malt20 {
    margin-left: 20px;
}

.marr30 {
    margin-right: 30px;
}

.margin.auto {
    margin: 0 auto;
}

.minHeight410 {
    min-height: 410px;
}

.ml {
    list-style-type: none;
}

.mp0 {
    margin: 0;
    padding: 0;
}

.mwidth_one_column {
    max-width: 55%;
}

.mwidth_two_column {
    max-width: 900px;
}

.mwidth_two_column_home {
    max-width: 90%;
}

.pa1015 {
    padding: 10px 15px;
}

.pa5 {
    padding: 5px;
}

.pa20 {
    padding: 20px;
}

.pa25 {
    padding: 25px;
}

.pa60 {
    padding: 60px;
}

.pa1015 {
    padding: 10px 15px;
}

.pa2040 {
    padding: 20px 40px;
}

.pb0 {
    padding-bottom: 0;
}

.pb50 {
    padding-bottom: 50px;
}

.pb150 {
    padding-bottom: 150px;
}

.plr40 {
    padding-left: 40px;
    padding-right: 40px;
}

.ptb9 {
    padding-bottom: 9px;
    padding-top: 9px;
}

.ptb25 {
    padding-bottom: 25px;
    padding-top: 25px;
}

.pt0 {
    padding-top: 0;
}

.pt10 {
    padding-top: 25px;
}

.pt50 {
    padding-top: 50px;
}

.pt150 {
    padding-top: 150px;
}

.rounded-large {
    border-radius: 10px;
}

.rounded-mega {
    border-radius: 140px;
}

.rwidth65 {
    max-width: 65%;
}

.rpa15 {
    padding: 15px;
}

.txt-color-white {
    color: var(--bg-color-white);
}

.txt-version-color {
    color: var(--color-blue-126);
}

.txt-align.center {
    text-align: center;
}

.ul {
    list-style-type: none;
    padding: 0;
}

.wid250 {
    min-width: 310px;
    max-width: 310px;
}

.width25vh.responce {
    width: 25%;
}

/* media */
@media only screen and (max-width: 880px) {
    .display.flex.responce {
        flex-direction: column;
    }

    .pa60 {
        padding: 10px;
    }
    .rwidth65 {
        max-width: 100vh;
    }
    .plr40 {
        padding-left: 10px;
        padding-right: 10px;
    }

    .pa1015 {
        padding: 10px 0;
    }

    .mwidth_one_column {
        max-width: 95%;
    }

    .mwidth_two_column {
        max-width: 95%;
    }

    .width25vh.responce {
        width: 5%;
    }
}