/* Standard-Stile für das Suchfeld */
input[type="search"] {
    -webkit-appearance: none; /* Entfernt Standard-Stile */
    appearance: none;
    position: relative;
    padding-right: 40px; /* Platz für das "X" */
}

/* Entfernt das doppelte Standard-"X" */
input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

/* Sicherstellen, dass der Wrapper korrekt positioniert ist */
.kim-gen-search-wrapper {
    position: relative; /* Stellt sicher, dass das "X" sich am Input orientiert */
    display: inline-block;
    width: 100%;
}

/* Suchfeld-Einstellungen */
#kim-gen-card-search {
    width: 100%;
    padding-right: 40px; /* Mehr Platz für das größere "X" */
    box-sizing: border-box;
}

/* Benutzerdefiniertes "X" im Suchfeld */
.kim-gen-search-wrapper .kim-gen-clear-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px; /* Größeres "X" */
    color: white; /* Macht das "X" weiß */
    cursor: pointer;
    display: none; /* Standardmäßig versteckt */
}

/* "X" nur anzeigen, wenn das Suchfeld Inhalt hat */
.kim-gen-search-wrapper input:not(:placeholder-shown) + .kim-gen-clear-btn {
    display: block;
}

/* Stile für die Ergebnisliste */
#kim-gen-card-results {
    max-height: 240px; /* 6 Ergebnisse à ~40px Höhe */
    overflow-y: auto; /* Aktiviert Scrollen, falls mehr als 6 Ergebnisse vorhanden sind */
    border: 1px solid #ccc; /* Optional: Rahmen für bessere Sichtbarkeit */
    background: #222; /* Hintergrundfarbe anpassen an die anderen Dropdowns */
    color: white; /* Textfarbe */
    border-radius: 5px;
    padding: 5px;
    display: none; /* Standardmäßig versteckt */
    position: absolute;
    width: 100%;
    z-index: 1000; /* Stellt sicher, dass es über anderen Elementen liegt */
}

/* Nur anzeigen, wenn Ergebnisse vorhanden sind */
#kim-gen-card-results:empty {
    display: none !important;
}

/* Einzelnes Ergebnis-Item */
#kim-gen-card-results div {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #444; /* Trennlinie zwischen Einträgen */
}

/* Letztes Element ohne Trennlinie */
#kim-gen-card-results div:last-child {
    border-bottom: none;
}

/* Hover-Effekt für bessere Benutzerfreundlichkeit */
#kim-gen-card-results div:hover {
    background: #444;
}

/* Falls das Ergebnis-Dropdown trotzdem sichtbar bleibt, zusätzlich verbergen */
.kim-gen-search-wrapper:has(#kim-gen-card-results:empty) #kim-gen-card-results {
    display: none !important;
}

/* Einheitliche Bildgrößen für Slab, Bumper & Card */
.kim-gen-image {
    width: 100% !important;
    height: auto;
    position: relative;
}
/* ---- NEUE STILE für die Bildüberlagerung ---- */

/* Container für die überlagerten Bilder */
.kim-gen-container {
    position: relative;
    width: 300px;  /* Einheitliche Breite */
    height: 1210px; /* Etwas mehr Höhe für besseren Sitz */
    margin: 20px auto;
}

/* Alle Bilder übereinander stapeln */
.kim-gen-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Slab - als unterste Ebene */
#kim-gen-slab {
    z-index: 1;
}

/* Bumper - darüber */
#kim-gen-bumper {
    z-index: 2;
}

/* Karte - oben, aber kleiner & leicht nach unten verschoben */
.kim-gen-card {
    width: 77%;  /* Karte etwas kleiner, damit sie besser in den Slab passt */
    height: auto;
    left: 11%;   /* Neu ausgerichtet */
    top: 26px;     /* Leicht nach unten verschoben */
    z-index: 3;  /* Ganz oben */
}

/*rahmen weg */
.kim-gen-layer {
    display: none; /* Standardmäßig ausgeblendet */
}

.kim-gen-layer[src] {
    display: block; /* Nur anzeigen, wenn ein Bild vorhanden ist */
}
.kim-gen-layer[src=""] {
    display: none !important;
}

.kim-gen-layer:not([src]) {
    display: none !important;
}