body {
    margin:0;
    font-family: "Segoe UI", sans-serif;
    background:#000000;
    color:#f5f5f5;
}

/* Beispiel für Tempari Logo-Headline */
.tempari-title {
    font-family: 'Playfair Display', serif;
    font-size: 4rem;
    letter-spacing: 0.15em;
}

.quote {
  font-family: 'Allura', cursive;
  font-size: 2.6rem;
}

.spacer {
  display: inline-block;
  width: 2rem;
}


.hero {
    height:80vh;
    background:url("img/bg-zen-dark.jpg") center/cover fixed;
    text-align:center;
    padding-top:4rem;
}

.logo {
    width:604px;
    margin-bottom:2rem;
}

.lang-switch button {
    margin:0.3rem;
    background:none;
    color:white;
    border:1px solid rgba(255,255,255,0.4);
    padding:6px 12px;
    cursor:pointer;
}

.products {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:2rem;
    padding:4rem;
}

.product {
    padding:2.5rem;
    border-radius:20px;
    text-decoration:none;
    color:white;
    transition:transform 0.4s, box-shadow 0.4s;
}

.product:hover {
    transform:translateY(-10px);
    box-shadow:0 30px 60px rgba(0,0,0,0.7);
}

.sunlight { background:linear-gradient(135deg,#8bdc28,#356f1c); }
.moonlight { background:linear-gradient(135deg,#7a1b1b,#220000); }
.starlight { background:linear-gradient(135deg,#4b0000,#000); }

footer {
    text-align:center;
    padding:2rem;
    opacity:0.6;
}


/* Starlight */

.tempari-starlightschleife {
    position: relative;   /* Pflicht */
    width: 357px;
    height: 255px;

    background-image: url("img/tempari-starlight-background.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    flex-shrink: 0;
}




.tempari-starlightschleife::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 1;
}


.tempari-starlightschleife-inhalt {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
}

.tempari-starlight-row {
    display: flex;
    width: 100%;
    height: 255px;
    overflow: hidden;   /* SEHR WICHTIG */
}


.tempari-starlight-bild {
    height: 255px;
    flex: 1;

    background-image: url("img/tempüra-stralight.png");
    background-repeat: repeat-x;
    background-position: left center;
    background-size: auto 255px;
}


.tempari-starlight-row {
    position: relative;   /* EXTREM WICHTIG */
    display: flex;
    width: 100%;
    height: 255px;
    overflow: hidden;
}



/* ===============================
   DEBUG – NUR ZUR FEHLERSUCHE
   =============================== */

.tempari-starlight-row {
    outline: 4px solid red !important;
    background: rgba(255, 0, 0, 0.05);
}

.tempari-starlightschleife {
    outline: 4px solid blue !important;
    background-color: rgba(0, 0, 255, 0.05);
}

.tempari-starlight-bild {
    outline: 4px solid limegreen !important;
    background-color: rgba(0, 255, 0, 0.05);
}

/* Overlay sichtbar machen */
.tempari-starlightschleife::before {
    background: rgba(255, 0, 255, 0.25) !important;
}