/* -------------------------------------------------------------------------- */
/* E-M-K-S, peci.wien */
/* -------------------------------------------------------------------------- */
body {
    font-family: Arial, sans-serif;
    background-color: #F8F5F2; /* #F8F5F2 == RGB: 248, 245, 242 (ein sanftes Cremeweiß, das Wärme und Exklusivität ausstrahlt) */  /* #f0f0f0; */
    color: #333333; /* Schwarz, aber ein etwas abgeschwächter Farbton; wirkt dezenter und angenehmer auf hellen Hintergründen */
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: Montserrat-Medium, Poppins-Regular; /* Montserrat-SemiBold, Montserrat-Medium, Poppins-Regular, Poppins-Light */ /* Verdana, Geneva, Tahoma, sans-serif; /* cursive */
}

#peci-logo-container {
    display: flex;           /* Container als Flexbox */
    justify-content: center; /* Zentriert das Bild horizontal */
    align-items: center;     /* Optional: Zentriert das Bild auch vertikal */
    height: 100vh;      
    width: 100%;
    height: auto;
}
#peci-logo {
    margin-top: 20px;
    margin-bottom: 20px;
    max-width: 40%;
    height: auto;
}

h1 {
    color: #800020; /* #800020 == rgb(128, 0, 32); tiefes Bordeauxrot, das luxuriös und elegant wirkt */  /* blue: #800020; /*  #007BFF; */ 
    font-family: Montserrat-SemiBold,  Verdana, Geneva, Tahoma, sans-serif;
    margin: 0;
    padding: 0;
} 

button {
    font-family: Montserrat-SemiBold,  Verdana, Geneva, Tahoma, sans-serif;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Leicht angehoben wirken */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Für einen fließenden Wechse */
}

/* -------------------------------------------------------------------------- */
/* GALLERY */
/* -------------------------------------------------------------------------- */
/* abstand über der gallery */
#gallery-hook {
    margin-top: 2vw;
}
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(23.5vw, 1fr));  /* 1.arg of minmax = breite vom item (dh 3 items/row); orig: repeat(auto-fill, minmax(200px, 1fr)); */
    gap: 3vw;                                                       /* orig: 15px */
    max-width: 80%;                                                 /* orig: 1000px */
    width: 100%;
    padding: 1vw;                                                   /* orig: 20px */
    font-size: 1.4vw;
    box-sizing: border-box;
}
.gallery-item {
    background-color: white; /* Sehr helles Grau == #F2F2F2; geht nicht wg der freigestellten fotos */
    border-radius: 20px;                                            /* abrundung der ecken; 8px; */
    overflow: hidden;
    position: relative;
    text-align: center;
    padding-top: 7.5px;                                               /* abstand vom gallery item content von oben */ /* Innenabstand für den Inhalt 16px; */
    padding-left: 10px;                                               /* abstand vom gallery item content von links */
    padding-right: 10px;                                              /* abstand vom gallery item content von rechts (same as left so that buttons are centered!) */
    padding-bottom: 7.5px;                                            /* abstand vom gallery item content von unten */
    border: 1px solid #E0E0E0; /* Heller grauer Rand */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);                       /* Sanfter Schatten (optional) */
}
.gallery-item img {
    width: 100%;                                                    
    height: auto;
    display: block;
    /* border-bottom: 3px solid #F8F5F2; ; /* linie (ruler, border) unterm image */ /* #ddd */
}
.gallery-item p {
    margin: 0;
    color: #333333; /* Schwarz, aber ein etwas abgeschwächter Farbton; wirkt dezenter und angenehmer auf hellen Hintergründen */
}
.gallery-item button,
.connect-to-web3-button,
.basic-menue-button {
    margin: 1.2vw;                                                  /*config*/
    padding: 0.2vw 0.3vw;                                           /* für die schrift */
    background-color: #800020; /*  #007BFF; */
    color: #fff;
    border: none;
    border-radius: 15px;
    font-size: 1.4vw;                                               /*config*/
    cursor: pointer;
    width: 85%; 
    height: 2.5vw;
}
.gallery-item button:hover,
.connect-to-web3-button:hover,
.basic-menue-button:hover {
    background-color: #A1223A; /* #A1223A == leicht hellere Variante von bordeaux */  /* #0056b3; */
}
.connect-to-web3-button {
    margin-bottom: 5.0vw;                                                  
    width: 40%;
}
.connect-to-web3-button:hover {
    background-color: #A1223A; /* #A1223A == leicht hellere Variante von bordeaux */  /* #007bffbe; */
}
.basic-menue-button {
    margin-left: 0;
    padding-left: 0;
    width: 100%;
}

