/* ========================================================= */
/* 💡 ZOE-BANNER – Vollständig kommentierte Responsive Version */
/* ========================================================= */
@keyframes slowheartbeat {
  0%, 100% {
    transform: scale(1);
  }
  25%, 75% {
    transform: scale(1.05);
  }
  50% {
    transform: scale(0.95);
  }
}
/* ========================================================= */
/* 🔧 BASIS-SETUP                                             */
/* ========================================================= */
.lady-grid.zoe-banner .kb-blocks-portfolio-grid-item {
  position: relative; /* Macht jedes Grid-Item zum Bezugspunkt für das Banner */
  overflow: hidden;   /* Verhindert, dass das Banner über die Bildfläche hinausragt */
}

/* ========================================================= */
/* 🖥️ STANDARD-STYLING (DESKTOP)                              */
/* ========================================================= */
.lady-grid.zoe-banner .kb-blocks-portfolio-grid-item::after {
  /* --- Inhalt --- */
  content: var(--banner-text);        /* Nimmt den Text aus der CSS-Variable (--banner-text) */
  display: var(--banner-text, none);  /* Wenn kein Text definiert ist, wird das Banner unsichtbar */

  /* --- Positionierung --- */
  position: absolute;      /* Fixiert das Banner relativ zum Bildcontainer */
  top: 6px;                /* Abstand vom oberen Rand */
  left: 6px;               /* Abstand vom linken Rand */

  /* --- Größe & Innenabstand --- */
  padding: 0 5px;          /* 5 px Innenabstand links/rechts für Luft um den Text */
  height: 22px;            /* Höhe des Banners – Standardgröße für Desktop */

  /* --- Layout (zentrierter Text) --- */
  display: flex;           /* Aktiviert Flexbox für zentrierten Text */
  align-items: center;     /* Vertikale Zentrierung des Texts */
  justify-content: center; /* Horizontale Zentrierung des Texts */

  /* --- Farben & Stil --- */
  background-color: rgba(180, 180, 180, 0.65); /* Hellgrau mit 35 % Transparenz */
  color: black;            /* Schwarze Schrift */
  font-weight: bold;       /* Fettschrift für bessere Lesbarkeit */
  font-size: 10px;         /* Schriftgröße für Desktop */
  border-radius: 4px;      /* Leicht abgerundete Ecken */
  z-index: 10;             /* Legt das Banner über das Bild */
  pointer-events: none;    /* Klicks „gehen durch“, blockieren keine Links */
  white-space: nowrap;     /* Verhindert Textumbruch bei langen Bannern */
}

/* ========================================================= */
/* 💻 TABLET (768 – 1024 px)                                 */
/* ========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
  .lady-grid.zoe-banner .kb-blocks-portfolio-grid-item::after {
    height: 20px;    /* Etwas flacheres Banner für Tablets */
    font-size: 10px; /* Etwas kleinere Schriftgröße */
    padding: 0 4px;  /* Minimal weniger Innenabstand */
    top: 5px;        /* Banner etwas näher am Bildrand */
    left: 5px;       /* Gleiches für linke Positionierung */
  }
}

/* ========================================================= */
/* 📱 MOBILE (unter 768 px)                                  */
/* ========================================================= */
@media (max-width: 767px) {
  .lady-grid.zoe-banner .kb-blocks-portfolio-grid-item::after {
    height: 20px;    /* Kompakteres Banner für Smartphones */
    font-size: 10px; /* Kleinere Schrift für kleine Displays */
    padding: 0 6px;  /* Weniger Innenabstand für enge Bildflächen */
    top: 5px;        /* Banner etwas höher positioniert */
    left: 5px;       /* Geringerer Abstand links */
  }
}

/* ========================================================= */
/* ✍️ UNTERSCHIEDLICHE TEXTE – NUR DIESEN TEIL ANPASSEN!      */
/* ========================================================= */
/* 
   👉 So funktioniert’s:
   - Jede Zeile steht für ein bestimmtes Bild im Grid.
   - "nth-child(X)" bestimmt, auf welches Grid-Item sich das Banner bezieht.
   - Mit "--banner-text" definierst du den Text, der angezeigt wird.
   - Du kannst beliebig viele Zeilen hinzufügen.
*/

