/* =========================================================
   LUMACAS KRÄMERLADEN
   Vorschau / Grundlayout
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* =========================================================
   SEITE
========================================================= */

html,
body {

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #111;

}


/* =========================================================
   DIE SZENE
   Originalbild: 1536 × 1024 = 3:2

   Dadurch bleibt das komplette Bild immer sichtbar.
   Keine Beschneidung durch "cover".
========================================================= */

.shop-scene {

    position: relative;

    width: min(100vw, 150vh);
    height: min(100vh, 66.6667vw);

    aspect-ratio: 3 / 2;

    margin: auto;

    background-image:
        url("assets/kraemerladen/kraemerladen.png");

    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;

}


/* =========================================================
   UNSICHTBARE BUTTONS
========================================================= */

.hotspot {

    position: absolute;

    display: block;

    border: none;

    background: transparent;


    cursor: pointer;

    z-index: 10;

}


/* =========================================================
   GEMISCHTWAREN
========================================================= */

.hotspot-gemischt {

    left: 21.2%;
    top: 53.6%;

    width: 28%;
    height: 9.2%;

}


/* =========================================================
   MEDIKAMENTE
========================================================= */

.hotspot-medikamente {

    left: 48.8%;
    top: 53.6%;

    width: 27.2%;
    height: 9.2%;

}


/* =========================================================
   FAHRZEUGTEILE
========================================================= */

.hotspot-fahrzeug {

    left: 21.2%;
    top: 64.4%;

    width: 26.5%;
    height: 9.2%;

}


/* =========================================================
   WAFFENTEILE & MUNITION
========================================================= */

.hotspot-waffen {

    left: 48.8%;
    top: 64.4%;

    width: 27.2%;
    height: 9.2%;

}


/* =========================================================
   SUCHFELD – EINGEGEBENER TEXT
========================================================= */

.search-hotspot {

    position: absolute;

    left: 23%;
    top: 75.8%;

    width: 54%;
    height: 7.5%;

    z-index: 10;

    border: none;
    outline: none;

    background: transparent;

    /* Schrift des eingegebenen Suchbegriffs */
    font-family: "Rajdhani", sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;

    color: #f4e4b8;

    /* Abstand links und vertikale Position */
    padding: 8px 55px 0 55px;

    /* kein Browser-Standard-Styling */
    appearance: none;
    -webkit-appearance: none;

    cursor: text;

}


/* =========================================================
   PLACEHOLDER
   "Artikel suchen..." bleibt im bisherigen Stil
========================================================= */

.search-hotspot::placeholder {

    font-family: "Cormorant Garamond", serif;

    font-size: 22px;

    font-weight: 400;

    color: #b9a887;

    opacity: 1;

}


/* =========================================================
   MOBILE / KLEINE BILDSCHIRME
========================================================= */

@media (max-aspect-ratio: 3 / 2) {

    .shop-scene {

        width: 100vw;
        height: 66.6667vw;

    }

}

@media (min-aspect-ratio: 3 / 2) {

    .shop-scene {

        width: 150vh;
        height: 100vh;

    }

}
/* =========================================================
   KATEGORIE-FENSTER
========================================================= */

.category-panel {

    position: absolute;

    left: 15%;
    top: 18%;

    width: 70%;
    height: 64%;

    z-index: 20;

    display: none;

    background:
        linear-gradient(
            rgba(25,18,10,.96),
            rgba(15,11,7,.97)
        );

    border: 2px solid #c89b4c;

    border-radius: 12px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.75);

    padding: 35px;

    overflow-y: auto;

}


/* geöffnet */

.category-panel.open {

    display: block;

}


/* =========================================================
   KOPF
========================================================= */

.category-header {

    text-align: center;

    padding-bottom: 25px;

    border-bottom: 1px solid rgba(200,155,76,.5);

}


.category-header h2 {

    font-family: "Cinzel", serif;

    font-size: 34px;

    color: #ddb96c;

    margin-bottom: 8px;

}


.category-header p {

    color: #d8c7a1;

    font-size: 20px;

}


/* =========================================================
   SCHLIESSEN
========================================================= */

.close-category {

    position: absolute;

    right: 20px;
    top: 18px;

    width: 38px;
    height: 38px;

    border: 1px solid #c89b4c;

    border-radius: 50%;

    background: rgba(0,0,0,.4);

    color: #ddb96c;

    font-size: 20px;

    cursor: pointer;

}


.close-category:hover {

    background: rgba(200,155,76,.2);

}


/* =========================================================
   ANGEBOTE
========================================================= */

.offer-list {

    display: flex;

    flex-direction: column;

    gap: 14px;

    padding-top: 25px;

}


.offer {

    padding: 18px 22px;

    background:
        rgba(80,55,28,.55);

    border: 1px solid rgba(200,155,76,.35);

    border-radius: 8px;

}


.offer-name {

    font-family: "Cinzel", serif;

    font-size: 24px;

    color: #f0d49a;

    margin-bottom: 8px;

}


.offer-trade {

    font-size: 19px;

    color: #eee3cc;

}


.offer-trade strong {

    color: #ddb96c;

}


.offer-info {

    margin-top: 8px;

    font-size: 16px;

    color: #bcae91;

}
/* =========================================================
   ZURÜCK BUTTON
========================================================= */

.back-button {

    position: absolute;

    left: 42%;
    top: 85%;

    width: 16%;
    height: 5%;

    z-index: 15;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    font-family: "Cinzel", serif;
    font-size: 18px;
    font-weight: 600;

    color: #f4e4b8;

    background: rgba(35, 25, 14, .90);

    border: 1px solid #c89b4c;

    border-radius: 6px;

    box-shadow:
        inset 0 0 8px rgba(0,0,0,.45),
        0 4px 10px rgba(0,0,0,.35);

    cursor: pointer;

    transition: all .25s ease;
}

.back-button:hover {

    background: rgba(200,155,76,.25);

    color: #fff1c7;

    border-color: #e0bb70;

    box-shadow:
        0 0 15px rgba(200,155,76,.45),
        0 4px 12px rgba(0,0,0,.4);

}