/* -------------------------------------------------------------------------- */
/* POPUP FORM */
/* -------------------------------------------------------------------------- */
.popup-form {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #888;
    z-index: 9;
    background-color: #F2F2F2; /* #F2F2F2; == Sehr helles Grau */  /* weiss */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    padding: 20px;
    width: 60%; /* width: 300px; */
    font-size: 1.4vw;                                             /*config*/
    max-height: 80vh;                                             /* 50vw; */
    overflow: auto;                                               /* Ermöglicht Scrollen */
}
.popup-form h2 {
    margin: 0 0 20px;
}
.popup-form input[type=text],
#password-input {
    margin-bottom: 0vw;
    padding: 0.2vw 0.3vw; 
    font-size: 1.4vw;                                              /*config*/
    border: 1px solid #ccc;
    border-radius: 15px;
    width: 80%;                                                    /* orig: 100% */
    box-sizing: border-box;
    height: 3vw;                                                   /*config*/
}
.popup-form button,
#login-button {
    padding: 0.2vw 0.3vw;                                          /* text abstand; orig: 10px 15px */
    border: none;
    background-color: #800020; /*  #007BFF; */                                   /* #800020; /*  #007BFF; */ 
    color: white;
    cursor: pointer;
    border-radius: 15px;
    width: 80%;          
    align-self: center;
    font-size: 1.4vw;                                              /*config*/
    margin: 1.2vw;                                                 /*config*/
    height: 2.5vw;                                                 /*config*/
}
.popup-form button.cancel-button,
.popup-form button.close-button {
    background-color: #4C6778; /* Graublau. Wirkt edel und zurückhaltend. Passt zu einem luxuriösen Design und harmoniert mit den Bordeaux-Elementen. */ 
    /* background-color: #C0C0C0; */ /* noch dezenter. */
    font-size: 1.4vw;                                              /*config*/
    margin: 1.2vw;
    height: 2.5vw;                                                 /*config*/
    color: #FFFFFF; /* Weiß – #FFFFFF; Hebt den Text klar hervor und sorgt für gute Lesbarkeit.*/
}
/* alle buttons */
.popup-form button:hover {
    background-color: #A1223A; /* #A1223A == leicht hellere Variante von bordeaux */  
    /* opacity: 0.9; */
}
/* cancel button */
.popup-form .cancel-button:hover {
    background-color: #66899B; /* #66899B; Leicht heller es grau für einen dezenten Hover-Effekt. */ 
    /* background-color: #D9D9D9; */  /* noch dezenter. */ 
    /* opacity: 0.9; */
}

/* for pop up of full size image: */
#basic-input-form__full-size-image {
    padding: 0; 
    margin: 0;
    padding-top: 15px;
    background-color: white;
}
/* wenn keine id angezeigt wird */
#basic-input-token-id-placeholder__full-size-image { 
    display: none;
}


/* Scrollbar: */
/* Scrollbar-Gesamtstil */
.popup-form::-webkit-scrollbar {
    width: 12px; /* Breite der Scrollbar */
    height: 12px; /* Höhe der Scrollbar für horizontales Scrollen */
}
/* Der Scroll-Schieber (der bewegliche Teil) */
.popup-form::-webkit-scrollbar-thumb {
    background-color: #B15E66; /* Bordeaux-Farbe für den Schieber */
    border-radius: 8px; /* Abgerundete Ecken */
    border: 2px solid #F8F5F2; /* Heller Rand um den Schieber, um ihn von Hintergrund abzuheben; 3px */
}
/* Hover-Effekt für den Schieber */
.popup-form::-webkit-scrollbar-thumb:hover {
    background-color: #9B4C53; /* Dunklere Bordeaux-Farbe bei Hover */
}
/* Der Bereich, in dem der Schieber sich bewegt (Hintergrund der Scrollbar) */
.popup-form::-webkit-scrollbar-track {
    background-color: #F8F5F2; /* Heller Hintergrund für die Scrollbar */
    border-radius: 8px;
}

