/* Portfolio Showcase Layout - Inspiriert von CR7 Website */

/* Standard Portfolio-Showcase-Container (Compiaz Informatik) */
.portfolio-showcase {
    display: flex;
    width: 100%;
    height: 700px;
    margin: 0 auto;
    max-width: 1400px;
    background-color: #000000;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    border: none;
    position: relative;
    transition: box-shadow 0.5s ease;
}



/* Pulsierender Farbverlauf auf der linken Seite */
.portfolio-showcase::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 100%;
    background: linear-gradient(135deg, 
        rgba(240, 58, 112, 0.8) 0%, 
        rgba(18, 18, 18, 0.6) 50%, 
        rgba(0, 0, 0, 0) 100%);
    z-index: 0;
    animation: pulse-gradient 8s infinite alternate;
}

@keyframes pulse-gradient {
    0% { opacity: 0.7; }
    50% { opacity: 0.4; }
    100% { opacity: 0.7; }
}

/* Spezifischer Farbverlauf für EG Elektro Geräte AG */
.portfolio-showcase.egelektro::before {
    background: linear-gradient(135deg, 
        #ec4223 0%, 
        rgba(18, 18, 18, 0.6) 50%, 
        rgba(0, 0, 0, 0) 100%) !important;
}

/* Spezifischer Farbverlauf für Bödeli Textilreinigung */
.portfolio-showcase.boedeli::before {
    background: linear-gradient(135deg, 
        #4e9a50 0%, 
        rgba(18, 18, 18, 0.6) 50%, 
        rgba(0, 0, 0, 0) 100%) !important;
}

/* Spezifischer Farbverlauf für Aparthotel Adelboden */
.portfolio-showcase.adelboden::before {
    background: linear-gradient(135deg, 
        #46b239 0%, 
        rgba(18, 18, 18, 0.6) 50%, 
        rgba(0, 0, 0, 0) 100%) !important;
}

/* Spezifischer Farbverlauf für Restaurant Brunne */
.portfolio-showcase.brunne::before {
    background: linear-gradient(135deg, 
        #9bbac7 0%, 
        rgba(18, 18, 18, 0.6) 50%, 
        rgba(0, 0, 0, 0) 100%) !important;
}

/* Spezifischer Farbverlauf für Action-Sport GmbH */
.portfolio-showcase.actionsport::before {
    background: linear-gradient(135deg, 
        #605439 0%, 
        rgba(18, 18, 18, 0.6) 50%, 
        rgba(0, 0, 0, 0) 100%) !important;
}

/* Spezifischer Farbverlauf für Aare Jungfrau AG */
.portfolio-showcase.aarejungfrau::before {
    background: linear-gradient(135deg, 
        #e55b53 0%, 
        rgba(18, 18, 18, 0.6) 50%, 
        rgba(0, 0, 0, 0) 100%) !important;
}

/* Spezifischer Farbverlauf für Arab Service Interlaken */
.portfolio-showcase.arabservice::before {
    background: linear-gradient(135deg, 
        #ec4f53 0%, 
        rgba(18, 18, 18, 0.6) 50%, 
        rgba(0, 0, 0, 0) 100%) !important;
}

/* Spezifischer Farbverlauf für Ticket Shop Switzerland */
.portfolio-showcase.ticketshop::before {
    background: linear-gradient(135deg, 
        #ec4f53 0%, 
        rgba(18, 18, 18, 0.6) 50%, 
        rgba(0, 0, 0, 0) 100%) !important;
}

/* Spezifischer Farbverlauf für Auto GA */
.portfolio-showcase.autoga::before {
    background: linear-gradient(135deg, 
        #84a3a8 0%, 
        rgba(18, 18, 18, 0.6) 50%, 
        rgba(0, 0, 0, 0) 100%) !important;
}

/* Spezifischer Farbverlauf für Bernhard AG */
.portfolio-showcase.bernhardag::before {
    background: linear-gradient(135deg, 
        #655433 0%, 
        rgba(18, 18, 18, 0.6) 50%, 
        rgba(0, 0, 0, 0) 100%) !important;
}

/* Spezifischer Farbverlauf für Bödeli Shop */
.portfolio-showcase.boedelishop::before {
    background: linear-gradient(135deg, 
        #79a73b 0%, 
        rgba(18, 18, 18, 0.6) 50%, 
        rgba(0, 0, 0, 0) 100%) !important;
}

/* Spezifischer Farbverlauf für Coiffure Laguna */
.portfolio-showcase.coiffurelaguna::before {
    background: linear-gradient(135deg, 
        #c84530 0%, 
        rgba(18, 18, 18, 0.6) 50%, 
        rgba(0, 0, 0, 0) 100%) !important;
}

/* Spezifischer Farbverlauf für Haus der Finanzen GmbH */
.portfolio-showcase.hausderfinanzen::before {
    background: linear-gradient(135deg, 
        #3d9c9e 0%, 
        #366f94 25%,
        #3d558f 50%,
        #414487 75%,
        rgba(0, 0, 0, 0) 100%) !important;
}

/* Spezifischer Farbverlauf für ImmoHeld AG */
.portfolio-showcase.immoheld::before {
    background: linear-gradient(135deg, 
        #2c6ef4 0%, 
        rgba(18, 18, 18, 0.6) 50%, 
        rgba(0, 0, 0, 0) 100%) !important;
}

/* Spezifischer Farbverlauf für Kosmetik BEO */
.portfolio-showcase.kosmetikbeo::before {
    background: linear-gradient(135deg, 
        #601a31 0%, 
        rgba(96, 26, 49, 0.7) 30%,
        rgba(18, 18, 18, 0.6) 60%, 
        rgba(0, 0, 0, 0) 100%) !important;
}

/* Spezifischer Farbverlauf für OPTIFY AG */
body .portfolio-showcase.optify::before {
    background: linear-gradient(135deg, 
        #63136b 0%, 
        rgba(99, 19, 107, 0.7) 30%,
        rgba(18, 18, 18, 0.6) 60%, 
        rgba(0, 0, 0, 0) 100%) !important;
}

/* Spezifischer Farbverlauf für ED. Kuhn AG */
body .portfolio-showcase.edkuhn::before {
    background: linear-gradient(135deg, 
        #910000 0%, 
        rgba(145, 0, 0, 0.7) 30%,
        rgba(18, 18, 18, 0.6) 60%, 
        rgba(0, 0, 0, 0) 100%) !important;
}

/* Spezifischer Farbverlauf für Thomas Steiner GmbH */
body .portfolio-showcase.thomassteiner::before {
    background: linear-gradient(135deg, 
        #c11a00 0%, 
        rgba(193, 26, 0, 0.7) 30%,
        rgba(18, 18, 18, 0.6) 60%, 
        rgba(0, 0, 0, 0) 100%) !important;
}

