/* ---------------------------
   --   COMMON  in Library ---
   --------------------------- */
:root {
    --common_background_overlay: #eeeeee55;
    --background_header: #262626;
    --default_text: black;
    --default_background_main: #c4c4c4;
    --default_text_main: #dfdfdf;
    --default_text_sub: #8b8b8b;
    --default_module_text: black;
    --default_textmenu_hover: #faaa04;
    --default_menu_selected: orange;
    --default_menu_main: var(--default_text_main);
    --default_pw_neutral: grey;
    --default_pw_low: red;
    --default_pw_medium: orange;
    --default_pw_height: var(--default_text_sub);
    --default_border_color: grey;
    --default_font: "Verdana, Geneva, Tahoma, sans-serif";
}
body {
    margin: 0 auto;
    padding: 0px;
    height: 100%;
    width: 100%;
    font-family: "Arial", "Times New Roman";
}
a:visited {
    text-decoration: none;
    color: grey;
}
a:link {
    text-decoration: none;
    color: grey;
    cursor: pointer;
}
a:hover {
    text-decoration: none;
    color: black;
}
* {
    box-sizing: border-box;
}
.pin_center {
    height: 100vh;
    width: 100vw;
    position: fixed;
    background: linear-gradient(0deg, var(--default_background_main), white);
}
.pin_inner_title {
    width: 80%;
    margin: 0 auto;
    margin-top: 10% !important;
    text-align: center;
}
.pin_input {
    background: white;
}
.pin_inner {
    width: 20%;
    min-width: 250px;
    margin: 0 auto;
    margin-top: 5% !important;
}
.checkmark::after {
    content: ' ✔';
    color: green; /* Optional: Farbe des Hakens */
}
.classSpinner {
    display:none;
    width: 128px;
}
.passwortLost {
    display: none;
    padding: 5px;
    color: var(--default_text);
}
.passwortLost:hover {
    color: black;
    text-decoration: underline;
    cursor: pointer;
}
.progressLength {
    margin-top: 10px;
    height: 6px;
    width: 100%;
    border: 1px solid black;
}
.progressLengthLine {
    height: 5px;
    width: 100%;
    background-color: grey;
}
.registerHint {
    display:none;
    margin-top: 20px;
    padding: 10px;
}
.registerCode {
    display:none;
    margin-top: 20px;
    padding: 10px;
}
.classAccess {
    /*margin: 10px 10px 10px 10px;*/
    display: block;
    margin-top: 10px;
}
.classHide {
    display: none;
}
/* ----------------------------------------------- */
.col-05 {width: 4.15%;}
.col-1 {width: 8.33%;}
.col-15 {width: 12.49%;}
.col-2 {width: 16.66%;}
.col-26 {width: 22.22%;}
.col-3 {width: 25%;}
.col-S1 {width: 31%;}
.col-4 {width: 33.33%;}
.col-S2 {width: 38%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
[class*="col-"] {
    float: left;
    border: 1px solid transparent;
}
.collection-s-0a {width: 4%;}
.collection-s-0a_3 {width: unset;}
.collection-s-0a_2 {width: 0%;}
.product-s-0b {width: 6.7%;}
.product-s-05 {width: 4.15%;}
.product-s-1 {width: 8.33%;}
.product-s-15 {width: 12.49%;}
.collection-s-2 {width: 20%;}
.collection-s-2_3 {width: 33%; padding-left:10px;}
.collection-s-2_2 {width: 50%;}
.product-s-26 {width: 22.22%;}
.product-s-3 {width: 25%;}
.product-s-4 {width: 33.33%;}
.product-s-5 {width: 41.66%;}
.product-s-6 {width: 50%;}
.product_fixed-s-6 {width: 50%;}
.product-s-7 {width: 58.33%;}
.product-s-8 {width: 66.66%;}
.product-s-9 {width: 75%;}
.product-s-10 {width: 83.33%;}
.product-s-11 {width: 91.66%;}
.product-s-12 {width: 100%;}
[class*="-s-"] {
    float: left;
    /* border: 2px solid transparent; */
    transition: 1s;
}
.line10 {
    height: 10px;
}
.line20 {
    height: 20px;
}
.line50 {
    height: 50px;
}
.line100 {
    height: 100px;
}
.line150 {
    height: 150px;
}
.line200 {
    height: 200px;
}
.line250 {
    height: 250px;
}
.lineMax {
    height: 1500px;
}
#fireworksCanvas {
    position: fixed; /* ODER absolute; 'fixed' bleibt beim Scrollen an der Position */
    top: 0;
    left: 0;
    width: 100vw;   /* 100% der Viewport-Breite */
    height: 100vh;  /* 100% der Viewport-Höhe */
    pointer-events: none; /* WICHTIG: Erlaubt Klicks und Interaktionen auf Elementen darunter */
    z-index: 3000;  /* WICHTIG: Stellt sicher, dass das Canvas ÜBER allem anderen liegt */
    background-color: transparent; /* Macht den Canvas-Hintergrund transparent */
}
.footerPosition {
    height: unset;
}
.footerMobile {
    text-align: right;
    padding-right: 20px;
}
.footerMobileCopyright {
    text-align: left;
    padding-left: 20px;
}