/* -------------------------------------------------------------------------- */
/* POPUP & OVERLAY */
/* -------------------------------------------------------------------------- */
.popup {
    display: none;
    position: fixed; 
    top: 50%;
    /* left: 50%; */
    /* transform: translate(-60%, -40%); */                         /* Zentriert das Popup */
    transform: translate(-50%, -50%);                               /* Zentriert das Popup */
    background-color: transparent;
    padding: 20px;                                                  /* orig: 20px */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);                  /* Schatten für Popup */
    z-index: 1000;                                                  /* Über dem Overlay */
    width: 100%;
}
/* Das overlay wird typischerweise als ein vollflächiges <div> mit einer halbtransparenten Hintergrundfarbe gestaltet 
 * und befindet sich direkt hinter dem Popup, aber über dem restlichen Seiteninhalt. 
 * Das overlay-Element dient dazu, den Hintergrund abzudecken und visuell zu verdeutlichen, dass der Fokus auf dem Popup liegt */
.overlay {
    display: none;
    position: fixed;                                                /* Fixiert das Popup */
    top: 0;
    left: 0;
    width: 100%;                                                    /* Bedeckt die gesamte Breite */
    height: 100%;                                                   /* Bedeckt die gesamte Höhe */
    background-color: rgba(0, 0, 0, 0.5);                         /* Der letzte Wert (0.5) steuert die Transparenz (0 = transparent, 0.5 mittel, 1 = undurchsichtig). */
    z-index: 999;                                                   /* Über dem restlichen Inhalt */
}

/* -------------------------------------------------------------------------- */
/* PARAGRAPH */
/* -------------------------------------------------------------------------- */
.info-paragraph {
    text-align: left; 
    margin: 0.25vw;
}

/* -------------------------------------------------------------------------- */
/* MSG CONTAINER */
/* -------------------------------------------------------------------------- */
#message-container,
#log-messages-container {
    color: #404040;
    text-align: left !important; /* Links ausrichten, überschreibt andere Regeln */
    align-self: flex-start; /* Damit Flexbox die Ausrichtung nicht beeinflusst */
    margin: 2vw;
    word-wrap: break-word; /* für alte Browser */
    overflow-wrap: break-word; /* moderne Lösung */
    white-space: normal; /* verhindert das Verhindern von Zeilenumbrüchen */
    max-width: 95%; /* Setzt die maximale Breite des Containers */
}
#welcome-message-container,
#log-messages-container,
#my-account-container {
    color: #404040;
    text-align: center;
    width: 80%;
    margin-bottom: 2vw;
}
#my-account-container {
    margin: 0;
    padding: 0;
}
.error-message {
    color: red;
}

#log-message-seperating-ruler {
    width: 95%; 
    height: 1px; 
    background-color: lightgray;
    border: none;
}
#clear-log-messages-button,
#show-log-messages-button,
#hide-log-messages-button,
.sort-button,
.filter-button {
    font-size: 2.0vw;                                              /*config*/
    border-radius: 15px;
    margin: 2vw;
    background-color: lightgray;
    color: white;
    height: 2.5vw;
    border: none;
    width: 20vw;                    /* breite vom button ! */
    /* display: flex;               /* Ermöglicht Flexbox */
    /* align-items: center;         /* Zentriert vertikal */
    /* justify-content: center;     /* Zentriert horizontal */
    /* text-align: center;          /* Textzentrierung */
}
#clear-log-messages-button,
#hide-log-messages-button,
#show-log-messages-button {
    width: 40%;
    margin: 1vw;
}

/* -------------------------------------------------------------------------- */
/* FILTER & SORT; tbd: deprecated, denn es gibt jetzt ein drop down menue */
/* -------------------------------------------------------------------------- */
.filter-button {
    background-color: plum; /* #007bff92; */
}
.filter-activated {
    background-color: #cc68cc; /* #007bff92; */
}
.sort-button {
    background-color: rgba(124, 104, 238, 0.581);
}
.sort-activated {
    background-color: mediumslateblue;
}
.sort-button-container,
.filter-button-container {
    display: flex;
    justify-content: center; /* Zentriert den inneren Container */
    padding: 10px 10px; /* Abstand links und rechts */
    width: 100%; /* Container nimmt die gesamte Breite ein */
    box-sizing: border-box; /* Padding wird innerhalb der Gesamtbreite gezählt */
}
.sort-button-row,
.filter-button-row {
    display: flex; /* Elemente in einer Zeile anordnen */
    flex-wrap: wrap; /* Elemente umbrechen lassen */
    justify-content: center; /* Zentriert die Buttons innerhalb der Zeilen */
    /* gap: 10px; /* Optional: Abstand zwischen den Buttons; ? hat keinen effekt?! */
}
.sort-button-row button,
.filter-button-row button {
    padding: 10px 10px; /* Innerer Abstand für den Button; ie der text im button! */
    text-align: center; /* Zentriert den Text horizontal */
    align-items: center; /* Vertikale Zentrierung */
    /* justify-content: center; /* Horizontale Zentrierung */
    justify-content: left; /* text vom button ist linksbündig ! */
    display: flex; /* Flexbox aktivieren */
    white-space: nowrap; /* Optional: Verhindert Zeilenumbruch im Buttontext */
}