/* 🔹 Bild 1 bekommt den Banner "Top Empfehlung" */
.lady-grid.zoe-banner .kb-blocks-portfolio-grid-item:nth-child(2):after , .lady-grid.zoe-banner .kb-blocks-portfolio-grid-item:nth-child(3):after {
 	background: linear-gradient(
 135deg,
    rgba(255, 223, 70, 0.9) 0%,   /* helles Goldgelb */
    rgba(212, 175, 55, 0.9) 40%,  /* mittleres Gold */
    rgba(255, 236, 139, 0.9) 70%, /* Glanzpunkt */
    rgba(184, 134, 11, 0.9) 100%  /* dunkler Goldton */
); --banner-text: "Top Empfehlung";
}

/* 🔹 Bild 3 bekommt den Banner "Neue Bilder" */
/*.lady-grid.zoe-banner .kb-blocks-portfolio-grid-item:nth-child(3):after {
	background: linear-gradient(
 135deg,
   rgba(100, 100, 100, 0.9) 0%,   /* dunkles, sattes Grau */
 /* rgba(130, 130, 130, 0.9) 10%,  /* feiner metallischer Übergang */
 /* rgba(175, 175, 175, 0.9) 55%,  /* hellerer Glanzpunkt */
 /* rgba(120, 120, 120, 0.9) 90%,  /* Rückverlauf ins Mittelgrau */
 /* rgba(90, 90, 90, 0.9) 100%     /* tiefer Abschluss */
/*);
	 --banner-text: "Neue Bilder";
}*/


.lady-grid.zoe-banner .kb-blocks-portfolio-grid-item:nth-child(4):after {
	background: linear-gradient(
 135deg,
   rgba(100, 100, 100, 0.9) 0%,   /* dunkles, sattes Grau */
  rgba(130, 130, 130, 0.9) 10%,  /* feiner metallischer Übergang */
  rgba(175, 175, 175, 0.9) 55%,  /* hellerer Glanzpunkt */
  rgba(120, 120, 120, 0.9) 90%,  /* Rückverlauf ins Mittelgrau */
  rgba(90, 90, 90, 0.9) 100%     /* tiefer Abschluss */
);
	 --banner-text: "Coming Soon";
}
/****************************************************************************/
/* Herz code                                                                                               */
/****************************************************************************/
.lady-grid.zoe-banner .kb-blocks-portfolio-grid-item:nth-child(1)::before {
  content: "❤";
  position: absolute;

  /* ✨ Positionierung: leicht unter dem Banner */
  top: 20px;    /* etwas unterhalb deines Banners (passe ggf. an) */
  left: 25px;

  font-size: 30px;
  background: linear-gradient(
    135deg,
     #7a5c20 10%,    /* dunkles Antikgold als Basis */
    #b8860b 30%,   /* warmes Goldbraun */
    #f9d976 50%,   /* hell glänzender Goldton (Reflexpunkt) */
    #d4af37 70%,   /* klassisches Mittelgold */
    #8b7500 100%   /* tiefer Bronzeabschluss */
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.4);

  z-index: 5;         /* 🔸 unter dem Banner (Banner liegt meist bei z-index 10) */
  pointer-events: none;

  /* 💫 Animation – langsames Pulsieren */
  transform-origin: center;
  will-change: transform;
  animation: slowheartbeat 2s infinite ease-in-out;
}

/* 🔹 Bild 5 bekommt den Banner "Neu" */
.lady-grid.zoe-banner .kb-blocks-portfolio-grid-item:nth-child(1):after {
  --banner-text: "Neues Model";
	/*background-color: rgba(255, 215, 0, 0.9);*/
	background: linear-gradient(
    135deg,
    rgba(255, 223, 70, 0.9) 0%,   /* helles Goldgelb */
    rgba(212, 175, 55, 0.9) 40%,  /* mittleres Gold */
    rgba(255, 236, 139, 0.9) 70%, /* Glanzpunkt */
    rgba(184, 134, 11, 0.9) 100%  /* dunkler Goldton */
  );
	color: black;
}

/* 
   💡 Beispiel:
   Wenn du z. B. bei Bild 7 den Text „Exklusiv“ möchtest,
   füge einfach Folgendes hinzu:

   .lady-grid.zoe-banner .kb-blocks-portfolio-grid-item:nth-child(7) {
     --banner-text: "Exklusiv";
   }
*/

/* ========================================================= */
/* 🏁 ENDE DES ZOE-BANNER-CODES                               */
/* ========================================================= */