/* Spezifischer Farbverlauf für The Founders */
body .portfolio-showcase.thefounders::before {
    background: linear-gradient(135deg, 
        #00afe1 0%, 
        rgba(0, 175, 225, 0.7) 30%,
        rgba(18, 18, 18, 0.6) 60%, 
        rgba(0, 0, 0, 0) 100%) !important;
}

/* Spezifischer Farbverlauf für Tomorrow Jobs AG */
body .portfolio-showcase.tomorrowjobs::before {
    background: linear-gradient(135deg, 
        #c79f34 0%, 
        rgba(199, 159, 52, 0.7) 30%,
        rgba(18, 18, 18, 0.6) 60%, 
        rgba(0, 0, 0, 0) 100%) !important;
}

/* Spezifischer Farbverlauf für Vögtli + Viecelli Architekten GmbH */
body .portfolio-showcase.vvarchitekten::before {
    background: linear-gradient(135deg, 
        #8a0000 0%, 
        rgba(138, 0, 0, 0.7) 30%,
        rgba(18, 18, 18, 0.6) 60%, 
        rgba(0, 0, 0, 0) 100%) !important;
}

/* Spezifischer Farbverlauf für The Golden Club */
body .portfolio-showcase.thegoldenclub::before {
    background: linear-gradient(135deg, 
        #b38600 0%, 
        rgba(179, 134, 0, 0.7) 30%,
        rgba(18, 18, 18, 0.6) 60%, 
        rgba(0, 0, 0, 0) 100%) !important;
}

/* Spezifische Styles für Portfolio-Items wurden entfernt, um einen einheitlichen Look zu gewährleisten */

/* Großes Hauptbild links */
.showcase-main {
    flex: 0 0 65%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    padding: 0;
    z-index: 1;
}

.showcase-main-image-container {
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000000;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* Standard kreisförmige Umrandung (ohne Farbe) */
.showcase-main-image-container::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    border: none;
    box-shadow: none;
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
}





/* Gelbe kreisförmige Umrandung für H Gosteli AG */
.showcase-main-image-container.gosteli::after {
    border: 2px solid rgba(246, 247, 158, 0.7);
    box-shadow: 0 0 40px rgba(246, 247, 158, 0.7);
}

/* Goldene kreisförmige Umrandung für Ibex Elektro */
.showcase-main-image-container.ibex::after {
    border: 2px solid rgba(241, 194, 0, 0.7);
    box-shadow: 0 0 40px rgba(241, 194, 0, 0.7);
}

/* Orange kreisförmige Umrandung für Scheidegger CRM */
.showcase-main-image-container.scheidegger::after {
    border: 2px solid rgba(235, 105, 30, 0.7);
    box-shadow: 0 0 40px rgba(235, 105, 30, 0.7);
}

/* Dunkelgrüne kreisförmige Umrandung für Golf Grindelwald */
.showcase-main-image-container.golf::after {
    border: 2px solid rgba(57, 69, 15, 0.7);
    box-shadow: 0 0 40px rgba(57, 69, 15, 0.7);
}

/* Rote kreisförmige Umrandung für EG Elektro Geräte AG */
.showcase-main-image-container.egelektro::after {
    border: 2px solid #ec4223;
    box-shadow: 0 0 40px #ec4223;
}

/* Grüne kreisförmige Umrandung für Bödeli Textilreinigung */
.showcase-main-image-container.boedeli::after {
    border: 2px solid #4e9a50;
    box-shadow: 0 0 40px #4e9a50;
}

/* Grüne kreisförmige Umrandung für Aparthotel Adelboden */
.showcase-main-image-container.adelboden::after {
    border: 2px solid #46b239;
    box-shadow: 0 0 40px #46b239;
}

/* Blaue kreisförmige Umrandung für Restaurant Brunne */
.showcase-main-image-container.brunne::after {
    border: 2px solid #9bbac7;
    box-shadow: 0 0 40px #9bbac7;
}

/* Braune kreisförmige Umrandung für Action-Sport GmbH */
.showcase-main-image-container.actionsport::after {
    border: 2px solid #605439;
    box-shadow: 0 0 40px #605439;
}





/* Rote kreisförmige Umrandung für Aare Jungfrau AG */
.showcase-main-image-container.aarejungfrau::after {
    border: 2px solid #e55b53;
    box-shadow: 0 0 40px #e55b53;
}

/* Rote kreisförmige Umrandung für Arab Service Interlaken */
.showcase-main-image-container.arabservice::after {
    border: 2px solid #ec4f53;
    box-shadow: 0 0 40px #ec4f53;
}

/* Rote kreisförmige Umrandung für Ticket Shop Switzerland */
.showcase-main-image-container.ticketshop::after {
    border: 2px solid #ec4f53;
    box-shadow: 0 0 40px #ec4f53;
}

/* Blaugrüne kreisförmige Umrandung für Auto GA */
.showcase-main-image-container.autoga::after {
    border: 2px solid #84a3a8;
    box-shadow: 0 0 40px #84a3a8;
}

/* Braune kreisförmige Umrandung für Bernhard AG */
.showcase-main-image-container.bernhardag::after {
    border: 2px solid #655433;
    box-shadow: 0 0 40px #655433;
}

/* Grüne kreisförmige Umrandung für Bödeli Shop */
.showcase-main-image-container.boedelishop::after {
    border: 2px solid #79a73b;
    box-shadow: 0 0 40px #79a73b;
}

/* Rote kreisförmige Umrandung für Coiffure Laguna */
.showcase-main-image-container.coiffurelaguna::after {
    border: 2px solid #c84530;
    box-shadow: 0 0 40px #c84530;
}

/* Rahmen für Haus der Finanzen GmbH */
.showcase-main-image-container.hausderfinanzen::after {
    border: 2px solid #3d9c9e;
    box-shadow: 0 0 40px #3d9c9e;
}

/* Rahmen für ImmoHeld AG */
.showcase-main-image-container.immoheld::after {
    border: 2px solid #2c6ef4;
    box-shadow: 0 0 40px #2c6ef4;
}

/* Rahmen für Kosmetik BEO */
.showcase-main-image-container.kosmetikbeo::after {
    border: 2px solid #601a31;
    box-shadow: 0 0 40px #601a31;
}

/* Rahmen für OPTIFY AG - mit höchster Spezifität */
body .portfolio-showcase .showcase-main .showcase-main-image-container.optify::after {
    border: 2px solid #63136b !important;
    box-shadow: 0 0 40px #63136b !important;
}

/* Rahmen für ED. Kuhn AG - mit höchster Spezifität */
body .portfolio-showcase .showcase-main .showcase-main-image-container.edkuhn::after {
    border: 2px solid #910000 !important;
    box-shadow: 0 0 40px #910000 !important;
}