#log-messages-container p.info-paragraph,
#log-messages-container p.warning-message,
.sort-button,
.filter-button {
    font-size: 1.7vw;
    font-style: normal;
    margin-top: 1vw;
    margin-bottom: 0;
    margin-left: 2vw; /* h abstand zw buttons! */
    margin-right: 2vw; /* h abstand zw buttons! */
}
.warning-message {
    color: #800020; /*  #007BFF; */
}

/* -------------------------------------------------------------------------- */
/* HIDDEN PLACEHOLDER FOR CURRENT TOKEN ID */
/* -------------------------------------------------------------------------- */
#storage-for-current-token-id-hook {
    display: none;
}

/* -------------------------------------------------------------------------- */
/* LOGIN / PASSWORD */
/* -------------------------------------------------------------------------- */
#password-input {
    margin-top: 10.0vw;
    margin-bottom: 7.0vw;
    font-size: 3.5vw;    
    width: 60%;                 
    height: 5.0vw; 
}
#login-button {
    margin-top: 0.0vw;
    margin-bottom: 4.0vw;
    font-size: 3.0vw;     
    width: 60%;          
    height: 4.5vw;   
}


/* -------------------------------------------------------------------------- */
/* UNSORTED */
/* -------------------------------------------------------------------------- */
#info-token-id-placeholder {
    color: black;
    margin: 0;
}

.h1-used-for-info,
.h2-used-for-info,
.h3-used-for-info,
.h4-used-for-info,
.h5-used-for-info {
    color: #800020; /*  #007BFF; */
    margin-top: 1vw;
    margin-bottom: 0.2vw;
}

.hidden {
    display: none !important; /* !important erzwingt, dass die Regel für .hidden Vorrang hat, auch wenn andere Regeln existieren; NEEDED sonst werden log message trotz hidden vom parent div angezeigt?! */
}

.gallery-item-placeholder {
    height: 430px; /* TBD */
    background-color: white(128, 128, 128, 0.072);
}

/* number that is displayed on the top of the gallery item card */
.gallery-item-number {
    color:  #333333; /* Schwarz, aber ein etwas abgeschwächter Farbton; wirkt dezenter und angenehmer auf hellen Hintergründen */
    font-weight: normal;
    margin-top: 0;
    margin-bottom: 1.2vw;
}

.available-sold-bought {
    border-top: 2.5px solid #F8F5F2; ; /* linie (ruler, border) über dem text */ /* #ddd */
    text-align: left;
    padding-top: 2.5px; 
    padding-bottom: 5px;
}

/* -------------------------------------------------------------------------- */
/* FILTER / SORT DROP DOWN MENUES */
/* -------------------------------------------------------------------------- */
#filter-drop-down-menue,
#filter-drop-down-label,
#sort-drop-down-menue,
#sort-drop-down-label {
    width: 35%;
    height: 3vw;
    font-size: 1.5vw;
    font-weight: bold;
    background-color: #F2F0F7; /* #F2F0F7 == RGB: 242, 240, 247 (ein zartes, edles Lavendelgrau) */;
}
#sort-drop-down-label {
    margin-left: 5vw;
}
#filter-drop-down-menue {
    color:#4040 40; /* #404040 == RGB: 64, 64, 64  (ein stilvolles Dunkelgrau für guten Kontrast) */  /* #cc68cc; */
    font-family: Montserrat-SemiBold,  Verdana, Geneva, Tahoma, sans-serif;
}
#sort-drop-down-menue {
    color: #404040; /* #404040 == RGB: 64, 64, 64  (ein stilvolles Dunkelgrau für guten Kontras) */  /* mediumslateblue; */
    font-family: Montserrat-SemiBold,  Verdana, Geneva, Tahoma, sans-serif;
}
.filter-sort-row,
.sort-button-row,
.filter-button-row {
    display: flex; /* Elemente in einer Zeile anordnen */
    flex-wrap: wrap; /* Elemente umbrechen lassen */
    justify-content: center; /* Zentriert die Buttons innerhalb der Zeilen */
    /* gap: 10px; /* Optional: Abstand zwischen den Buttons; ? hat keinen effekt?! */
}


/* -------------------------------------------------------------------------- */
/* EOF */
/* -------------------------------------------------------------------------- */