/* ======================================================================
   ECH Produktkachel – CSS (clean)
   ====================================================================== */

/* ==== Container & Grundwerte ==== */
.eka{
  /* Variablen */
  --edge: 30px;
  --gap: 28px;
  --radius: 10px;          /* Container-Radius (optional) */
  --tile-radius: 14px;     /* Kachel-Radius wie bei dir */
  --bg-light: rgb(242,242,242);
  --bg-dark:  rgb(60,60,60);
  --blue:     rgb(0,84,134);
  --fg-dark:  rgb(242,242,242);

  padding: 15px 0 0 0;
  background: var(--bg-light);
  border-radius: var(--radius);
  box-shadow: 0 4px 8px rgba(0,0,0,.2);
}

@media (prefers-color-scheme: dark){
  .eka{ background: var(--bg-dark); color: var(--fg-dark); }
}

/* ==== H3-Bereich ==== */
.eka__headline-wrap{
  margin: var(--edge) var(--edge) 0 var(--edge);
}
.eka__headline-wrap.is-half { width: calc(50% - 60px); }
.eka__headline-wrap.is-full { width: calc(100% - 60px); }

.eka__headline{
  background: var(--blue);
  color: var(--fg-dark);
  box-shadow: 0 4px 8px rgba(0,0,0,.2);
  font-weight: 700;
  line-height: 1.2;
  padding: 10px;
  margin: 30px 0 30px 0;
}

/* ==== Grid ==== */
.eka__grid{
  margin-top: var(--edge);
  padding: 0 var(--edge) var(--edge) var(--edge);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}
@media (max-width: 1280px){ .eka__grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 980px){  .eka__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){  .eka__grid{ grid-template-columns: 1fr; } }

/* ==== Kachel (Link + Non-Link) ==== */
.eka__tile{
  background: #fff;
  border: 1px solid rgba(0,84,134,.65);
  border-radius: var(--tile-radius);
  box-shadow: 0 3px 8px rgba(0,0,0,.12);
  overflow: hidden;
  display: block;                 /* auch <a> */
  text-decoration: none;
  color: inherit;

  transition: transform .18s ease, box-shadow .18s ease;
  will-change: transform;
}
@media (prefers-color-scheme: dark){
  .eka__tile{
    background: #2f2f2f;
    border-color: rgba(255,255,255,.55);
    color: var(--fg-dark);
  }
}

/* Hover/Focus – funktioniert auch ohne Link */
.eka__tile--link,
.eka__tile{ outline: none; }

.eka__tile--link:hover,
.eka__tile--link:focus,
.eka__tile:hover,
.eka__tile:focus-within{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 20px rgba(0,0,0,.20);
}

/* Nur Links bekommen Hand-Cursor */
.eka__tile--link{ cursor: pointer; }

.eka__tile-inner{ padding: 10px; }

/* ==== Bildbereich ==== */
.eka__img-wrap{
  background: rgb(255,255,255);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: calc(var(--tile-radius) - 2px);
}
@media (prefers-color-scheme: dark){
  .eka__img-wrap{ background: rgb(47,47,47); }
}
.eka__img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ==== Trenner + Beschreibung ==== */
.eka__sep{
  height: 1px;
  background: rgb(217,217,217);
  margin: 10px 4px;
}
@media (prefers-color-scheme: dark){
  .eka__sep{ background: rgba(255,255,255,.35); }
}

.eka__desc{
  text-align: center;
  color: var(--blue);
  margin: 8px 6px 2px;
  white-space: pre-line;    /* Enter -> Zeilenumbruch */
  line-height: 1.2;         /* Zeilenabstand */
}
@media (prefers-color-scheme: dark){
  .eka__desc{ color: var(--fg-dark); }
}

/* ==== Smartphone: Headline immer 100% ==== */
@media (max-width: 640px){
  .eka .eka__headline-wrap,
  .eka .eka__headline-wrap.is-half,
  .eka .eka__headline-wrap.is-full{
    width: calc(100% - (var(--edge) * 2)) !important;
  }
}