/* Rahmen für Thomas Steiner GmbH - mit höchster Spezifität */
body .portfolio-showcase .showcase-main .showcase-main-image-container.thomassteiner::after {
    border: 2px solid #c11a00 !important;
    box-shadow: 0 0 40px #c11a00 !important;
}

/* Rahmen für The Founders - mit höchster Spezifität */
body .portfolio-showcase .showcase-main .showcase-main-image-container.thefounders::after {
    border: 2px solid #00afe1 !important;
    box-shadow: 0 0 40px #00afe1 !important;
}

/* Rahmen für Tomorrow Jobs AG - mit höchster Spezifität */
body .portfolio-showcase .showcase-main .showcase-main-image-container.tomorrowjobs::after {
    border: 2px solid #c79f34 !important;
    box-shadow: 0 0 40px #c79f34 !important;
}

/* Rahmen für Vögtli + Viecelli Architekten GmbH - mit höchster Spezifität */
body .portfolio-showcase .showcase-main .showcase-main-image-container.vvarchitekten::after {
    border: 2px solid #8a0000 !important;
    box-shadow: 0 0 40px #8a0000 !important;
}

/* Rahmen für The Golden Club - mit höchster Spezifität */
body .portfolio-showcase .showcase-main .showcase-main-image-container.thegoldenclub::after {
    border: 2px solid #b38600 !important;
    box-shadow: 0 0 40px #b38600 !important;
}

/* Rahmen für Lano Baukonzept GmbH */
.showcase-main-image-container.lanobaukonzept::after {
    border: 2px solid #1a6a96;
    box-shadow: 0 0 40px #1a6a96;
}

/* Rahmen für LeuMet GmbH */
.showcase-main-image-container.leumet::after {
    border: 2px solid #3b5e93;
    box-shadow: 0 0 40px #3b5e93;
}

/* Rahmen für Lichtform AG - mit höchster Spezifität */
body .portfolio-showcase .showcase-main .showcase-main-image-container.lichtform::after {
    border: 2px solid #754313 !important;
    box-shadow: 0 0 40px #754313 !important;
}

/* Rahmen für Maler Schnabel GmbH - mit höchster Spezifität */
body .portfolio-showcase .showcase-main .showcase-main-image-container.malerschnabel::after {
    border: 2px solid #f1c832 !important;
    box-shadow: 0 0 40px #f1c832 !important;
}

.showcase-main-image {
    width: 100%;
    height: 100%;
    object-fit: fill;
    transition: all 0.8s ease;
    position: relative;
    z-index: 2;
    border-radius: 0;
    margin: 0;
}

/* Standard-Umrandung für das Hauptbild (Compiaz Informatik) */
.showcase-main-image-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    border: 2px solid rgba(117, 232, 255, 0.5);
    box-shadow: 0 0 20px rgba(117, 232, 255, 0.7);
    animation: glow-blue 3s infinite alternate;
    z-index: 3;
    margin: 20px;
    pointer-events: none;
}

/* Kreisförmige Umrandung für das EG Elektro Geräte AG Hauptbild */
.showcase-main-image-container.egelektro::before {
    border: 2px solid #ec4223;
    box-shadow: 0 0 30px #ec4223;
    animation: glow-egelektro 3s infinite alternate;
}