.footerPosition {
    position: fixed;
    height: 30px;
    bottom: 0;
    z-index: 1000;
}
.debugClass {
    color: orangered;
}
.classCross {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 20px;
    opacity: 50%;
}
.classCross:hover {
    cursor: pointer;
    opacity: 100%;
}
.classUsername {
    padding: 10px;
    color: var(--default_module_text);
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
}
.loginContainer {
    display: none;
    position: relative;
    width: 500px;
    height: 400px;
    min-width: 500px;
    min-height: 270px;
    left: 20px;
    top: 20px;
    background-color: lightsteelblue;
    border: 1px solid steelblue;
    box-shadow: inset 0 0 15px grey;
    padding: 20px;
}
.loginContainerRegister {
    height: 800px;
}
.loginContainerCode {
    height: 600px;
}
.loginInput {
    width: 90%;
    margin-left: 5%;
    border: none;
    background: none;
    line-height: 40px;
    font-size: 1.2em;
}
.loginInputChars {
    line-height: 20px;
}
.loginInput:focus {
    outline: none;
    border: none;
    background-color: transparent;
}
.loginLabel {
    display: none;
    width: 90%;
    margin-left: 5%;
    color: grey;
    line-height: 20px;
}
.classLogin {
    padding: 5px;
    padding-left: 15px;
    float: right;
    cursor: pointer;
    filter: opacity(0.6);
}
.classLogin:hover {
    filter: opacity(1);
}
.classLoginImage {
    width: 40px;
}
.classLanguageImage {
    width: 40px;
}
.classLanguage {
    padding: 5px;
    padding-left: 15px;
    float: right;
    cursor: pointer;
    filter: opacity(0.6);
}
.classLanguage:hover {
    filter: opacity(1);
}
.markFirstImage {
    border: 2px solid orange;
}
.mapsInfoImageClass {
    width: 150px;
    height: 150px;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
}
.classAccessOverviewContainer {
    position: fixed;
    top: 60px;
    right: 10px;
    display: none;
    width: auto;
    height: auto;
    border: 1px solid #dddddd;
    box-shadow: 0px 0px 15px #88888888;
    border-radius: 15px;
    background-color: white;
    z-index: 100;
}
.classLanguageContainer {
    position: fixed;
    top: 60px;
    right: 40px;
    display: none;
    width: auto;
    height: auto;
    border: 1px solid #dddddd;
    box-shadow: 0px 0px 15px #88888888;
    border-radius: 15px;
    background-color: white;
    z-index: 100;
}
.classTextInput {
    position: relative;
    margin-top: 10px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--default_border_color);
}
.textInputLabel {
    display: none;
    width: 100%;
    margin-left: 5%;
    color: grey;
    line-height: 20px;
}
.textareaInputInput {
    width: 100%;
    padding-left: 3%;
    padding-right: 3%;
    border: none;
    background: none;
    line-height: 25px;
    font-size: 1.2em;
}
.textareaInputInput:focus {
    outline: none;
    border: none;
    background-color: transparent;
}
.textInputInput {
    width: 100%;
    padding-left: 3%;
    padding-right: 3%;
    border: none;
    background: none;
    line-height: 40px;
    font-size: 1.2em;
}
.textInputInput:focus {
    outline: none;
    border: none;
    background-color: transparent;
}
.loginDiv {
    position: relative;
    margin-top: 10px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--default_border_color);
}
.classLoadImageButton {
    padding: 20px;
}
.loginDivAdd {
    display: none;
}
.loginDivAdd {
    display: none;
}
.registerDivAdd {
    display: none;
}
.registerDivCode {
    display: none;
}
.previewImageClass {
    width: auto;
    max-height: 200px;
    margin-right: 5px;
    margin-bottom: 5px;
    object-fit: cover;
    border-radius: 10px;
}
.classDisableButton {
    color: grey !important;
}
.classFinalImage {
    height: 300px;
    width: auto;
    margin-right: 5px;
    margin-bottom: 5px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 10px 10px 10px #aaaaaa;
}
.template-hidden {
    display:none;
}
.class_HideCornerBanner {
    display:none;
}
.class_fi_home_text1 {
    padding-top: 5px;
    font-weight: bold;
}
.class_fi_home_text2 {
    padding-top: 5px;
    font-size: 0.8em;
    color: #777777;
}
.classFinalImage:hover, .classImageBox:hover {
    cursor: grab;
}
.classImageTrash {
    position: absolute;
    top: 15px;
    right: 20px;
    width: 32px;
    background-color: #ffffffbb;
    border-radius: 5px;
}
.classImageTrash:hover {
    cursor: pointer;
    background-color: white;
}
.classImageBox {
    position: relative;
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    display: inline-block;
    text-align: center;
}
.classButton:hover {
    background-color: grey;
    cursor: pointer;
}
.classLanguageButton {
    display: flex;         /* Richtet Inhalt horizontal aus */
    align-items: center;   /* Zentriert Flagge und Text vertikal */
    gap: 8px;              /* Abstand zwischen Flagge und Text */
    cursor: pointer;
    padding: 5px 10px;
    transition: background 0.3s;
}
.classLanguageButton:hover {
    background-color: #f0f0f0;
}
.classLanguageIcon {
    width: 40px;           /* Breite der Flagge */
    height: auto;          /* Proportionale Höhe */
    display: block;
}
.classButtonDefault {
    color: black;
    border-radius: 10px;
    padding: 10px 20px 10px 20px;
    transition: 0.3s;
    border: 1px solid grey;
    text-align: center;
}
.classButtonDefault:hover {
    background-color: #bbbbbb;
    color: black;
    cursor: pointer;
}
.classDisableButton:hover {
    background-color: unset !important;
    cursor: default !important;
}
.loginFix {
    display: none;
    text-align: center;
    padding: 10px;
    background-color: grey;
    border-radius: 10px;
    font-size: 1.2em;
}
.loginFix:hover {
    cursor: pointer;
}
.loginDivMessage {
    border: 1px solid red;
}
.loginMessageText {
    display: none;
    color: red;
    padding:10px;
}
.loginButtons {
    width: 100%;
    text-align: center;
    margin-top: 10px;
}
.loginInfo {
    position: absolute;
    bottom: 10px;
    border-top: 1px solid grey;
    padding: 10px;
    width: 91%;
}
.loginDefaultButton {
    width: 100%;
    height: 40px;
    background-color: lightgrey;
    font-size: 1.2em;
    cursor: pointer;
    padding: 5px 10px 5px 10px;
}
.loginDefaultButton:hover {
    background-color: dimgrey;
    color: white;
}
.loginHeader {
    line-height: 30px;
    font-size: 1.8em;
    padding: 10px;
}
.defaultOverlay {
    visibility: hidden;
    display: flex;
    position: fixed;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    border: 1px solid black;
    background-color: var(--common_background_overlay);
    z-index: 2000;
}
.classTextInputImage {
    position: absolute;
    width: 25px;
    right: 10px;
    top: 5px;
    opacity: 50%;
}
.classTextInputImage:hover {
    cursor: pointer;
}
.classEye {
    position: absolute;
    width: 25px;
    right: 10px;
    top: 5px;
    opacity: 50%;
}
.classEye:hover {
    cursor: pointer;
    opacity: 100%;
}
.classImageSelectButton {
    display: block;
    width: 100%;
    font-size:1.4em;
}
.classImagePreloadList {

}
.classSortableImages {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
.classImageUploadProgress {
    width: 100%;
    text-align: center;
    font-size: 1.6em;
    margin-bottom: 30px;
}
/* --------------------- SCREEN ----------------------- */
@media only screen and (max-width: 1800px) {
}
@media only screen and (max-width: 1400px) {
}
@media only screen and (max-width: 1200px) {
}
@media only screen and (max-width: 1000px) {
}
@media only screen and (max-width: 950px) {
    [class*="col-"] {
        width: 100%;
    }
}
@media only screen and (max-width: 760px) {
    [class*="col-"] {
        width: 100%;
    }
    [class*="menuL"] {
        width: 100%;
    }
}
@media only screen and (max-width: 450px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
    [class*="menu-"] {
        width: 100%;
        text-align: center;
        font-size: 1.3em;
        line-height: 40px;
    }
}
@media only screen and (max-width: 400px) {
}