/* ------------------------------------------------------------------------------ */
/* ****************************************************************************** */
/* --------- (C) Copyright 2024/2025 by machtWeb | Reinhard Lange --------------- */
/* ---------------------- machtWeb.de | relaXits@machtWeb.de -------------------- */
/* ------------------------------------------------------------------------------ */
/* update	->													                            6.00/04 - 02-10-24
/* use in	-> leistungen.def.php        														                */
/* file 	-> design/cards2content.css									                            */
/* link   -> https://codepen.io/umbertojunior/pen/wQjwyL                          */
/* update -> 27-10-2022                                                           */
/* ------------------------------------------------------------------------------ */
/* CARDS with GRIDS
/* ------------------------------------------------------------------------------ */
/* IMAGES */
/* height width=512 height=384 */

/*
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
*/
:root{
  --color-gray-90: hsl(0,0%,90%);
  --color-gray-80: hsl(0,0%,80%);
  --color-gray-50: hsl(0,0%,50%);
  --color-light: hsl(0,0%,100%);
  --font-size-initial: 15px;
  --size-initial: 1px;
}

body{
  background: var(--color-gray-90);
  color: var(--color-gray-50);
  /* self font-family: BlinkMacSystemFont, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; */
  font-size: var(--font-size-initial);
}

/* CONTAINERS */
.main2card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--font-size-initial) * 18), 1fr));
  gap: calc(var(--font-size-initial) * 2);
  margin: auto;
  max-width: calc(var(--font-size-initial) * 80);
  padding: calc(var(--font-size-initial) * 2);
}

.section2card {
  background: var(--color-light);
  border-radius: calc(var(--font-size-initial) * .5);
  box-shadow: 0 calc(var(--size-initial) * 3) calc(var(--size-initial) * 6) hsla(0,0%,0%,.1);
  overflow: hidden;
}

.article2card{
  padding: calc(var(--font-size-initial) * 1.5);
}

figure{
  height: calc(var(--font-size-initial) * 15);
}

/* IMAGE */
/* img */
.image2card {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* TYPOGRAPHY */
.h3card {
  font-size: calc(var(--font-size-initial) * 1.2);
  letter-spacing: calc(var(--size-initial) * -1.25);
  line-height: calc(var(--font-size-initial) * 1.8);
  margin: calc(var(--font-size-initial) * .5) 0;
}

.p2card{
  font-size: calc(var(--font-size-initial) * .875);
  line-height: calc(var(--font-size-initial) * 1.25);
}

span{
  color: var(--color-gray-80);
  font-size: calc(var(--font-size-initial) * .75);
  letter-spacing: calc(var(--size-initial) * .75);
  text-transform: uppercase;
  word-spacing: var(--size-initial);
}

/* Hover-Effekt für die Cards */
.section2card:hover {
  z-index: 1; /* Bringt die Card in den Vordergrund */
}

.main2card:hover .section2card:not(:hover) {
  filter: brightness(0.95); /* Hellerer Abdunkelungseffekt */
  transition: filter 1s ease; /* Längere Transition */
}
.main2card:hover .section2card:not(:hover) .article2card {
  opacity: 0.4; /* Text weniger sichtbar */
  transition: opacity 0.6s ease; /* Längere Transition */
}

.main2card:hover .section2card:not(:hover) .image2card {
  filter: grayscale(100%); /* Setzt die Bilder der nicht gehoverten Cards in Graustufen */
  transition: filter 1s ease; /* Längere Transition */
}

/* Optional: Übergänge für die gehoverte Card */
.section2card:hover .image2card {
  filter: grayscale(0%); /* Entfernt Graustufen vom gehoverten Bild */
  transition: filter 1s ease;
}

.section2card:hover .article2card {
  opacity: 1; /* Text vollständig sichtbar in der gehoverten Card */
  transition: opacity 0.6s ease;
}

/* ------------------------------------------------------------------------------ */
/* END */	
/* ------------------------------------------------------------------------------ */