@keyframes glow-egelektro {
    0% { box-shadow: 0 0 20px #ec4223; border-color: #ec4223; }
    100% { box-shadow: 0 0 40px #ec4223; border-color: #ec4223; }
}

/* Kreisförmige Umrandung für das Bödeli Textilreinigung Hauptbild */
.showcase-main-image-container.boedeli::before {
    border: 2px solid #4e9a50;
    box-shadow: 0 0 30px #4e9a50;
    animation: glow-boedeli 3s infinite alternate;
}

/* Kreisförmige Umrandung für das Lichtform AG Hauptbild */
.showcase-main-image-container.lichtform::before {
    border: 2px solid #754313;
    box-shadow: 0 0 30px #754313;
    animation: glow-lichtform 3s infinite alternate;
}

@keyframes glow-lichtform {
    0% { box-shadow: 0 0 20px #754313; border-color: #754313; }
    100% { box-shadow: 0 0 40px #754313; border-color: #754313; }
}

/* Kreisförmige Umrandung für das Maler Schnabel GmbH Hauptbild */
.showcase-main-image-container.malerschnabel::before {
    border: 2px solid #f1c832;
    box-shadow: 0 0 30px #f1c832;
    animation: glow-malerschnabel 3s infinite alternate;
}

@keyframes glow-malerschnabel {
    0% { box-shadow: 0 0 20px #f1c832; border-color: #f1c832; }
    100% { box-shadow: 0 0 40px #f1c832; border-color: #f1c832; }
}

/* Kreisförmige Umrandung für das OPTIFY AG Hauptbild */
.showcase-main-image-container.optify::before {
    border: 2px solid #63136b;
    box-shadow: 0 0 30px #63136b;
    animation: glow-optify 3s infinite alternate;
}

@keyframes glow-optify {
    0% { box-shadow: 0 0 20px #63136b; border-color: #63136b; }
    100% { box-shadow: 0 0 40px #63136b; border-color: #63136b; }
}

/* Kreisförmige Umrandung für das ED. Kuhn AG Hauptbild */
.showcase-main-image-container.edkuhn::before {
    border: 2px solid #910000;
    box-shadow: 0 0 30px #910000;
    animation: glow-edkuhn 3s infinite alternate;
}

@keyframes glow-edkuhn {
    0% { box-shadow: 0 0 20px #910000; border-color: #910000; }
    100% { box-shadow: 0 0 40px #910000; border-color: #910000; }
}

/* Kreisförmige Umrandung für das Thomas Steiner GmbH Hauptbild */
.showcase-main-image-container.thomassteiner::before {
    border: 2px solid #c11a00;
    box-shadow: 0 0 30px #c11a00;
    animation: glow-thomassteiner 3s infinite alternate;
}

@keyframes glow-thomassteiner {
    0% { box-shadow: 0 0 20px #c11a00; border-color: #c11a00; }
    100% { box-shadow: 0 0 40px #c11a00; border-color: #c11a00; }
}

/* Kreisförmige Umrandung für das The Founders Hauptbild */
.showcase-main-image-container.thefounders::before {
    border: 2px solid #00afe1;
    box-shadow: 0 0 30px #00afe1;
    animation: glow-thefounders 3s infinite alternate;
}

@keyframes glow-thefounders {
    0% { box-shadow: 0 0 20px #00afe1; border-color: #00afe1; }
    100% { box-shadow: 0 0 40px #00afe1; border-color: #00afe1; }
}

/* Kreisförmige Umrandung für das Tomorrow Jobs AG Hauptbild */
.showcase-main-image-container.tomorrowjobs::before {
    border: 2px solid #c79f34;
    box-shadow: 0 0 30px #c79f34;
    animation: glow-tomorrowjobs 3s infinite alternate;
}

@keyframes glow-tomorrowjobs {
    0% { box-shadow: 0 0 20px #c79f34; border-color: #c79f34; }
    100% { box-shadow: 0 0 40px #c79f34; border-color: #c79f34; }
}

/* Kreisförmige Umrandung für das Vögtli + Viecelli Architekten GmbH Hauptbild */
.showcase-main-image-container.vvarchitekten::before {
    border: 2px solid #8a0000;
    box-shadow: 0 0 30px #8a0000;
    animation: glow-vvarchitekten 3s infinite alternate;
}

@keyframes glow-vvarchitekten {
    0% { box-shadow: 0 0 20px #8a0000; border-color: #8a0000; }
    100% { box-shadow: 0 0 40px #8a0000; border-color: #8a0000; }
}

/* Kreisförmige Umrandung für das The Golden Club Hauptbild */
.showcase-main-image-container.thegoldenclub::before {
    border: 2px solid #b38600;
    box-shadow: 0 0 30px #b38600;
    animation: glow-thegoldenclub 3s infinite alternate;
}

@keyframes glow-thegoldenclub {
    0% { box-shadow: 0 0 20px #b38600; border-color: #b38600; }
    100% { box-shadow: 0 0 40px #b38600; border-color: #b38600; }
}

/* Spezielle Styling für Logo-Thumbnails */
.showcase-thumbnails .logo-thumbnail {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    width: 100% !important;
    height: 200px !important;
    margin: 0 !important;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.showcase-thumbnails .logo-thumbnail .logo-image {
    width: 70%;
    height: 70%;
    object-fit: contain;
    padding: 10px;
    border-radius: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Anpassung der Thumbnail-Overlay für Logo-Thumbnails */
.showcase-thumbnails .logo-thumbnail .showcase-thumbnail-overlay {
    background: rgba(0, 0, 0, 0.7);
}

/* Anpassung der Thumbnail-Titel für Logo-Thumbnails */
.showcase-thumbnails .logo-thumbnail .showcase-thumbnail-title {
    font-size: 0.9rem;
}

@keyframes glow-boedeli {
    0% { box-shadow: 0 0 20px #4e9a50; border-color: #4e9a50; }
    100% { box-shadow: 0 0 40px #4e9a50; border-color: #4e9a50; }
}

/* Kreisförmige Umrandung für das Aparthotel Adelboden Hauptbild */
.showcase-main-image-container.adelboden::before {
    border: 2px solid #46b239;
    box-shadow: 0 0 30px #46b239;
    animation: glow-adelboden 3s infinite alternate;
}

@keyframes glow-adelboden {
    0% { box-shadow: 0 0 20px #46b239; border-color: #46b239; }
    100% { box-shadow: 0 0 40px #46b239; border-color: #46b239; }
}

/* Kreisförmige Umrandung für das Restaurant Brunne Hauptbild */
.showcase-main-image-container.brunne::before {
    border: 2px solid #9bbac7;
    box-shadow: 0 0 30px #9bbac7;
    animation: glow-brunne 3s infinite alternate;
}

@keyframes glow-brunne {
    0% { box-shadow: 0 0 20px #9bbac7; border-color: #9bbac7; }
    100% { box-shadow: 0 0 40px #9bbac7; border-color: #9bbac7; }
}

/* Kreisförmige Umrandung für das Action-Sport GmbH Hauptbild */
.showcase-main-image-container.actionsport::before {
    border: 2px solid #605439;
    box-shadow: 0 0 30px #605439;
    animation: glow-actionsport 3s infinite alternate;
}

@keyframes glow-actionsport {
    0% { box-shadow: 0 0 20px #605439; border-color: #605439; }
    100% { box-shadow: 0 0 40px #605439; border-color: #605439; }
}

/* Kreisförmige Umrandung für das Aare Jungfrau AG Hauptbild */
.showcase-main-image-container.aarejungfrau::before {
    border: 2px solid #e55b53;
    box-shadow: 0 0 30px #e55b53;
    animation: glow-aarejungfrau 3s infinite alternate;
}

@keyframes glow-aarejungfrau {
    0% { box-shadow: 0 0 20px #e55b53; border-color: #e55b53; }
    100% { box-shadow: 0 0 40px #e55b53; border-color: #e55b53; }
}

/* Kreisförmige Umrandung für das Arab Service Interlaken Hauptbild */
.showcase-main-image-container.arabservice::before {
    border: 2px solid #ec4f53;
    box-shadow: 0 0 30px #ec4f53;
    animation: glow-arabservice 3s infinite alternate;
}

@keyframes glow-arabservice {
    0% { box-shadow: 0 0 20px #ec4f53; border-color: #ec4f53; }
    100% { box-shadow: 0 0 40px #ec4f53; border-color: #ec4f53; }
}

/* Kreisförmige Umrandung für das Ticket Shop Switzerland Hauptbild */
.showcase-main-image-container.ticketshop::before {
    border: 2px solid #ec4f53;
    box-shadow: 0 0 30px #ec4f53;
    animation: glow-ticketshop 3s infinite alternate;
}

@keyframes glow-ticketshop {
    0% { box-shadow: 0 0 20px #ec4f53; border-color: #ec4f53; }
    100% { box-shadow: 0 0 40px #ec4f53; border-color: #ec4f53; }
}

/* Kreisförmige Umrandung für das Auto GA Hauptbild */
.showcase-main-image-container.autoga::before {
    border: 2px solid #84a3a8;
    box-shadow: 0 0 30px #84a3a8;
    animation: glow-autoga 3s infinite alternate;
}

@keyframes glow-autoga {
    0% { box-shadow: 0 0 20px #84a3a8; border-color: #84a3a8; }
    100% { box-shadow: 0 0 40px #84a3a8; border-color: #84a3a8; }
}

/* Kreisförmige Umrandung für das Bernhard AG Hauptbild */
.showcase-main-image-container.bernhardag::before {
    border: 2px solid #655433;
    box-shadow: 0 0 30px #655433;
    animation: glow-bernhardag 3s infinite alternate;
}

@keyframes glow-bernhardag {
    0% { box-shadow: 0 0 20px #655433; border-color: #655433; }
    100% { box-shadow: 0 0 40px #655433; border-color: #655433; }
}

/* Kreisförmige Umrandung für das Bödeli Shop Hauptbild */
.showcase-main-image-container.boedelishop::before {
    border: 2px solid #79a73b;
    box-shadow: 0 0 30px #79a73b;
    animation: glow-boedelishop 3s infinite alternate;
}

@keyframes glow-boedelishop {
    0% { box-shadow: 0 0 20px #79a73b; border-color: #79a73b; }
    100% { box-shadow: 0 0 40px #79a73b; border-color: #79a73b; }
}

/* Kreisförmige Umrandung für das Coiffure Laguna Hauptbild */
.showcase-main-image-container.coiffurelaguna::before {
    border: 2px solid #c84530;
    box-shadow: 0 0 30px #c84530;
    animation: glow-coiffurelaguna 3s infinite alternate;
}

@keyframes glow-coiffurelaguna {
    0% { box-shadow: 0 0 20px #c84530; border-color: #c84530; }
    100% { box-shadow: 0 0 40px #c84530; border-color: #c84530; }
}

/* Kreisförmige Umrandung für das Haus der Finanzen GmbH Hauptbild */
.showcase-main-image-container.hausderfinanzen::before {
    border: 2px solid #3d9c9e;
    box-shadow: 0 0 30px #3d9c9e;
    animation: glow-hausderfinanzen 3s infinite alternate;
}

@keyframes glow-hausderfinanzen {
    0% { box-shadow: 0 0 20px #3d9c9e; border-color: #3d9c9e; }
    100% { box-shadow: 0 0 40px #414487; border-color: #414487; }
}

/* Kreisförmige Umrandung für das ImmoHeld AG Hauptbild */
.showcase-main-image-container.immoheld::before {
    border: 2px solid #2c6ef4;
    box-shadow: 0 0 30px #2c6ef4;
    animation: glow-immoheld 3s infinite alternate;
}

@keyframes glow-immoheld {
    0% { box-shadow: 0 0 20px #2c6ef4; border-color: #2c6ef4; }
    100% { box-shadow: 0 0 40px #2c6ef4; border-color: #2c6ef4; }
}

/* Kreisförmige Umrandung für das Kosmetik BEO Hauptbild */
.showcase-main-image-container.kosmetikbeo::before {
    border: 2px solid #601a31;
    box-shadow: 0 0 30px #601a31;
    animation: glow-kosmetikbeo 3s infinite alternate;
}

@keyframes glow-kosmetikbeo {
    0% { box-shadow: 0 0 20px rgba(96, 26, 49, 0.7); border-color: rgba(96, 26, 49, 0.7); }
    100% { box-shadow: 0 0 40px rgba(96, 26, 49, 0.9); border-color: rgba(96, 26, 49, 0.9); }
}

@keyframes glow-blue {
    0% { box-shadow: 0 0 20px rgba(117, 232, 255, 0.7); border-color: rgba(117, 232, 255, 0.5); }
    100% { box-shadow: 0 0 30px rgba(117, 232, 255, 0.9); border-color: rgba(117, 232, 255, 0.8); }
}

/* Gelbe Umrandung für H Gosteli AG */
.showcase-main-image-container.gosteli::before {
    border: 2px solid rgba(246, 247, 158, 0.5);
    box-shadow: 0 0 20px rgba(246, 247, 158, 0.7);
    animation: glow-yellow 3s infinite alternate;
}

@keyframes glow-yellow {
    0% { box-shadow: 0 0 20px rgba(246, 247, 158, 0.7); border-color: rgba(246, 247, 158, 0.5); }
    100% { box-shadow: 0 0 30px rgba(246, 247, 158, 0.9); border-color: rgba(246, 247, 158, 0.8); }
}

/* Goldene Umrandung für Ibex Elektro */
.showcase-main-image-container.ibex::before {
    border: 2px solid rgba(241, 194, 0, 0.5);
    box-shadow: 0 0 20px rgba(241, 194, 0, 0.7);
    animation: glow-gold 3s infinite alternate;
}

@keyframes glow-gold {
    0% { box-shadow: 0 0 20px rgba(241, 194, 0, 0.7); border-color: rgba(241, 194, 0, 0.5); }
    100% { box-shadow: 0 0 30px rgba(241, 194, 0, 0.9); border-color: rgba(241, 194, 0, 0.8); }
}

/* Orange Umrandung für Scheidegger CRM */
.showcase-main-image-container.scheidegger::before {
    border: 2px solid rgba(235, 105, 30, 0.5);
    box-shadow: 0 0 20px rgba(235, 105, 30, 0.7);
    animation: glow-orange 3s infinite alternate;
}

@keyframes glow-orange {
    0% { box-shadow: 0 0 20px rgba(235, 105, 30, 0.7); border-color: rgba(235, 105, 30, 0.5); }
    100% { box-shadow: 0 0 30px rgba(235, 105, 30, 0.9); border-color: rgba(235, 105, 30, 0.8); }
}

/* Dunkelgrüne Umrandung für Golf Grindelwald */
.showcase-main-image-container.golf::before {
    border: 2px solid rgba(57, 69, 15, 0.5);
    box-shadow: 0 0 20px rgba(57, 69, 15, 0.7);
    animation: glow-green 3s infinite alternate;
}

@keyframes glow-green {
    0% { box-shadow: 0 0 20px rgba(57, 69, 15, 0.7); border-color: rgba(57, 69, 15, 0.5); }
    100% { box-shadow: 0 0 30px rgba(57, 69, 15, 0.9); border-color: rgba(57, 69, 15, 0.8); }
}

/* Braune Umrandung für Restaurant Pizzeria Landhaus */
.showcase-main-image-container.landhaus::before {
    border: 2px solid rgba(144, 114, 78, 0.5);
    box-shadow: 0 0 20px rgba(144, 114, 78, 0.7);
    animation: glow-brown 3s infinite alternate;
}

@keyframes glow-brown {
    0% { box-shadow: 0 0 20px rgba(144, 114, 78, 0.7); border-color: rgba(144, 114, 78, 0.5); }
    100% { box-shadow: 0 0 30px rgba(144, 114, 78, 0.9); border-color: rgba(144, 114, 78, 0.8); }
}

/* Braune Umrandung für Restaurant Pizzeria Landhaus */
.showcase-main-image-container.landhaus::before {
    border: 2px solid rgba(144, 114, 78, 0.5);
    box-shadow: 0 0 20px rgba(144, 114, 78, 0.7);
    animation: glow-brown 3s infinite alternate;
}

@keyframes glow-brown {
    0% { box-shadow: 0 0 20px rgba(144, 114, 78, 0.7); border-color: rgba(144, 114, 78, 0.5); }
    100% { box-shadow: 0 0 30px rgba(144, 114, 78, 0.9); border-color: rgba(144, 114, 78, 0.8); }
}

.showcase-main-content {
    padding: 20px 30px;
    background-color: rgba(0, 0, 0, 0.9);
    color: #fff;
    z-index: 2;
}

.showcase-main-title {
    font-size: 2.2rem;
    margin-bottom: 5px;
    color: #fff;
    font-weight: 700;
}

.showcase-main-category {
    font-size: 1.2rem;
    color: rgba(255, 105, 180, 0.9);
    margin-bottom: 15px;
    opacity: 0.9;
    font-weight: 500;
}

.showcase-main-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.showcase-tag {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
    transition: all 0.3s ease;
}

.showcase-main-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(45deg, var(--logo-gradient-start), var(--logo-gradient-end));
    color: white;
    border: none;
    border-radius: 30px;
    padding: 0.6rem 1.2rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.showcase-main-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(240, 58, 112, 0.3);
}

/* Vertikale Thumbnails rechts */
.showcase-thumbnails {
    flex: 0 0 35%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #000000;
    overflow-y: auto;
    padding: 10px 0;
    position: relative;
    z-index: 1;
}

/* Anpassung für Logo-Thumbnails im Container */
.showcase-thumbnails.logo-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 20px;
    padding: 20px;
    max-height: none;
    overflow: visible;
    background-color: transparent;
    width: 100%;
    flex: 1 1 auto;
}

.showcase-thumbnail {
    position: relative;
    height: 140px;
    margin: 10px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none !important;
}

/* Globale Regel um alle Umrandungen und Schatten zu entfernen */
.showcase-thumbnail,
.showcase-thumbnail.active,
.showcase-thumbnail:hover,
.showcase-thumbnail.active:hover,
.showcase-thumbnail[class*="gosteli"],
.showcase-thumbnail[class*="ibex"],
.showcase-thumbnail[class*="scheidegger"],
.showcase-thumbnail[class*="golf"],
.showcase-thumbnail[class*="landhaus"],
.showcase-thumbnail[class*="egelektro"],
.showcase-thumbnail[class*="boedeli"],
.showcase-thumbnail[class*="adelboden"],
.showcase-thumbnail[class*="brunne"],
.showcase-thumbnail[class*="actionsport"],
.showcase-thumbnail[class*="aarejungfrau"],
.showcase-thumbnail[class*="arabservice"],
.showcase-thumbnail[class*="ticketshop"],
.showcase-thumbnail[class*="autoga"],
.showcase-thumbnail[class*="kosmetikbeo"],
.showcase-thumbnail[class*="compiaz"] {
    border: none !important;
    box-shadow: none !important;
}

/* Spezieller Stil für das erste Thumbnail (Compiaz Informatik) */
.showcase-thumbnail.active {
    border: none !important;
    box-shadow: none !important;
}

.showcase-thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: all 0.5s ease;
}

.showcase-thumbnail-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
    padding: 15px;
}

.showcase-thumbnail:hover {
    transform: translateX(-5px);
    box-shadow: none !important;
}

.showcase-thumbnail.active:hover {
    box-shadow: none !important;
}

.showcase-thumbnail:hover .showcase-thumbnail-overlay {
    background: rgba(0, 0, 0, 0.9);
    opacity: 1;
}

/* Spezifischer Stil für das H Gosteli AG Thumbnail */
.showcase-thumbnail.gosteli {
    border: none !important;
    box-shadow: none !important;
}

.showcase-thumbnail.gosteli:hover {
    box-shadow: 0 0 20px rgba(246, 247, 158, 0.6);
}

.showcase-thumbnail.gosteli.active {
    transform: translateX(-5px);
}

/* Spezifischer Stil für das Ibex Elektro Thumbnail */
.showcase-thumbnail.ibex {
    border: 2px solid rgba(241, 194, 0, 0.5);
    box-shadow: 0 0 15px rgba(241, 194, 0, 0.4);
}

.showcase-thumbnail.ibex:hover {
    box-shadow: 0 0 20px rgba(241, 194, 0, 0.6);
}

.showcase-thumbnail.ibex.active {
    transform: translateX(-5px);
}

/* Spezifischer Stil für das Scheidegger CRM Thumbnail */
.showcase-thumbnail.scheidegger {
    border: 2px solid rgba(235, 105, 30, 0.5);
    box-shadow: 0 0 15px rgba(235, 105, 30, 0.4);
}

.showcase-thumbnail.scheidegger:hover {
    box-shadow: 0 0 20px rgba(235, 105, 30, 0.6);
}

.showcase-thumbnail.scheidegger.active {
    transform: translateX(-5px);
}

/* Spezifischer Stil für das Golf Grindelwald Thumbnail */
.showcase-thumbnail.golf {
    border: 2px solid rgba(57, 69, 15, 0.5);
    box-shadow: 0 0 15px rgba(57, 69, 15, 0.4);
}

.showcase-thumbnail.golf:hover {
    box-shadow: 0 0 20px rgba(57, 69, 15, 0.6);
}

.showcase-thumbnail.golf.active {
    transform: translateX(-5px);
}

/* Spezifischer Stil für das Restaurant Pizzeria Landhaus Thumbnail */
.showcase-thumbnail.landhaus {
    border: 2px solid rgba(144, 114, 78, 0.5);
    box-shadow: 0 0 15px rgba(144, 114, 78, 0.4);
}

.showcase-thumbnail.landhaus:hover {
    box-shadow: 0 0 20px rgba(144, 114, 78, 0.6);
}

.showcase-thumbnail.landhaus.active {
    transform: translateX(-5px);
}

/* Spezifischer Stil für das EG Elektro Geräte AG Thumbnail */
.showcase-thumbnail.egelektro {
    border: 2px solid #ec4223;
    box-shadow: 0 0 15px #ec4223;
}

.showcase-thumbnail.egelektro:hover {
    box-shadow: 0 0 20px #ec4223;
}

.showcase-thumbnail.egelektro.active {
    transform: translateX(-5px);
}

/* Spezifischer Stil für das Bödeli Textilreinigung Thumbnail */
.showcase-thumbnail.boedeli {
    border: 2px solid #4e9a50;
    box-shadow: 0 0 15px #4e9a50;
}

.showcase-thumbnail.boedeli:hover {
    box-shadow: 0 0 20px #4e9a50;
}

.showcase-thumbnail.boedeli.active {
    transform: translateX(-5px);
}

/* Spezifischer Stil für das Aparthotel Adelboden Thumbnail */
.showcase-thumbnail.adelboden {
    border: 2px solid #46b239;
    box-shadow: 0 0 15px #46b239;
}

.showcase-thumbnail.adelboden:hover {
    box-shadow: 0 0 20px #46b239;
}

.showcase-thumbnail.adelboden.active {
    transform: translateX(-5px);
}

/* Spezifischer Stil für das Restaurant Brunne Thumbnail */
.showcase-thumbnail.brunne {
    border: 2px solid #9bbac7;
    box-shadow: 0 0 15px #9bbac7;
}

.showcase-thumbnail.brunne:hover {
    box-shadow: 0 0 20px #9bbac7;
}

.showcase-thumbnail.brunne.active {
    transform: translateX(-5px);
}

/* Spezifischer Stil für das Action-Sport GmbH Thumbnail */
.showcase-thumbnail.actionsport {
    border: 2px solid #605439;
    box-shadow: 0 0 15px #605439;
}

.showcase-thumbnail.actionsport:hover {
    box-shadow: 0 0 20px #605439;
}

.showcase-thumbnail.actionsport.active {
    transform: translateX(-5px);
}

/* Spezifischer Stil für das Aare Jungfrau AG Thumbnail */
.showcase-thumbnail.aarejungfrau {
    border: 2px solid #e55b53;
    box-shadow: 0 0 15px #e55b53;
}

.showcase-thumbnail.aarejungfrau:hover {
    box-shadow: 0 0 20px #e55b53;
}

.showcase-thumbnail.aarejungfrau.active {
    transform: translateX(-5px);
}

/* Spezifischer Stil für das Arab Service Interlaken Thumbnail */
.showcase-thumbnail.arabservice {
    border: 2px solid #ec4f53;
    box-shadow: 0 0 15px #ec4f53;
}

.showcase-thumbnail.arabservice:hover {
    box-shadow: 0 0 20px #ec4f53;
}

.showcase-thumbnail.arabservice.active {
    transform: translateX(-5px);
}

/* Spezifischer Stil für das Ticket Shop Switzerland Thumbnail */
.showcase-thumbnail.ticketshop {
    border: 2px solid #ec4f53;
    box-shadow: 0 0 15px #ec4f53;
}

.showcase-thumbnail.ticketshop:hover {
    box-shadow: 0 0 20px #ec4f53;
}

.showcase-thumbnail.ticketshop.active {
    transform: translateX(-5px);
}

/* Spezifischer Stil für das Auto GA Thumbnail */
.showcase-thumbnail.autoga {
    border: 2px solid #84a3a8;
    box-shadow: 0 0 15px #84a3a8;
}

.showcase-thumbnail.autoga:hover {
    box-shadow: 0 0 20px #84a3a8;
}

.showcase-thumbnail.autoga.active {
    transform: translateX(-5px);
}

/* Spezifischer Stil für das Bernhard AG Thumbnail */
.showcase-thumbnail.bernhardag {
    border: 2px solid #655433;
    box-shadow: 0 0 15px #655433;
}

.showcase-thumbnail.bernhardag:hover {
    box-shadow: 0 0 20px #655433;
}

.showcase-thumbnail.bernhardag.active {
    transform: translateX(-5px);
}

/* Spezifischer Stil für das Bödeli Shop Thumbnail */
.showcase-thumbnail.boedelishop {
    border: 2px solid #79a73b;
    box-shadow: 0 0 15px #79a73b;
}

.showcase-thumbnail.boedelishop:hover {
    box-shadow: 0 0 20px #79a73b;
}

.showcase-thumbnail.boedelishop.active {
    transform: translateX(-5px);
}

/* Spezifischer Stil für das Coiffure Laguna Thumbnail */
.showcase-thumbnail.coiffurelaguna {
    border: 2px solid #c84530;
    box-shadow: 0 0 15px #c84530;
}

.showcase-thumbnail.coiffurelaguna:hover {
    box-shadow: 0 0 20px #c84530;
}

.showcase-thumbnail.coiffurelaguna.active {
    transform: translateX(-5px);
}

/* Spezifischer Stil für das Haus der Finanzen GmbH Thumbnail */
.showcase-thumbnail.hausderfinanzen {
    border: 2px solid #3d9c9e;
    box-shadow: 0 0 15px #3d9c9e;
}

.showcase-thumbnail.hausderfinanzen:hover {
    box-shadow: 0 0 20px #3d9c9e;
}

.showcase-thumbnail.hausderfinanzen.active {
    transform: translateX(-5px);
}

/* Spezifischer Stil für das ImmoHeld AG Thumbnail */
.showcase-thumbnail.immoheld {
    border: 2px solid #2c6ef4;
    box-shadow: 0 0 15px #2c6ef4;
}

.showcase-thumbnail.immoheld:hover {
    box-shadow: 0 0 20px #2c6ef4;
}

.showcase-thumbnail.immoheld.active {
    transform: translateX(-5px);
}

/* Spezifischer Stil für das Kosmetik BEO Thumbnail */
.showcase-thumbnail.kosmetikbeo {
    border: none !important;
    box-shadow: none !important;
    width: 80% !important; /* Stark reduzierte Breite */
    max-width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    transform: scale(0.9) !important; /* Zusätzliche Verkleinerung */
}

.showcase-thumbnail.kosmetikbeo:hover {
    box-shadow: none !important;
    transform: scale(0.9) translateX(-5px) !important;
}

.showcase-thumbnail.kosmetikbeo.active {
    transform: scale(0.9) !important;
    box-shadow: none !important;
}

/* Spezifischer Stil für das Lano Baukonzept GmbH Thumbnail */
.showcase-thumbnail.lanobaukonzept {
    border: 2px solid #1a6a96;
    box-shadow: 0 0 15px #1a6a96;
}

.showcase-thumbnail.lanobaukonzept:hover {
    box-shadow: 0 0 20px #1a6a96;
}

.showcase-thumbnail.lanobaukonzept.active {
    transform: translateX(-5px);
}

/* Spezifischer Stil für das LeuMet GmbH Thumbnail */
.showcase-thumbnail.leumet {
    border: 2px solid #3b5e93;
    box-shadow: 0 0 15px #3b5e93;
}

.showcase-thumbnail.leumet:hover {
    box-shadow: 0 0 20px #3b5e93;
}

.showcase-thumbnail.leumet.active {
    transform: translateX(-5px);
}

/* Spezifischer Stil für das Lichtform AG Thumbnail */
.showcase-thumbnail.lichtform {
    border: 2px solid #b8752f;
    box-shadow: 0 0 15px #b8752f;
}

.showcase-thumbnail.lichtform:hover {
    box-shadow: 0 0 20px #b8752f;
}

.showcase-thumbnail.lichtform.active {
    transform: translateX(-5px);
}

/* Spezifischer Stil für das Maler Schnabel GmbH Thumbnail */
.showcase-thumbnail.malerschnabel {
    border: 2px solid #ffcc00;
    box-shadow: 0 0 15px #ffcc00;
}

.showcase-thumbnail.malerschnabel:hover {
    box-shadow: 0 0 20px #ffcc00;
}

.showcase-thumbnail.malerschnabel.active {
    transform: translateX(-5px);
}

/* Kosmetik BEO verwendet den Standard-Overlay */

/* Überschreibe den aktiven Zustand für Kosmetik BEO */
.showcase-thumbnail.kosmetikbeo.active:hover {
    box-shadow: 0 0 20px #601a31;
}

.showcase-thumbnail.kosmetikbeo.active::after {
    border-color: #601a31;
    box-shadow: inset 0 0 15px #601a31;
}

/* Überschreibe den aktiven Zustand für Lano Baukonzept GmbH */
.showcase-thumbnail.lanobaukonzept.active:hover {
    box-shadow: 0 0 20px #1a6a96;
}

.showcase-thumbnail.lanobaukonzept.active::after {
    border-color: #1a6a96;
    box-shadow: inset 0 0 15px #1a6a96;
}

/* Überschreibe den aktiven Zustand für LeuMet GmbH */
.showcase-thumbnail.leumet.active:hover {
    box-shadow: 0 0 20px #3b5e93;
}

.showcase-thumbnail.leumet.active::after {
    border-color: #3b5e93;
    box-shadow: inset 0 0 15px #3b5e93;
}

/* Überschreibe den aktiven Zustand für Lichtform AG */
.showcase-thumbnail.lichtform.active:hover {
    box-shadow: 0 0 20px #b8752f;
}

.showcase-thumbnail.lichtform.active::after {
    border-color: #b8752f;
    box-shadow: inset 0 0 15px #b8752f;
}

/* Überschreibe den aktiven Zustand für Maler Schnabel GmbH */
.showcase-thumbnail.malerschnabel.active:hover {
    box-shadow: 0 0 20px #ffcc00;
}

.showcase-thumbnail.malerschnabel.active::after {
    border-color: #ffcc00;
    box-shadow: inset 0 0 15px #ffcc00;
}

/* Neon-Glühen für aktives Thumbnail */
.showcase-thumbnail.active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 15px rgba(117, 232, 255, 0.8);
    pointer-events: none;
    z-index: 1;
}

/* Spezieller Glow-Effekt für H Gosteli AG */
.showcase-thumbnail.gosteli::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 15px rgba(246, 247, 158, 0.8);
    pointer-events: none;
    z-index: 1;
}

/* Spezieller Glow-Effekt für Ibex Elektro */
.showcase-thumbnail.ibex::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 15px rgba(241, 194, 0, 0.8);
    pointer-events: none;
    z-index: 1;
}

/* Spezieller Glow-Effekt für Scheidegger CRM */
.showcase-thumbnail.scheidegger::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 15px rgba(235, 105, 30, 0.8);
    pointer-events: none;
    z-index: 1;
}

/* Spezieller Glow-Effekt für Golf Grindelwald */
.showcase-thumbnail.golf::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 15px rgba(57, 69, 15, 0.8);
    pointer-events: none;
    z-index: 1;
}

/* Spezieller Glow-Effekt für Restaurant Pizzeria Landhaus */
.showcase-thumbnail.landhaus::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 15px rgba(144, 114, 78, 0.8);
    pointer-events: none;
    z-index: 1;
}

/* Spezieller Glow-Effekt für EG Elektro Geräte AG */
.showcase-thumbnail.egelektro::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 15px #ec4223;
    pointer-events: none;
    z-index: 1;
}

/* Spezieller Glow-Effekt für Bödeli Textilreinigung */
.showcase-thumbnail.boedeli::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 15px #4e9a50;
    pointer-events: none;
    z-index: 1;
}

/* Spezieller Glow-Effekt für Aparthotel Adelboden */
.showcase-thumbnail.adelboden::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 15px #46b239;
    pointer-events: none;
    z-index: 1;
}

/* Spezieller Glow-Effekt für Restaurant Brunne */
.showcase-thumbnail.brunne::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 15px #9bbac7;
    pointer-events: none;
    z-index: 1;
}

/* Spezieller Glow-Effekt für Action-Sport GmbH */
.showcase-thumbnail.actionsport::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 15px #605439;
    pointer-events: none;
    z-index: 1;
}

/* Spezieller Glow-Effekt für Aare Jungfrau AG */
.showcase-thumbnail.aarejungfrau::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 15px #e55b53;
    pointer-events: none;
    z-index: 1;
}

/* Spezieller Glow-Effekt für Arab Service Interlaken */
.showcase-thumbnail.arabservice::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 15px #ec4f53;
    pointer-events: none;
    z-index: 1;
}

/* Spezieller Glow-Effekt für Ticket Shop Switzerland */
.showcase-thumbnail.ticketshop::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 15px #ec4f53;
    pointer-events: none;
    z-index: 1;
}

/* Spezieller Glow-Effekt für Auto GA */
.showcase-thumbnail.autoga::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 15px #84a3a8;
    pointer-events: none;
    z-index: 1;
}

/* Spezieller Glow-Effekt für Bernhard AG */
.showcase-thumbnail.bernhardag::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 15px #655433;
    pointer-events: none;
    z-index: 1;
}

/* Spezieller Glow-Effekt für Bödeli Shop */
.showcase-thumbnail.boedelishop::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 15px #79a73b;
    pointer-events: none;
    z-index: 1;
}

/* Spezieller Glow-Effekt für Coiffure Laguna */
.showcase-thumbnail.coiffurelaguna::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 15px #c84530;
    pointer-events: none;
    z-index: 1;
}

/* Spezieller Glow-Effekt für Haus der Finanzen GmbH - entfernt */

.showcase-thumbnail-title {
    color: white;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    margin: 0;
    padding: 8px 15px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 5px;
    width: auto;
    max-width: 90%;
    white-space: normal;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    line-height: 1.3;
    transition: all 0.3s ease;
    overflow: visible !important;
    text-overflow: initial;
    word-wrap: break-word;
}

.showcase-thumbnail:hover .showcase-thumbnail-image {
    transform: scale(1.1);
}

/* Responsive Anpassungen */
@media (max-width: 992px) {
    .portfolio-showcase {
        flex-direction: column;
        height: auto;
    }
    
    .showcase-main {
        flex: 0 0 400px;
    }
    
    .showcase-thumbnails {
        flex: 0 0 auto;
        flex-direction: row;
        overflow-x: auto;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .showcase-thumbnail {
        flex: 0 0 200px;
        height: 150px;
        border-bottom: none;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .showcase-thumbnail.active {
        box-shadow: inset 0 4px 0 var(--logo-gradient-start);
    }
}

@media (max-width: 576px) {
    .showcase-main {
        flex: 0 0 300px;
    }
    
    .showcase-main-content {
        padding: 1rem;
    }
    
    .showcase-main-title {
        font-size: 1.5rem;
    }
    
    .showcase-thumbnail {
        flex: 0 0 150px;
    }
}